Test for upgrading to Vue compat 3

[ci skip]

app/assets/javascripts/diffs/components/compare_dropdown_layout.vue

@@ -25,10 +25,9 @@ export default {
 <template>
   <gl-dropdown :text="selectedVersionName" data-qa-selector="dropdown_content">
-    <template v-for="version in versions">
+    <template v-for="version in versions" :key="version.id">
       <gl-dropdown-divider v-if="version.addDivider" :key="version.id" />
       <gl-dropdown-item
-        :key="version.id"
         :class="{
           'is-active': version.selected,
         }"

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -65,7 +65,7 @@ export default {
       <col />
     </colgroup>
     <tbody>
-      <template v-for="(line, index) in diffLines">
+      <template v-for="(line, index) in diffLines" :key="line.line_code">
         <tr
           v-if="line.isMatchLineLeft || line.isMatchLineRight"
           :key="`expand-${index}`"
@@ -82,7 +82,6 @@ export default {
           </td>
         </tr>
         <parallel-diff-table-row
-          :key="line.line_code"
           :file-hash="diffFile.file_hash"
           :file-path="diffFile.file_path"
           :line="line"

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

@@ -17,16 +17,16 @@ export default {
 };
 </script>
-<template functional>
+<template>
   <div class="gl-display-flex gl-flex-wrap gl-mb-2">
-    <template v-if="props.renderGroup">
+    <template v-if="renderGroup">
       <button
-        v-for="emoji in props.emojis"
+        v-for="emoji in emojis"
         :key="emoji"
         type="button"
         class="gl-border-0 gl-bg-transparent gl-px-0 gl-py-2 gl-text-center emoji-picker-emoji"
         data-testid="emoji-button"
-        @click="props.clickEmoji(emoji)"
+        @click="clickEmoji(emoji)"
       >
         <gl-emoji :data-name="emoji" />
       </button>

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

@@ -124,8 +124,8 @@ export default {
     <table v-if="isExpanded" :class="$options.userColorScheme" class="code js-syntax-highlight">
       <tbody>
-        <template v-for="(line, index) in lines">
-          <tr :key="`stacktrace-line-${index}`" class="line_holder">
+        <template v-for="(line, index) in lines" :key="`stacktrace-line-${index}`">
+          <tr class="line_holder">
             <td class="diff-line-num" :class="{ old: isHighlighted(lineNum(line)) }">
               {{ lineNum(line) }}
             </td>

app/assets/javascripts/ide/components/jobs/detail.vue

@@ -103,8 +103,7 @@ export default {
         v-show="!detailJob.isLoading"
         class="bash"
         v-html="jobOutput"
-      >
-      </code>
+      ></code>
       <div
         v-show="detailJob.isLoading"
         class="build-loader-animation"

app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue

@@ -174,12 +174,8 @@ export default {
           <th class="import-jobs-cta-col gl-p-4 gl-vertical-align-top gl-border-b-1"></th>
         </thead>
         <tbody>
-          <template v-for="repo in repositories">
-            <provider-repo-table-row
-              :key="repo.importSource.providerLink"
-              :repo="repo"
-              :available-namespaces="availableNamespaces"
-            />
+          <template v-for="repo in repositories" :key="repo.importSource.providerLink">
+            <provider-repo-table-row :repo="repo" :available-namespaces="availableNamespaces" />
           </template>
         </tbody>
       </table>

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -319,9 +319,8 @@ export default {
           v-bind="$attrs"
           :text="selectedRoleName"
         >
-          <template v-for="(key, item) in accessLevels">
+          <template v-for="(key, item) in accessLevels" :key="key">
             <gl-dropdown-item
-              :key="key"
               active-class="is-active"
               is-check-item
               :is-checked="key === selectedAccessLevel"

app/assets/javascripts/nav/components/top_nav_new_dropdown.vue

@@ -40,13 +40,8 @@ export default {
       <gl-dropdown-section-header v-if="showHeaders" :key="`${index}_header`" data-testid="header">
         {{ title }}
       </gl-dropdown-section-header>
-      <template v-for="menuItem in menu_items">
-        <gl-dropdown-item
-          :key="`${index}_item_${menuItem.id}`"
-          link-class="top-nav-menu-item"
-          :href="menuItem.href"
-          data-testid="item"
-        >
+      <template v-for="menuItem in menu_items" :key="`${index}_item_${menuItem.id}`">
+        <gl-dropdown-item link-class="top-nav-menu-item" :href="menuItem.href" data-testid="item">
           {{ menuItem.title }}
         </gl-dropdown-item>
       </template>

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -12,7 +12,7 @@ import eventHub from '../event_hub';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
 import diffDiscussionHeader from './diff_discussion_header.vue';
-import diffWithNote from './diff_with_note.vue';
+// import diffWithNote from './diff_with_note.vue';
 import DiscussionActions from './discussion_actions.vue';
 import DiscussionNotes from './discussion_notes.vue';
 import noteForm from './note_form.vue';
@@ -106,7 +106,7 @@ export default {
       return !this.shouldRenderDiffs;
     },
     wrapperComponent() {
-      return this.shouldRenderDiffs ? diffWithNote : 'div';
+      return this.shouldRenderDiffs ? 'div' : 'div';
     },
     wrapperComponentProps() {
       if (this.shouldRenderDiffs) {

app/assets/javascripts/reports/components/grouped_issues_list.vue

@@ -84,9 +84,8 @@ export default {
     wtag="ul"
     wclass="report-block-list"
   >
-    <template v-for="(group, groupIndex) in groups">
+    <template v-for="(group, groupIndex) in groups" :key="group.name">
       <h2
-        :key="group.name"
         :data-testid="`${group.name}Heading`"
         :class="[groupIndex > 0 ? 'mt-2' : 'mt-0']"
         class="h5 mb-1"

app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue

@@ -160,12 +160,8 @@ export default {
     </template>
     <template #body>
       <div class="mr-widget-grouped-section report-block">
-        <template v-for="(report, i) in reports">
-          <summary-row
-            :key="`summary-row-${i}`"
-            :status-icon="getReportIcon(report)"
-            nested-summary
-          >
+        <template v-for="(report, i) in reports" :key="`summary-row-${i}`">
+          <summary-row :status-icon="getReportIcon(report)" nested-summary>
             <template #summary>
               <div class="gl-display-inline-flex gl-flex-direction-column">
                 <div>{{ reportText(report) }}</div>

app/assets/javascripts/repository/components/breadcrumbs.vue

@@ -283,10 +283,9 @@ export default {
             <gl-icon name="plus" :size="16" class="float-left" />
             <gl-icon name="chevron-down" :size="16" class="float-left" />
           </template>
-          <template v-for="(item, i) in dropdownItems">
+          <template v-for="(item, i) in dropdownItems" :key="i">
             <component
               :is="getComponent(item.type)"
-              :key="i"
               v-bind="item.attrs"
               v-gl-modal="item.modalId || null"
             >

app/assets/javascripts/snippets/components/embed_dropdown.vue

@@ -50,12 +50,9 @@ export default {
     :text="$options.MSG_EMBED"
     menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
   >
-    <template v-for="{ name, value } in sections">
-      <gl-dropdown-section-header :key="`header_${name}`" data-testid="header">{{
-        name
-      }}</gl-dropdown-section-header>
+    <template v-for="{ name, value } in sections" :key="name">
+      <gl-dropdown-section-header data-testid="header">{{ name }}</gl-dropdown-section-header>
       <gl-dropdown-text
-        :key="`input_${name}`"
         tag="div"
         class="gl-dropdown-text-py-0 gl-dropdown-text-block"
         data-testid="input"

app/assets/javascripts/vue_shared/components/actions_button.vue

@@ -73,9 +73,8 @@ export default {
         {{ selectedAction.text }}
       </span>
     </template>
-    <template v-for="(action, index) in actions">
+    <template v-for="(action, index) in actions" :key="action.key">
       <gl-dropdown-item
-        :key="action.key"
         :is-check-item="true"
         :is-checked="action.key === selectedAction.key"
         :secondary-text="action.secondaryText"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue

@@ -47,8 +47,9 @@ export default {
     <span v-if="!selectedLabels.length" class="text-secondary">
       <slot></slot>
     </span>
-    <template v-for="label in selectedLabels" v-else>
+    <template v-else>
       <gl-label
+        v-for="label in selectedLabels"
         :key="label.id"
         data-qa-selector="selected_label_content"
         :data-qa-label-name="label.title"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue

@@ -47,9 +47,8 @@ export default {
     <span v-if="!selectedLabels.length" class="text-secondary">
       <slot></slot>
     </span>
-    <template v-for="label in selectedLabels" v-else>
+    <template v-for="label in selectedLabels" v-else :key="label.id">
       <gl-label
-        :key="label.id"
         data-qa-selector="selected_label_content"
         :data-qa-label-name="label.title"
         :title="label.title"

config/webpack.config.js

@@ -6,7 +6,7 @@ const SOURCEGRAPH_VERSION = require('@sourcegraph/code-host-integration/package.
 const CompressionPlugin = require('compression-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const glob = require('glob');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const VueLoaderPlugin = require('vue-loader/dist/pluginWebpack4').default;
 const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
 const VUE_VERSION = require('vue/package.json').version;
 const webpack = require('webpack');
@@ -129,7 +129,7 @@ const alias = {
   icons: path.join(ROOT_PATH, 'app/views/shared/icons'),
   images: path.join(ROOT_PATH, 'app/assets/images'),
   vendor: path.join(ROOT_PATH, 'vendor/assets/javascripts'),
-  vue$: 'vue/dist/vue.esm.js',
+  vue$: '@vue/compat',
   jquery$: 'jquery/dist/jquery.slim.js',
   spec: path.join(ROOT_PATH, 'spec/javascripts'),
   jest: path.join(ROOT_PATH, 'spec/frontend'),
@@ -223,6 +223,11 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
           cacheDirectory: path.join(CACHE_PATH, 'vue-loader'),
           cacheIdentifier: [
             process.env.NODE_ENV || 'development',
@@ -278,7 +283,7 @@ module.exports = {
       {
         test: /.css$/,
         use: [
-          'vue-style-loader',
+          'style-loader',
           {
             loader: 'css-loader',
             options: {

ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue

@@ -128,7 +128,7 @@ export default {
           :eligible-approvers-docs-path="settings.eligibleApproversDocsPath"
           :can-edit="canEdit"
         />
-        <tr v-else :key="index">
+        <tr v-else :key="`rule_${index}`">
           <td>
             <div class="js-name">{{ rule.name }}</div>
             <div ref="indicator" class="text-muted">{{ indicatorText(rule) }}</div>

ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue

@@ -124,7 +124,7 @@ export default {
             :eligible-approvers-docs-path="settings.eligibleApproversDocsPath"
             :can-edit="canEdit(rule)"
           />
-          <tr v-else :key="index">
+          <tr v-else :key="`rule_${index}`">
             <td class="js-name">
               <rule-name :name="rule.name" />
             </td>

ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue

@@ -133,9 +133,9 @@ export default {
       >
     </template>
     <template v-else>
-      <template v-for="(cadence, index) in iterationCadences">
+      <template v-for="(cadence, index) in iterationCadences" :key="cadence.title">
         <gl-dropdown-divider v-if="index !== 0" :key="index" />
-        <gl-dropdown-section-header :key="cadence.title">
+        <gl-dropdown-section-header>
           {{ cadence.title }}
         </gl-dropdown-section-header>
         <gl-dropdown-item