Updates slots syntax in DynamicScroller

Fixed contributors slot syntax

Fixed slot syntax in ci cd analytics

Fixed slot scope in charts and discussion

Fixed slot syntax in paginated list spec

Fixed slot syntax in resizeable chart spec

Fixed slot syntax in note and issuable form

Fixed members and milestones slot syntax

Fixed slots in discussion-notes

Fixes slot syntax in time series

Noteables slots fixes

Terraform slots syntax fixed

Fixed time series

Fixed slots in analytics

Added modal stub

Fixed rules slot

Fixed burnup and burndown chart

Fixed cluster agents slots

Added eslint config

Fixed related items tree

Fixed slots in grouped metrics

Fixed slots in unit tests

Fixed ready to merge spec

Fixed ci_cd_anaytics spec

Fixed terraform list spec

Added stubbed GlTab to cluster agent spec

Stubbed NoteableNote in specs

Stubbed GlModal in dashboard actions test

Fixed issuable form spec

Fixed discussion notes spec

Fixed time series spec

Fixed fork_form spec

Updated snapshot for analytics

Fixed commit edit spec

.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>