Update to @gitlab/eslint-plugin@6

This updates to `@gitlab/eslint-plugin@6`, which includes breaking
changes via the transitive dependency `eslint-plugin-vue` being upgraded
from v6 to v7.

This adds/improves various lint rules of Vue files; the full changes are
documented in their [release post][1]. The most notable addition is the
`vue/no-mutating-props` rule, which can help to prevent subtle runtime
bugs.

For several of the new/changed rules, the GitLab codebase has a number
of violations. Rather than fixing all of them in this change, those new
rules are disabled (e.g., `vue/no-mutating-props`), and the changed
rules are reconfigured to mimic v6 settings (e.g.,
`vue/order-in-components`).  This way, these can be addressed/fixed
separately in follow ups.

Otherwise, one-off violations, (e.g., of `vue/require-render-return`)
have been fixed here.

There were a few odd findings during this process that might suggest
upstream bugs:

1. The `vue/one-component-per-file` rule finds what seems to be only
   false positives in this codebase, e.g.,
   `~/registry/explorer/components/list_page/cli_commands.vue`; it
   _seems_ like the `Tracking.mixin` call is being considered as another
   component definition(?).
2. Three rules were violated by the line
   `spec/frontend/clusters/components/applications_spec.js:547`:
   `@gitlab/vue-require-required-key`, `vue/require-default-prop` and
   `vue/require-prop-type-constructor.` This is odd, because no Vue
   component was being defined or constructed there. Changing a `props`
   field to `propsData` resolved all three.

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/296868, part of
https://gitlab.com/groups/gitlab-org/-/epics/5142.

[1]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.0.0

.eslintrc.yml

@@ -43,6 +43,62 @@ rules:
   promise/always-return: off
   promise/no-callback-in-promise: off
   "@gitlab/no-global-event-off": error
+
+  # BEGIN eslint-plugin-vue@7 overrides
+  # TODO: Remove these rules as part of
+  # https://gitlab.com/groups/gitlab-org/-/epics/5142. These are setting
+  # various vue lint rules as they were in eslint-plugin-vue@6, or disabling
+  # new ones, to ease migration to v7, so violations of each can be fixed
+  # separately.
+  vue/order-in-components:
+    - error
+    # This is the order from eslint-plugin-vue@6.2.2
+    - order:
+      - el
+      - name
+      - parent
+      - functional
+      -
+        - delimiters
+        - comments
+      -
+        - components
+        - directives
+        - filters
+      - extends
+      - mixins
+      - inheritAttrs
+      - model
+      -
+        - props
+        - propsData
+      - fetch
+      - asyncData
+      - data
+      - computed
+      - watch
+      -
+        - beforeCreate
+        - created
+        - beforeMount
+        - mounted
+        - beforeUpdate
+        - updated
+        - activated
+        - deactivated
+        - beforeDestroy
+        - destroyed
+      - methods
+      - head
+      -
+        - template
+        - render
+      - renderError
+  vue/no-mutating-props: off
+  vue/one-component-per-file: off
+  vue/no-lone-template: off
+  vue/component-definition-name-casing: off
+  # END eslint-plugin-vue@7 overrides
 overrides:
   - files:
       - '**/spec/**/*'

ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue

@@ -108,7 +108,7 @@ export default {
     },
   },
   watch: {
-    currentPage: () => {
+    currentPage() {
       window.scrollTo(0, 0);
     },
   },

package.json

@@ -162,7 +162,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
-    "@gitlab/eslint-plugin": "6.0.0",
+    "@gitlab/eslint-plugin": "^6.0.0",
     "@testing-library/dom": "^7.16.2",
     "@vue/test-utils": "1.1.2",
     "acorn": "^6.3.0",

spec/frontend/clusters/components/applications_spec.js

@@ -16,7 +16,7 @@ describe('Applications', () => {
     gon.features = gon.features || {};
   });
 
-  const createApp = ({ applications, type, props } = {}, isShallow) => {
+  const createApp = ({ applications, type, propsData } = {}, isShallow) => {
     const mountMethod = isShallow ? shallowMount : mount;
 
     wrapper = mountMethod(Applications, {
@@ -24,7 +24,7 @@ describe('Applications', () => {
       propsData: {
         type,
         applications: { ...APPLICATIONS_MOCK_STATE, ...applications },
-        ...props,
+        ...propsData,
       },
     });
   };
@@ -544,7 +544,7 @@ describe('Applications', () => {
 
   describe('Cilium application', () => {
     it('shows the correct description', () => {
-      createApp({ props: { ciliumHelpPath: 'cilium-help-path' } });
+      createApp({ propsData: { ciliumHelpPath: 'cilium-help-path' } });
       expect(findByTestId('ciliumDescription').element).toMatchSnapshot();
     });
   });

spec/frontend/ide/components/panes/collapsible_sidebar_spec.js

@@ -47,7 +47,7 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => {
 
     beforeEach(() => {
       const FakeComponent = localVue.component(fakeComponentName, {
-        render: () => {},
+        render: () => null,
       });
 
       fakeView = {

yarn.lock

@@ -845,7 +845,7 @@
   resolved "https://registry.yarnpkg.com/@gitlab/at.js/-/at.js-1.5.5.tgz#5f6bfe6baaef360daa9b038fa78798d7a6a916b4"
   integrity sha512-282Dn3SPVsUHVDhMsXgfnv+Rzog0uxecjttxGRQvxh25es1+xvkGQFsvJfkSKJ3X1kHVkSjKf+Tt5Rra+Jhp9g==
 
-"@gitlab/eslint-plugin@6.0.0":
+"@gitlab/eslint-plugin@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-6.0.0.tgz#deb18f63808af1cb1cc117a92558f07edb1e2256"
   integrity sha512-3TihEG0EzbGtc6wxZLANZN1ge2tnAv0qU8w6smUACmPhqFj0/DrCq9V6QKPqAHk/Yn3hrfGk5nznAzzuMEgwDQ==