Merge branch '334245-remove-deprecated-slot-scope-attribute-from-the-codebase' into 'master'

Remove deprecated `slot-scope` attribute from the codebase[RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!64604

.eslintrc.yml

@@ -17,6 +17,14 @@ 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/batch_comments/components/draft_note.vue

@@ -94,9 +94,11 @@ export default {
         @handleUpdateNote="update"
         @toggleResolveStatus="toggleResolveDiscussion(draft.id)"
       >
-        <strong slot="note-header-info" class="badge draft-pending-label gl-mr-2">
-          {{ __('Pending') }}
-        </strong>
+        <template #note-header-info>
+          <strong class="badge draft-pending-label gl-mr-2">
+            {{ __('Pending') }}
+          </strong>
+        </template>
       </noteable-note>
     </ul>
 

app/assets/javascripts/contributors/components/contributors.vue

@@ -204,15 +204,16 @@ export default {
       <h4 class="gl-mb-2 gl-mt-5">{{ __('Commits to') }} {{ branch }}</h4>
       <span>{{ __('Excluding merge commits. Limited to 6,000 commits.') }}</span>
       <resizable-chart-container>
-        <gl-area-chart
-          slot-scope="{ width }"
-          class="gl-mb-5"
-          :width="width"
-          :data="masterChartData"
-          :option="masterChartOptions"
-          :height="masterChartHeight"
-          @created="onMasterChartCreated"
-        />
+        <template #default="{ width }">
+          <gl-area-chart
+            class="gl-mb-5"
+            :width="width"
+            :data="masterChartData"
+            :option="masterChartOptions"
+            :height="masterChartHeight"
+            @created="onMasterChartCreated"
+          />
+        </template>
       </resizable-chart-container>
 
       <div class="row">
@@ -226,14 +227,15 @@ export default {
             {{ n__('%d commit', '%d commits', contributor.commits) }} ({{ contributor.email }})
           </p>
           <resizable-chart-container>
-            <gl-area-chart
-              slot-scope="{ width }"
-              :width="width"
-              :data="contributor.dates"
-              :option="individualChartOptions"
-              :height="individualChartHeight"
-              @created="onIndividualChartCreated"
-            />
+            <template #default="{ width }">
+              <gl-area-chart
+                :width="width"
+                :data="contributor.dates"
+                :option="individualChartOptions"
+                :height="individualChartHeight"
+                @created="onIndividualChartCreated"
+              />
+            </template>
           </resizable-chart-container>
         </div>
       </div>

app/assets/javascripts/issuable_create/components/issuable_form.vue

@@ -72,16 +72,17 @@ export default {
           :show-suggest-popover="true"
           :textarea-value="issuableDescription"
         >
-          <textarea
-            id="issuable-description"
-            ref="textarea"
-            slot="textarea"
-            v-model="issuableDescription"
-            dir="auto"
-            class="note-textarea qa-issuable-form-description rspec-issuable-form-description js-gfm-input js-autosize markdown-area"
-            :aria-label="__('Description')"
-            :placeholder="__('Write a comment or drag your files here…')"
-          ></textarea>
+          <template #textarea>
+            <textarea
+              id="issuable-description"
+              ref="textarea"
+              v-model="issuableDescription"
+              dir="auto"
+              class="note-textarea qa-issuable-form-description rspec-issuable-form-description js-gfm-input js-autosize markdown-area"
+              :aria-label="__('Description')"
+              :placeholder="__('Write a comment or drag your files here…')"
+            ></textarea>
+          </template>
         </markdown-field>
       </div>
     </div>

app/assets/javascripts/members/components/members_tabs.vue

@@ -116,7 +116,7 @@ export default {
         :title-link-attributes="tab.attrs"
         :query-param-value="tab.queryParamValue"
       >
-        <template slot="title">
+        <template #title>
           <span>{{ tab.title }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge">{{ getTabCount(tab) }}</gl-badge>
         </template>

app/assets/javascripts/milestones/components/milestone_combobox.vue

@@ -171,7 +171,7 @@ export default {
 
 <template>
   <gl-dropdown v-bind="$attrs" class="milestone-combobox" @shown="focusSearchBox">
-    <template slot="button-content">
+    <template #button-content>
       <span data-testid="milestone-combobox-button-content" class="gl-flex-grow-1 text-muted">{{
         selectedMilestonesLabel
       }}</span>

app/assets/javascripts/monitoring/components/charts/time_series.vue

@@ -402,22 +402,20 @@ export default {
       @created="onChartCreated"
       @updated="onChartUpdated"
     >
-      <template v-if="tooltip.type === 'deployments'">
-        <template slot="tooltip-title">
+      <template #tooltip-title>
+        <template v-if="tooltip.type === 'deployments'">
           {{ __('Deployed') }}
         </template>
-        <div slot="tooltip-content" class="d-flex align-items-center">
+        <div v-else class="text-nowrap">
+          {{ tooltip.title }}
+        </div>
+      </template>
+      <template #tooltip-content>
+        <div v-if="tooltip.type === 'deployments'" class="d-flex align-items-center">
           <gl-icon name="commit" class="mr-2" />
           <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
-      </template>
-      <template v-else>
-        <template slot="tooltip-title">
-          <div class="text-nowrap">
-            {{ tooltip.title }}
-          </div>
-        </template>
-        <template slot="tooltip-content" :tooltip="tooltip">
+        <template v-else>
           <div
             v-for="(content, key) in tooltip.content"
             :key="key"

app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue

@@ -138,10 +138,10 @@ export default {
 </script>
 
 <template>
-  <!-- 
+  <!--
     This component should be replaced with a variant developed
     as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936
-    The variant will create a dropdown with an icon, no text and no caret    
+    The variant will create a dropdown with an icon, no text and no caret
   -->
   <gl-dropdown
     v-gl-tooltip
@@ -177,20 +177,22 @@ export default {
             @formValidation="setFormValidity"
           />
         </form>
-        <div slot="modal-footer">
-          <gl-button @click="hideAddMetricModal">
-            {{ __('Cancel') }}
-          </gl-button>
-          <gl-button
-            v-track-event="getAddMetricTrackingOptions()"
-            data-testid="add-metric-modal-submit-button"
-            :disabled="!customMetricsFormIsValid"
-            variant="success"
-            @click="submitCustomMetricsForm"
-          >
-            {{ __('Save changes') }}
-          </gl-button>
-        </div>
+        <template #modal-footer>
+          <div>
+            <gl-button @click="hideAddMetricModal">
+              {{ __('Cancel') }}
+            </gl-button>
+            <gl-button
+              v-track-event="getAddMetricTrackingOptions()"
+              data-testid="add-metric-modal-submit-button"
+              :disabled="!customMetricsFormIsValid"
+              variant="success"
+              @click="submitCustomMetricsForm"
+            >
+              {{ __('Save changes') }}
+            </gl-button>
+          </div>
+        </template>
       </gl-modal>
     </template>
 

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

@@ -130,15 +130,18 @@ export default {
           @handleDeleteNote="$emit('deleteNote')"
           @startReplying="$emit('startReplying')"
         >
-          <note-edited-text
-            v-if="discussion.resolved"
-            slot="discussion-resolved-text"
-            :edited-at="discussion.resolved_at"
-            :edited-by="discussion.resolved_by"
-            :action-text="resolvedText"
-            class-name="discussion-headline-light js-discussion-headline discussion-resolved-text"
-          />
-          <slot slot="avatar-badge" name="avatar-badge"></slot>
+          <template #discussion-resolved-text>
+            <note-edited-text
+              v-if="discussion.resolved"
+              :edited-at="discussion.resolved_at"
+              :edited-by="discussion.resolved_by"
+              :action-text="resolvedText"
+              class-name="discussion-headline-light js-discussion-headline discussion-resolved-text"
+            />
+          </template>
+          <template #avatar-badge>
+            <slot name="avatar-badge"></slot>
+          </template>
         </component>
         <discussion-notes-replies-wrapper :is-diff-discussion="discussion.diff_discussion">
           <toggle-replies-widget
@@ -175,7 +178,9 @@ export default {
           :discussion-resolve-path="discussion.resolve_path"
           @handleDeleteNote="$emit('deleteNote')"
         >
-          <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"></slot>
+          <template #avatar-badge>
+            <slot v-if="index === 0" name="avatar-badge"></slot>
+          </template>
         </component>
         <slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
       </template>

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

@@ -265,7 +265,9 @@ export default {
               @startReplying="showReplyForm"
               @deleteNote="deleteNoteHandler"
             >
-              <slot slot="avatar-badge" name="avatar-badge"></slot>
+              <template #avatar-badge>
+                <slot name="avatar-badge"></slot>
+              </template>
               <template #footer="{ showReplies }">
                 <draft-note
                   v-if="showDraft(discussion.reply_id)"

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

@@ -392,7 +392,9 @@ export default {
         :img-alt="author.name"
         :img-size="40"
       >
-        <slot slot="avatar-badge" name="avatar-badge"></slot>
+        <template #avatar-badge>
+          <slot name="avatar-badge"></slot>
+        </template>
       </user-avatar-link>
     </div>
     <div class="timeline-content">
@@ -403,7 +405,9 @@ export default {
           :note-id="note.id"
           :is-confidential="note.confidential"
         >
-          <slot slot="note-header-info" name="note-header-info"></slot>
+          <template #note-header-info>
+            <slot name="note-header-info"></slot>
+          </template>
           <span v-if="commit" v-safe-html="actionText"></span>
           <span v-else-if="note.created_at" class="d-none d-sm-inline">&middot;</span>
         </note-header>

app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue

@@ -301,7 +301,7 @@ export default {
               :state="form.fields.namespace.state"
               required
             >
-              <template slot="first">
+              <template #first>
                 <option :value="null" disabled>{{ s__('ForkProject|Select a namespace') }}</option>
               </template>
               <option v-for="namespace in namespaces" :key="namespace.id" :value="namespace">

app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue

@@ -85,28 +85,29 @@ export default {
     :action-cancel="$options.cancelProps"
     @primary="onSubmit"
   >
-    <div slot="modal-title" class="modal-title-with-label">
-      <gl-sprintf
-        :message="
-          s__(
-            'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
-          )
-        "
-      >
-        <template #labelTitle>
-          <span
-            class="label color-label"
-            :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
-          >
-            {{ labelTitle }}
-          </span>
-        </template>
-        <template #span="{ content }"
-          ><span>{{ content }}</span></template
+    <template #modal-title>
+      <div class="modal-title-with-label">
+        <gl-sprintf
+          :message="
+            s__(
+              'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
+            )
+          "
         >
-      </gl-sprintf>
-    </div>
-
+          <template #labelTitle>
+            <span
+              class="label color-label"
+              :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
+            >
+              {{ labelTitle }}
+            </span>
+          </template>
+          <template #span="{ content }"
+            ><span>{{ content }}</span></template
+          >
+        </gl-sprintf>
+      </div>
+    </template>
     {{ text }}
   </gl-modal>
 </template>

app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue

@@ -81,11 +81,13 @@ export default {
       :invalid-feedback="urlError"
     >
       <gl-form-input id="video-modal-url-input" ref="urlInput" v-model="url" />
-      <gl-sprintf slot="description" :message="description" class="text-gl-muted">
-        <template #id>
-          <strong>{{ __('0t1DgySidms') }}</strong>
-        </template>
-      </gl-sprintf>
+      <template #description>
+        <gl-sprintf :message="description" class="text-gl-muted">
+          <template #id>
+            <strong>{{ __('0t1DgySidms') }}</strong>
+          </template>
+        </gl-sprintf>
+      </template>
     </gl-form-group>
   </gl-modal>
 </template>

app/assets/javascripts/terraform/components/terraform_list.vue

@@ -98,7 +98,7 @@ export default {
   <section>
     <gl-tabs>
       <gl-tab>
-        <template slot="title">
+        <template #title>
           <p class="gl-m-0">
             {{ s__('Terraform|States') }}
             <gl-badge v-if="statesCount">{{ statesCount }}</gl-badge>

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -629,11 +629,9 @@ export default {
               input-id="squash-message-edit"
               squash
             >
-              <commit-message-dropdown
-                slot="header"
-                v-model="squashCommitMessage"
-                :commits="commits"
-              />
+              <template #header>
+                <commit-message-dropdown v-model="squashCommitMessage" :commits="commits" />
+              </template>
             </commit-edit>
             <commit-edit
               v-if="shouldShowMergeEdit"
@@ -641,14 +639,16 @@ export default {
               :label="__('Merge commit message')"
               input-id="merge-message-edit"
             >
-              <label slot="checkbox">
-                <input
-                  id="include-description"
-                  type="checkbox"
-                  @change="updateMergeCommitMessage($event.target.checked)"
-                />
-                {{ __('Include merge request description') }}
-              </label>
+              <template #checkbox>
+                <label>
+                  <input
+                    id="include-description"
+                    type="checkbox"
+                    @change="updateMergeCommitMessage($event.target.checked)"
+                  />
+                  {{ __('Include merge request description') }}
+                </label>
+              </template>
             </commit-edit>
           </ul>
         </commits-header>

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

@@ -68,7 +68,7 @@ export default {
     split
     @click="handleClick(selectedAction, $event)"
   >
-    <template slot="button-content">
+    <template #button-content>
       <span class="gl-new-dropdown-button-text" v-bind="selectedAction.attrs">
         {{ selectedAction.text }}
       </span>

app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue

@@ -28,18 +28,23 @@ export default {
       <slot></slot>
     </p>
     <resizable-chart-container>
-      <gl-area-chart
-        slot-scope="{ width }"
-        v-bind="$attrs"
-        :width="width"
-        :height="$options.chartContainerHeight"
-        :data="chartData"
-        :include-legend-avg-max="false"
-        :option="areaChartOptions"
-      >
-        <slot slot="tooltip-title" name="tooltip-title"></slot>
-        <slot slot="tooltip-content" name="tooltip-content"></slot>
-      </gl-area-chart>
+      <template #default="{ width }">
+        <gl-area-chart
+          v-bind="$attrs"
+          :width="width"
+          :height="$options.chartContainerHeight"
+          :data="chartData"
+          :include-legend-avg-max="false"
+          :option="areaChartOptions"
+        >
+          <template #tooltip-title>
+            <slot name="tooltip-title"></slot>
+          </template>
+          <template #tooltip-content>
+            <slot name="tooltip-content"></slot>
+          </template>
+        </gl-area-chart>
+      </template>
     </resizable-chart-container>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue

@@ -46,9 +46,12 @@ export default {
       :area-chart-options="chartOptions"
     >
       {{ dateRange }}
-
-      <slot slot="tooltip-title" name="tooltip-title"></slot>
-      <slot slot="tooltip-content" name="tooltip-content"></slot>
+      <template #tooltip-title>
+        <slot name="tooltip-title"></slot>
+      </template>
+      <template #tooltip-content>
+        <slot name="tooltip-content"></slot>
+      </template>
     </ci-cd-analytics-area-chart>
   </div>
 </template>

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

@@ -7,7 +7,7 @@ import { __ } from '~/locale';
  *
  * @example
  * <expand-button>
- *   <template slot="expanded">
+ *   <template #expanded>
  *      Text goes here.
  *    </template>
  * </expand-button>

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

@@ -74,6 +74,8 @@ export default {
     @hidden="syncHide"
   >
     <slot></slot>
-    <slot slot="modal-footer" name="modal-footer" :ok="ok" :cancel="cancel"></slot>
+    <template #modal-footer>
+      <slot name="modal-footer" :ok="ok" :cancel="cancel"></slot>
+    </template>
   </gl-modal>
 </template>

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -111,7 +111,7 @@ export default {
       <div class="note-header">
         <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
           <span v-safe-html="actionTextHtml"></span>
-          <template v-if="canSeeDescriptionVersion" slot="extra-controls">
+          <template v-if="canSeeDescriptionVersion" #extra-controls>
             &middot;
             <gl-button
               variant="link"

ee/app/assets/javascripts/analytics/shared/components/scatterplot.vue

@@ -89,10 +89,14 @@ export default {
     :x-axis-title="xAxisTitle"
     :format-tooltip-text="renderTooltip"
   >
-    <div slot="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
-    <div slot="tooltip-content" class="d-flex">
-      <div class="flex-grow-1">{{ yAxisTitle }}:&nbsp;</div>
-      <div class="font-weight-bold">{{ tooltipContent }}</div>
-    </div>
+    <template #tooltip-title>
+      <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+    </template>
+    <template #tooltip-content>
+      <div class="d-flex">
+        <div class="flex-grow-1">{{ yAxisTitle }}:&nbsp;</div>
+        <div class="font-weight-bold">{{ tooltipContent }}</div>
+      </div>
+    </template>
   </gl-discrete-scatter-chart>
 </template>

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

@@ -115,35 +115,43 @@ export default {
     <gl-accordion :header-level="3">
       <gl-accordion-item :title="accordionTitle">
         <app>
-          <mr-rules slot="rules" />
-          <div slot="footer">
-            <mr-rules-hidden-inputs />
-            <div
-              v-if="canUpdateApprovers && showCodeOwnerTip"
-              class="form-text text-muted"
-              data-testid="codeowners-tip"
-            >
-              <gl-sprintf
-                :message="
-                  __(
-                    'Tip: add a %{linkStart}CODEOWNERS%{linkEnd} to automatically add approvers based on file paths and file types.',
-                  )
-                "
+          <template #rules>
+            <mr-rules />
+          </template>
+          <template #footer>
+            <div>
+              <mr-rules-hidden-inputs />
+              <div
+                v-if="canUpdateApprovers && showCodeOwnerTip"
+                class="form-text text-muted"
+                data-testid="codeowners-tip"
               >
-                <template #link="{ content }">
-                  <gl-link :href="$options.codeOwnerHelpPage" target="_blank">{{
-                    content
-                  }}</gl-link>
-                </template>
-              </gl-sprintf>
+                <gl-sprintf
+                  :message="
+                    __(
+                      'Tip: add a %{linkStart}CODEOWNERS%{linkEnd} to automatically add approvers based on file paths and file types.',
+                    )
+                  "
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="$options.codeOwnerHelpPage" target="_blank">{{
+                      content
+                    }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </div>
             </div>
-          </div>
+          </template>
         </app>
       </gl-accordion-item>
     </gl-accordion>
   </div>
   <app v-else>
-    <mr-rules slot="rules" />
-    <mr-rules-hidden-inputs slot="footer" />
+    <template #rules>
+      <mr-rules />
+    </template>
+    <template #footer>
+      <mr-rules-hidden-inputs />
+    </template>
   </app>
 </template>

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

@@ -11,5 +11,9 @@ export default {
 </script>
 
 <template>
-  <app :is-mr-edit="false"><project-rules slot="rules" /></app>
+  <app :is-mr-edit="false">
+    <template #rules>
+      <project-rules />
+    </template>
+  </app>
 </template>

ee/app/assets/javascripts/burndown_chart/components/burn_charts.vue

@@ -338,12 +338,9 @@ export default {
         :namespace-type="namespaceType"
         :display-value="displayValue"
       >
-        <timebox-summary-cards
-          slot-scope="{ columns: openColumns, loading: summaryLoading, total }"
-          :columns="openColumns"
-          :loading="summaryLoading"
-          :total="total"
-        />
+        <template #default="{ columns: openColumns, loading: summaryLoading, total }">
+          <timebox-summary-cards :columns="openColumns" :loading="summaryLoading" :total="total" />
+        </template>
       </open-timebox-summary>
     </template>
     <div class="row">

ee/app/assets/javascripts/burndown_chart/components/burndown_chart.vue

@@ -149,8 +149,8 @@ export default {
       :include-legend-avg-max="false"
       @created="setChart"
     >
-      <template slot="tooltip-title">{{ tooltip.title }}</template>
-      <template slot="tooltip-content">{{ tooltip.content }}</template>
+      <template #tooltip-title>{{ tooltip.title }}</template>
+      <template #tooltip-content>{{ tooltip.content }}</template>
     </gl-line-chart>
   </div>
 </template>

ee/app/assets/javascripts/burndown_chart/components/burnup_chart.vue

@@ -138,8 +138,8 @@ export default {
       :include-legend-avg-max="false"
       @created="setChart"
     >
-      <template slot="tooltip-title">{{ tooltip.title }}</template>
-      <template slot="tooltip-content">
+      <template #tooltip-title>{{ tooltip.title }}</template>
+      <template #tooltip-content>
         <div>{{ tooltip.total }}</div>
         <div>{{ tooltip.completed }}</div>
       </template>

ee/app/assets/javascripts/clusters/agents/components/show.vue

@@ -129,7 +129,7 @@ export default {
 
       <gl-tabs>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span data-testid="cluster-agent-token-count">
               {{ $options.i18n.tokens }}
 

ee/app/assets/javascripts/clusters/components/environments.vue

@@ -81,19 +81,21 @@ export default {
       :primary-button-link="clustersHelpPath"
       :primary-button-text="__('Learn more about deploying to a cluster')"
     >
-      <div slot="description">
-        <gl-sprintf
-          :message="
-            __(
-              'Ensure your %{linkStart}environment is part of the deploy stage%{linkEnd} of your CI pipeline to track deployments to your cluster.',
-            )
-          "
-        >
-          <template #link="{ content }">
-            <gl-link :href="environmentsHelpPath">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </div>
+      <template #description>
+        <div>
+          <gl-sprintf
+            :message="
+              __(
+                'Ensure your %{linkStart}environment is part of the deploy stage%{linkEnd} of your CI pipeline to track deployments to your cluster.',
+              )
+            "
+          >
+            <template #link="{ content }">
+              <gl-link :href="environmentsHelpPath">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </div>
+      </template>
     </gl-empty-state>
 
     <gl-table

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue

@@ -173,19 +173,21 @@ export default {
         :active-slot-names="[visibleForm]"
         class="gl-p-5 gl-pb-0"
       >
-        <h6 v-for="slot in formSlots" :key="slot.name" :slot="slot.name">
-          {{ slot.value }}
-          <gl-icon
-            v-gl-tooltip.hover
-            name="question-o"
-            class="gl-text-gray-500"
-            :title="
-              __(
-                'The parent epic is confidential and can only contain confidential epics and issues',
-              )
-            "
-          />
-        </h6>
+        <template v-for="slot in formSlots" #[slot.name]>
+          <h6 :key="slot.name">
+            {{ slot.value }}
+            <gl-icon
+              v-gl-tooltip.hover
+              name="question-o"
+              class="gl-text-gray-500"
+              :title="
+                __(
+                  'The parent epic is confidential and can only contain confidential epics and issues',
+                )
+              "
+            />
+          </h6>
+        </template>
       </slot-switch>
       <slot-switch
         v-if="visibleForm"
@@ -196,35 +198,38 @@ export default {
           'gl-show-field-errors': itemAddFailure,
         }"
       >
-        <add-item-form
-          :slot="$options.FORM_SLOTS.addItem"
-          :issuable-type="issuableType"
-          :input-value="itemInputValue"
-          :is-submitting="itemAddInProgress"
-          :pending-references="pendingReferences"
-          :auto-complete-sources="itemAutoCompleteSources"
-          :path-id-separator="itemPathIdSeparator"
-          :has-error="itemAddFailure"
-          :item-add-failure-type="itemAddFailureType"
-          :item-add-failure-message="itemAddFailureMessage"
-          :confidential="parentItem.confidential"
-          @pendingIssuableRemoveRequest="handlePendingItemRemove"
-          @addIssuableFormInput="handleAddItemFormInput"
-          @addIssuableFormBlur="handleAddItemFormBlur"
-          @addIssuableFormSubmit="handleAddItemFormSubmit"
-          @addIssuableFormCancel="handleAddItemFormCancel"
-        />
-        <create-epic-form
-          :slot="$options.FORM_SLOTS.createEpic"
-          :is-submitting="itemCreateInProgress"
-          @createEpicFormSubmit="handleCreateEpicFormSubmit"
-          @createEpicFormCancel="handleCreateEpicFormCancel"
-        />
-        <create-issue-form
-          :slot="$options.FORM_SLOTS.createIssue"
-          @cancel="toggleCreateIssueForm({ toggleState: false })"
-          @submit="createNewIssue"
-        />
+        <template #[$options.FORM_SLOTS.addItem]>
+          <add-item-form
+            :issuable-type="issuableType"
+            :input-value="itemInputValue"
+            :is-submitting="itemAddInProgress"
+            :pending-references="pendingReferences"
+            :auto-complete-sources="itemAutoCompleteSources"
+            :path-id-separator="itemPathIdSeparator"
+            :has-error="itemAddFailure"
+            :item-add-failure-type="itemAddFailureType"
+            :item-add-failure-message="itemAddFailureMessage"
+            :confidential="parentItem.confidential"
+            @pendingIssuableRemoveRequest="handlePendingItemRemove"
+            @addIssuableFormInput="handleAddItemFormInput"
+            @addIssuableFormBlur="handleAddItemFormBlur"
+            @addIssuableFormSubmit="handleAddItemFormSubmit"
+            @addIssuableFormCancel="handleAddItemFormCancel"
+          />
+        </template>
+        <template #[$options.FORM_SLOTS.createEpic]>
+          <create-epic-form
+            :is-submitting="itemCreateInProgress"
+            @createEpicFormSubmit="handleCreateEpicFormSubmit"
+            @createEpicFormCancel="handleCreateEpicFormCancel"
+          />
+        </template>
+        <template #[$options.FORM_SLOTS.createIssue]>
+          <create-issue-form
+            @cancel="toggleCreateIssueForm({ toggleState: false })"
+            @submit="createNewIssue"
+          />
+        </template>
       </slot-switch>
       <related-items-tree-body
         v-if="!itemsFetchResultEmpty"

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue

@@ -83,9 +83,9 @@ export default {
       </div>
     </form>
 
-    <template slot="modal-cancel">{{ s__('Cancel') }}</template>
+    <template #modal-cancel>{{ s__('Cancel') }}</template>
 
-    <template slot="modal-ok">
+    <template #modal-ok>
       <gl-loading-icon v-if="isApproving" inline />
       {{ s__('Approve') }}
     </template>

ee/app/assets/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app.vue

@@ -92,25 +92,27 @@ export default {
     class="mr-widget-border-top grouped-security-reports mr-report"
     @toggleEvent="handleToggleEvent"
   >
-    <div slot="body" class="mr-widget-grouped-section report-block">
-      <smart-virtual-list
-        :length="metrics.length"
-        :remain="$options.maxShownReportItems"
-        :size="$options.typicalReportItemHeight"
-        class="report-block-container"
-        wtag="ul"
-        wclass="report-block-list"
-      >
-        <report-item
-          v-for="(metric, index) in metrics"
-          :key="index"
-          :issue="metric"
-          status="none"
-          :status-icon-size="24"
-          :component="$options.componentNames.MetricsReportsIssueBody"
-          class="gl-ml-2 gl-mt-2 gl-mb-3"
-        />
-      </smart-virtual-list>
-    </div>
+    <template #body>
+      <div class="mr-widget-grouped-section report-block">
+        <smart-virtual-list
+          :length="metrics.length"
+          :remain="$options.maxShownReportItems"
+          :size="$options.typicalReportItemHeight"
+          class="report-block-container"
+          wtag="ul"
+          wclass="report-block-list"
+        >
+          <report-item
+            v-for="(metric, index) in metrics"
+            :key="index"
+            :issue="metric"
+            status="none"
+            :status-icon-size="24"
+            :component="$options.componentNames.MetricsReportsIssueBody"
+            class="gl-ml-2 gl-mt-2 gl-mb-3"
+          />
+        </smart-virtual-list>
+      </div>
+    </template>
   </report-section>
 </template>

ee/spec/frontend/approvals/components/license_compliance/modal_spec.js

-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlModal } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import LicenseComplianceModal from 'ee/approvals/components/license_compliance/modal.vue';
@@ -57,6 +57,7 @@ describe('EE Approvals LicenseCompliance Modal', () => {
       stubs: {
         GlModalVuex,
         GlSprintf,
+        GlModal,
         RuleForm: mocks.RuleForm,
       },
     });

ee/spec/frontend/clusters/agents/components/show_spec.js

-import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlTab } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import ClusterAgentShow from 'ee/clusters/agents/components/show.vue';
@@ -44,7 +44,7 @@ describe('ClusterAgentShow', () => {
       localVue,
       apolloProvider,
       propsData,
-      stubs: { GlSprintf, TimeAgoTooltip },
+      stubs: { GlSprintf, TimeAgoTooltip, GlTab },
     });
   };
 
@@ -54,6 +54,7 @@ describe('ClusterAgentShow', () => {
     wrapper = shallowMount(ClusterAgentShow, {
       propsData,
       mocks: { $apollo, clusterAgent },
+      stubs: { GlTab },
     });
   };
 

spec/frontend/batch_comments/components/draft_note_spec.js

 import { getByRole } from '@testing-library/dom';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import { createStore } from '~/batch_comments/stores';
 import NoteableNote from '~/notes/components/noteable_note.vue';
@@ -8,6 +9,14 @@ import { createDraft } from '../mock_data';
 
 const localVue = createLocalVue();
 
+const NoteableNoteStub = stubComponent(NoteableNote, {
+  template: `
+    <div>
+      <slot name="note-header-info">Test</slot>
+    </div>
+  `,
+});
+
 describe('Batch comments draft note component', () => {
   let store;
   let wrapper;
@@ -26,6 +35,9 @@ describe('Batch comments draft note component', () => {
       store,
       propsData,
       localVue,
+      stubs: {
+        NoteableNote: NoteableNoteStub,
+      },
     });
 
     jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation();

spec/frontend/issuable_create/components/issuable_form_spec.js

@@ -23,6 +23,9 @@ const createComponent = ({
         <button class="js-issuable-save">Submit issuable</button>
       `,
     },
+    stubs: {
+      MarkdownField,
+    },
   });
 };
 

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -51,6 +51,8 @@ describe('Time series component', () => {
       },
       stubs: {
         GlPopover: true,
+        GlLineChart,
+        GlAreaChart,
       },
       attachTo: document.body,
     });
@@ -202,7 +204,7 @@ describe('Time series component', () => {
 
           describe('when series is of line type', () => {
             beforeEach(() => {
-              createWrapper();
+              createWrapper({}, mount);
               wrapper.vm.formatTooltipText(mockLineSeriesData());
               return wrapper.vm.$nextTick();
             });

spec/frontend/monitoring/components/dashboard_actions_menu_spec.js

-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -43,6 +43,9 @@ describe('Actions menu', () => {
     wrapper = shallowMount(ActionsMenu, {
       propsData: { ...dashboardActionsMenuProps, ...props },
       store,
+      stubs: {
+        GlModal,
+      },
       ...options,
     });
   };
@@ -82,7 +85,7 @@ describe('Actions menu', () => {
 
       it('modal for custom metrics form is rendered', () => {
         expect(findAddMetricModal().exists()).toBe(true);
-        expect(findAddMetricModal().attributes().modalid).toBe('addMetric');
+        expect(findAddMetricModal().props('modalId')).toBe('addMetric');
       });
 
       it('add metric modal submit button exists', () => {

spec/frontend/notes/components/discussion_notes_spec.js

 import { getByRole } from '@testing-library/dom';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import '~/behaviors/markdown/render_gfm';
 import DiscussionNotes from '~/notes/components/discussion_notes.vue';
 import NoteableNote from '~/notes/components/noteable_note.vue';
@@ -23,8 +23,8 @@ describe('DiscussionNotes', () => {
   let wrapper;
 
   const getList = () => getByRole(wrapper.element, 'list');
-  const createComponent = (props) => {
-    wrapper = shallowMount(DiscussionNotes, {
+  const createComponent = (props, mountingMethod = shallowMount) => {
+    wrapper = mountingMethod(DiscussionNotes, {
       store,
       propsData: {
         discussion: discussionMock,
@@ -33,7 +33,11 @@ describe('DiscussionNotes', () => {
         ...props,
       },
       scopedSlots: {
-        footer: '<p slot-scope="{ showReplies }">showReplies:{{showReplies}}</p>',
+        footer: `
+          <template #default="{ showReplies }">
+            <p>showReplies:{{ showReplies }}</p>,
+          </template>
+        `,
       },
       slots: {
         'avatar-badge': '<span class="avatar-badge-slot-content" />',
@@ -112,7 +116,7 @@ describe('DiscussionNotes', () => {
     });
 
     it('passes down avatar-badge slot content', () => {
-      createComponent();
+      createComponent({}, mount);
       expect(wrapper.find('.avatar-badge-slot-content').exists()).toBe(true);
     });
   });

spec/frontend/pages/projects/forks/new/components/fork_form_spec.js

@@ -155,7 +155,7 @@ describe('ForkForm component', () => {
   describe('forks namespaces', () => {
     beforeEach(() => {
       mockGetRequest({ namespaces: MOCK_NAMESPACES_RESPONSE });
-      createComponent();
+      createFullComponent();
     });
 
     it('make GET request from endpoint', async () => {

spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap

@@ -21,11 +21,7 @@ exports[`CiCdAnalyticsAreaChart matches the snapshot 1`] = `
       option="[object Object]"
       thresholds=""
       width="0"
-    >
-      <template />
-       
-      <template />
-    </glareachart-stub>
+    />
   </div>
 </div>
 `;

spec/frontend/terraform/components/terraform_list_spec.js

@@ -47,6 +47,9 @@ describe('TerraformList', () => {
       localVue,
       apolloProvider,
       propsData,
+      stubs: {
+        GlTab,
+      },
     });
   };
 

spec/frontend/vue_mr_widget/components/states/commit_edit_spec.js

@@ -63,7 +63,7 @@ describe('Commits edit component', () => {
     beforeEach(() => {
       createComponent({
         header: `<div class="test-header">${testCommitMessage}</div>`,
-        checkbox: `<label slot="checkbox" class="test-checkbox">${testLabel}</label >`,
+        checkbox: `<label class="test-checkbox">${testLabel}</label >`,
       });
     });
 

spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -70,6 +70,9 @@ const createComponent = (customConfig = {}, mergeRequestWidgetGraphql = false) =
         mergeRequestWidgetGraphql,
       },
     },
+    stubs: {
+      CommitEdit,
+    },
   });
 };
 

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

@@ -121,7 +121,9 @@ describe('ImageDiffViewer', () => {
           :new-size="newSize"
           :old-size="oldSize"
         >
-          <span slot="image-overlay" class="overlay">test</span>
+          <template #image-overlay>
+            <span class="overlay">test</span>
+          </template>
         </image-diff-viewer>
       `),
     }).$mount();

spec/frontend/vue_shared/components/paginated_list_spec.js

@@ -7,9 +7,11 @@ describe('Pagination links component', () => {
   let glPaginatedList;
 
   const template = `
-    <div class="slot" slot-scope="{ listItem }">
-      <span class="item">Item Name: {{listItem.id}}</span>
-    </div>
+    <template #default="{ listItem }">
+      <div class="slot">
+        <span class="item">Item Name: {{ listItem.id }}</span>
+      </div>
+    </template>
   `;
 
   const props = {

spec/frontend/vue_shared/components/resizable_chart/__snapshots__/resizable_chart_container_spec.js.snap

@@ -2,20 +2,22 @@
 
 exports[`Resizable Chart Container renders the component 1`] = `
 <div>
-  <div
-    class="slot"
-  >
-    <span
-      class="width"
+  <template>
+    <div
+      class="slot"
     >
-      0
-    </span>
-     
-    <span
-      class="height"
-    >
-      0
-    </span>
-  </div>
+      <span
+        class="width"
+      >
+        0
+      </span>
+       
+      <span
+        class="height"
+      >
+        0
+      </span>
+    </div>
+  </template>
 </div>
 `;

spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js

@@ -16,10 +16,12 @@ describe('Resizable Chart Container', () => {
     wrapper = mount(ResizableChartContainer, {
       scopedSlots: {
         default: `
-        <div class="slot" slot-scope="{ width, height }">
-          <span class="width">{{width}}</span>
-          <span class="height">{{height}}</span>
-        </div>
+          <template #default="{ width, height }">
+            <div class="slot">
+              <span class="width">{{width}}</span>
+              <span class="height">{{height}}</span>
+            </div>
+          </template>
         `,
       },
     });

vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScroller.vue

@@ -10,7 +10,7 @@
     @visible="onScrollerVisible"
     v-on="listeners"
   >
-    <template slot-scope="{ item: itemWithSize, index, active }">
+    <template #default="{ item: itemWithSize, index, active }">
       <slot
         v-bind="{
           item: itemWithSize.item,
@@ -20,10 +20,10 @@
         }"
       />
     </template>
-    <template slot="before">
+    <template #before>
       <slot name="before" />
     </template>
-    <template slot="after">
+    <template #after>
       <slot name="after" />
     </template>
   </RecycleScroller>