Update dependency @gitlab/eslint-plugin to v9

Some violations have been fixed, and others have been ignored for now
when the fix would either be too large or impact performance.

.eslintrc.yml

@@ -17,14 +17,6 @@ settings:
     webpack:
       config: './config/webpack.config.js'
 rules:
-  # BEGIN Disallow deprecated slot syntax
-  # TODO: Remove once
-  # https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/31 is closed
-  # and consumed by GitLab.
-  vue/no-deprecated-scope-attribute: error
-  vue/no-deprecated-slot-attribute: error
-  vue/no-deprecated-slot-scope-attribute: error
-  # END Disallow deprecated slot syntax
   import/no-commonjs: error
   import/no-default-export: off
   no-underscore-dangle:

app/assets/javascripts/boards/index.js

@@ -306,9 +306,11 @@ export default () => {
   // eslint-disable-next-line no-new, @gitlab/no-runtime-template-compiler
   new Vue({
     el: document.getElementById('js-add-list'),
-    data: {
-      filters: boardsStore.state.filters,
-      ...getMilestoneTitle($boardApp),
+    data() {
+      return {
+        filters: boardsStore.state.filters,
+        ...getMilestoneTitle($boardApp),
+      };
     },
     mounted() {
       initNewListDropdown();

app/assets/javascripts/emoji/components/emoji_group.vue

@@ -17,6 +17,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
 <template functional>
   <div class="gl-display-flex gl-flex-wrap gl-mb-2">
     <template v-if="props.renderGroup">

app/assets/javascripts/environments/components/environments_table.vue

@@ -152,8 +152,7 @@ export default {
       </div>
     </div>
     <template v-for="(model, i) in sortedEnvironments" :model="model">
-      <div
-        is="environment-item"
+      <environment-item
         :key="`environment-item-${i}`"
         :model="model"
         :can-read-environment="canReadEnvironment"
@@ -189,8 +188,7 @@ export default {
 
         <template v-else>
           <template v-for="(child, index) in model.children">
-            <div
-              is="environment-item"
+            <environment-item
               :key="`environment-row-${i}-${index}`"
               :model="child"
               :can-read-environment="canReadEnvironment"

app/assets/javascripts/logs/components/environment_logs.vue

@@ -29,9 +29,6 @@ export default {
     LogAdvancedFilters,
     LogControlButtons,
   },
-  filters: {
-    formatDate,
-  },
   props: {
     environmentName: {
       type: String,
@@ -114,6 +111,7 @@ export default {
       const { scrollTop = 0, clientHeight = 0, scrollHeight = 0 } = target;
       this.scrollDownButtonDisabled = scrollTop + clientHeight === scrollHeight;
     }, 200),
+    formatDate,
   },
 };
 </script>
@@ -229,8 +227,8 @@ export default {
 
     <div ref="logFooter" class="py-2 px-3 text-white bg-secondary-900">
       <gl-sprintf :message="s__('Environments|Logs from %{start} to %{end}.')">
-        <template #start>{{ timeRange.current.start | formatDate }}</template>
-        <template #end>{{ timeRange.current.end | formatDate }}</template>
+        <template #start>{{ formatDate(timeRange.current.start) }}</template>
+        <template #end>{{ formatDate(timeRange.current.end) }}</template>
       </gl-sprintf>
       <gl-sprintf
         v-if="!logs.isComplete"

app/assets/javascripts/pages/admin/projects/index/index.js

@@ -13,9 +13,11 @@ import deleteProjectModal from './components/delete_project_modal.vue';
 
   const deleteModal = new Vue({
     el: deleteProjectModalEl,
-    data: {
-      deleteProjectUrl: '',
-      projectName: '',
+    data() {
+      return {
+        deleteProjectUrl: '',
+        projectName: '',
+      };
     },
     mounted() {
       const deleteProjectButtons = document.querySelectorAll('.delete-project-button');

app/assets/javascripts/pages/shared/wikis/index.js

@@ -27,8 +27,10 @@ const createModalVueApp = () => {
     // eslint-disable-next-line no-new
     new Vue({
       el: deleteWikiModalWrapperEl,
-      data: {
-        deleteWikiUrl: '',
+      data() {
+        return {
+          deleteWikiUrl: '',
+        };
       },
       render(createElement) {
         return createElement(deleteWikiModal, {

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -27,9 +27,7 @@ export default {
     title: {
       type: String,
       required: false,
-      default() {
-        return this.metric;
-      },
+      default: null,
     },
     header: {
       type: String,
@@ -101,6 +99,9 @@ export default {
 
       return '';
     },
+    actualTitle() {
+      return this.title ?? this.metric;
+    },
   },
   methods: {
     toggleBacktrace(toggledIndex) {
@@ -214,7 +215,7 @@ export default {
         <div></div>
       </template>
     </gl-modal>
-    {{ title }}
+    {{ actualTitle }}
     <request-warning :html-id="htmlId" :warnings="warnings" />
   </div>
 </template>

app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue

+<!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
 <template functional>
   <footer class="form-actions d-flex justify-content-between">
     <div><slot name="prepend"></slot></div>

doc/development/fe_guide/vue3_migration.md

@@ -8,7 +8,10 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 
 Preparations for a Vue 3 migration are tracked in epic [&3174](https://gitlab.com/groups/gitlab-org/-/epics/3174)
 
-In order to prepare for the eventual migration to Vue 3.x, we should be wary about adding the following features to the codebase:
+In order to prepare for the eventual migration to Vue 3.x, we should not use the following deprecated features in the codebase:
+
+NOTE:
+Our linting rules block the use of these deprecated features.
 
 ## Vue filters
 
@@ -132,3 +135,47 @@ shallowMount(MyAwesomeComponent, {
   }
 })
 ```
+
+## Props default function `this` access
+
+**Why?**
+
+In Vue 3, props default value factory functions no longer have access to `this`
+(the component instance).
+
+**What to use instead**
+
+Write a computed prop that resolves the desired value from other props. This
+will work in both Vue 2 and 3.
+
+```html
+<script>
+export default {
+  props: {
+    metric: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    actualTitle() {
+      return this.title ?? this.metric;
+    },
+  },
+}
+
+</script>
+
+<template>
+  <div>{{ actualTitle }}</div>
+</template>
+```
+
+[In Vue 3](https://v3.vuejs.org/guide/migration/props-default-this.html#props-default-function-this-access),
+the props default value factory is passed the raw props as an argument, and can
+also access injections.

ee/app/assets/javascripts/issues/components/blocking_issues_count.vue

@@ -37,8 +37,8 @@ export default {
 </script>
 
 <template>
-  <span :is="tag" v-if="showBlockingIssuesCount" v-gl-tooltip :title="__('Blocking issues')">
+  <component :is="tag" v-if="showBlockingIssuesCount" v-gl-tooltip :title="__('Blocking issues')">
     <gl-icon name="issue-block" />
     {{ blockingIssuesCount }}
-  </span>
+  </component>
 </template>

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue

@@ -10,6 +10,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
 <template functional>
   <div class="d-sm-flex my-sm-2 my-4">
     <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ props.label }}:</label>

package.json

@@ -195,7 +195,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
-    "@gitlab/eslint-plugin": "8.4.0",
+    "@gitlab/eslint-plugin": "9.0.0",
     "@gitlab/stylelint-config": "2.3.0",
     "@testing-library/dom": "^7.16.2",
     "@vue/test-utils": "1.2.0",

spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js

@@ -109,9 +109,11 @@ describe('ImageDiffViewer', () => {
       components: {
         imageDiffViewer,
       },
-      data: {
-        ...allProps,
-        diffMode: 'renamed',
+      data() {
+        return {
+          ...allProps,
+          diffMode: 'renamed',
+        };
       },
       ...compileToFunctions(`
         <image-diff-viewer

yarn.lock

@@ -867,10 +867,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/at.js/-/at.js-1.5.7.tgz#1ee6f838cc4410a1d797770934df91d90df8179e"
   integrity sha512-c6ySRK/Ma7lxwpIVbSAF3P+xiTLrNTGTLRx4/pHK111AdFxwgUwrYF6aVZFXvmG65jHOJHoa0eQQ21RW6rm0Rg==
 
-"@gitlab/eslint-plugin@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-8.4.0.tgz#094fa4d41676a71146f82e1b19257a7ceabefd88"
-  integrity sha512-VE/c1yIMrj2igJWAALQtAKpnXL8fN5wJ1uKteZfi8xYbWouoUK6hizXSPrrEUWiM2FqcBI4Igcpz2JlJzDlAnA==
+"@gitlab/eslint-plugin@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-9.0.0.tgz#0c872428e3237e0dbd2cbbe74317fc3786cefdf9"
+  integrity sha512-TaKLzaAFQbsJJIbetLTARkJNapIWuis8RyOp/arbVS5Fl8IjBK8m3hPmqIc5CwOz9qK8o5eSW1MA9clU/dLY3w==
   dependencies:
     babel-eslint "^10.0.3"
     eslint-config-airbnb-base "^14.2.1"