Update slot usages in the code base

We forced all slot names to be kebas-cased.

In order to reflect that we also need to update

all slot names across the code base.

app/assets/javascripts/blob/components/blob_header.vue

@@ -66,7 +66,7 @@ export default {
 <template>
   <div class="js-file-title file-title-flex-parent">
     <blob-filepath :blob="blob">
-      <template #filepathPrepend>
+      <template #filepath-prepend>
         <slot name="prepend"></slot>
       </template>
     </blob-filepath>

app/assets/javascripts/clusters/components/applications.vue

@@ -549,8 +549,8 @@ export default {
             @set="setKnativeDomain"
           />
         </template>
-        <template v-if="cloudRun" #installedVia>
-          <span data-testid="installedVia">
+        <template v-if="cloudRun" #installed-via>
+          <span data-testid="installed-via">
             <gl-sprintf
               :message="s__('ClusterIntegration|installed via %{linkStart}Cloud Run%{linkEnd}')"
             >

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -210,7 +210,7 @@ export default {
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @error="$emit('update-note-error', $event)"
       >
-        <template v-if="discussion.resolvable" #resolveDiscussion>
+        <template v-if="discussion.resolvable" #resolve-discussion>
           <button
             v-gl-tooltip
             :class="{ 'is-active': discussion.resolved }"
@@ -224,7 +224,7 @@ export default {
             <gl-loading-icon v-else inline />
           </button>
         </template>
-        <template v-if="discussion.resolved" #resolvedStatus>
+        <template v-if="discussion.resolved" #resolved-status>
           <p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">
             {{ __('Resolved by') }}
             <gl-link
@@ -277,7 +277,7 @@ export default {
             @submit-form="mutate"
             @cancel-form="hideForm"
           >
-            <template v-if="discussion.resolvable" #resolveCheckbox>
+            <template v-if="discussion.resolvable" #resolve-checkbox>
               <label data-testid="resolve-checkbox">
                 <input v-model="shouldChangeResolvedStatus" type="checkbox" />
                 {{ resolveCheckboxText }}

app/assets/javascripts/design_management/pages/design/index.vue

@@ -383,7 +383,7 @@ export default {
         @toggleResolvedComments="toggleResolvedComments"
         @todoError="onTodoError"
       >
-        <template #replyForm>
+        <template #reply-form>
           <apollo-mutation
             v-if="isAnnotating"
             #default="{ mutate, loading }"

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

@@ -228,7 +228,7 @@ export default {
         :deploy-boards-help-path="deployBoardsHelpPath"
         @onChangePage="onChangePage"
       >
-        <template v-if="!isLoading && state.environments.length === 0" #emptyState>
+        <template v-if="!isLoading && state.environments.length === 0" #empty-state>
           <empty-state :help-path="helpPagePath" />
         </template>
       </container>

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -419,7 +419,7 @@ export default {
           </template>
         </gl-table>
       </template>
-      <template #emtpy-state>
+      <template #empty-state>
         <gl-empty-state
           :title="emptyStateData.title"
           :svg-path="emptyListSvgPath"

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

@@ -423,7 +423,7 @@ export default {
         :prometheus-alerts-available="prometheusAlertsAvailable"
         @timerangezoom="onTimeRangeZoom"
       >
-        <template #topLeft>
+        <template #top-left>
           <gl-button
             ref="goBackBtn"
             v-gl-tooltip

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

@@ -134,7 +134,7 @@ export default {
     class="mr-widget-section grouped-security-reports mr-report"
     @toggleEvent="handleToggleEvent"
   >
-    <template v-if="showViewFullReport" #actionButtons>
+    <template v-if="showViewFullReport" #action-buttons>
       <gl-button
         :href="testTabURL"
         target="_blank"
@@ -145,7 +145,7 @@ export default {
         {{ s__('ciReport|View full report') }}
       </gl-button>
     </template>
-    <template v-if="hasRecentFailures(summary)" #subHeading>
+    <template v-if="hasRecentFailures(summary)" #sub-heading>
       {{ recentFailuresText(summary) }}
     </template>
     <template #body>

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

@@ -308,6 +308,6 @@ export default {
       @input="handlePageChange"
     />
 
-    <slot v-if="!showItems" name="emtpy-state"></slot>
+    <slot v-if="!showItems" name="empty-state"></slot>
   </div>
 </template>

ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue

@@ -147,7 +147,7 @@ export default {
         </gl-link>
       </template>
 
-      <template #subheading>
+      <template #sub-heading>
         {{ $options.i18n.analyzersSubHeading }}
       </template>
 

ee/app/assets/javascripts/security_configuration/sast/components/expandable_section.vue

@@ -39,8 +39,8 @@ export default {
         <component :is="headingTag" class="gl-font-size-h2 gl-mt-0" data-testid="heading">
           <slot name="heading"></slot>
         </component>
-        <p class="gl-mb-0" data-testid="subheading">
-          <slot name="subheading"></slot>
+        <p class="gl-mb-0" data-testid="sub-heading">
+          <slot name="sub-heading"></slot>
         </p>
       </div>
 

ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_severities.vue

@@ -186,7 +186,7 @@ export default {
               </span>
             </h5>
           </template>
-          <template #subTitle>
+          <template #sub-title>
             <p class="gl-m-0 gl-ml-7 gl-pb-2 gl-text-gray-500">{{ severityGroup.warning }}</p>
           </template>
           <div class="gl-ml-7 gl-pb-3">

ee/app/assets/javascripts/security_dashboard/components/pipeline_security_dashboard.vue

@@ -118,7 +118,7 @@ export default {
       :loading-error-illustrations="loadingErrorIllustrations"
       :security-report-summary="securityReportSummary"
     >
-      <template #emptyState>
+      <template #empty-state>
         <gl-empty-state v-bind="emptyStateProps" />
       </template>
     </security-dashboard>

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue

@@ -129,7 +129,7 @@ export default {
         </template>
 
         <security-dashboard-table>
-          <template #emptyState>
+          <template #empty-state>
             <slot name="empty-state"></slot>
           </template>
         </security-dashboard-table>

ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue

@@ -179,7 +179,7 @@ export default {
           </gl-link>
         </div>
       </template>
-      <div v-if="showActionButtons" slot="actionButtons" class="gl-mr-3">
+      <div v-if="showActionButtons" slot="action-buttons" class="gl-mr-3">
         <a
           v-if="licenseManagementSettingsPath"
           :class="{ 'gl-mr-3': fullReportPath }"

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -401,7 +401,7 @@ export default {
       <security-summary :key="slot" :message="groupedSummaryText" />
     </template>
 
-    <template v-if="pipelinePath" #actionButtons>
+    <template v-if="pipelinePath" #action-buttons>
       <gl-button
         :href="securityTab"
         target="_blank"
@@ -412,7 +412,7 @@ export default {
       </gl-button>
     </template>
 
-    <template v-if="isMRActive && isBaseSecurityReportOutOfDate" #subHeading>
+    <template v-if="isMRActive && isBaseSecurityReportOutOfDate" #sub-heading>
       <div class="text-secondary-700 text-1">
         <gl-sprintf
           v-if="isMRBranchOutdated"

ee/app/assets/javascripts/vulnerabilities/components/related_issues.vue

@@ -264,7 +264,7 @@ export default {
       <template #headerText>
         {{ $options.i18n.relatedIssues }}
       </template>
-      <template v-if="canCreateIssue" #headerActions>
+      <template v-if="canCreateIssue" #header-actions>
         <gl-button
           ref="createIssue"
           variant="success"

ee/spec/frontend/security_configuration/sast/components/expandable_section_spec.js

@@ -10,7 +10,7 @@ describe('ExpandableSection component', () => {
 
   const findButton = () => wrapper.find('button');
   const findHeading = () => wrapper.find('[data-testid="heading"]');
-  const findSubHeading = () => wrapper.find('[data-testid="subheading"]');
+  const findSubHeading = () => wrapper.find('[data-testid="sub-heading"]');
   const findContent = () => wrapper.find('[data-testid="content"]');
 
   afterEach(() => {
@@ -50,7 +50,7 @@ describe('ExpandableSection component', () => {
   describe('subheading slot', () => {
     beforeEach(() => {
       createComponent({
-        slots: { subheading: 'some subheading' },
+        slots: { 'sub-heading': 'some subheading' },
       });
     });
 

ee/spec/frontend/security_dashboard/components/pipeline_security_dashboard_spec.js

@@ -98,7 +98,7 @@ describe('Pipeline Security Dashboard component', () => {
     beforeEach(() => {
       factory({
         stubs: {
-          'security-dashboard': { template: '<div><slot name="emptyState"></slot></div>' },
+          'security-dashboard': { template: '<div><slot name="empty-state"></slot></div>' },
         },
       });
     });

ee/spec/frontend/security_dashboard/components/security_dashboard_table_spec.js

@@ -118,7 +118,7 @@ describe('Security Dashboard Table', () => {
         localVue,
         store,
         slots: {
-          emptyState: '<div class="customEmptyState">Hello World</div>',
+          'empty-state': '<div class="customEmptyState">Hello World</div>',
         },
       });
 

spec/frontend/blob/components/blob_header_filepath_spec.js

@@ -65,7 +65,7 @@ describe('Blob Header Filepath', () => {
         {},
         {
           scopedSlots: {
-            filepathPrepend: `<span>${slotContent}</span>`,
+            'filepath-prepend': `<span>${slotContent}</span>`,
           },
         },
       );

spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap

@@ -73,7 +73,7 @@ exports[`Applications Ingress application shows the correct warning message 1`]
 
 exports[`Applications Knative application shows the correct description 1`] = `
 <span
-  data-testid="installedVia"
+  data-testid="installed-via"
 >
   installed via 
   <a

spec/frontend/clusters/components/applications_spec.js

@@ -429,7 +429,7 @@ describe('Applications', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(findByTestId('installedVia').element).toMatchSnapshot();
+      expect(findByTestId('installed-via').element).toMatchSnapshot();
     });
 
     it('emits saveKnativeDomain event when knative domain editor emits save event', () => {

spec/frontend/issuable/related_issues/components/related_issues_block_spec.js

@@ -56,7 +56,7 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
-        slots: { headerText },
+        slots: { 'header-text': headerText },
       });
 
       expect(wrapper.find('.card-title').html()).toContain(headerText);
@@ -72,7 +72,7 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
-        slots: { headerActions },
+        slots: { 'header-actions': headerActions },
       });
 
       expect(wrapper.find('[data-testid="custom-button"]').html()).toBe(headerActions);

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -106,7 +106,7 @@ describe('Dashboard Panel', () => {
         {},
         {
           slots: {
-            topLeft: `<div class="top-left-content">OK</div>`,
+            'top-left': `<div class="top-left-content">OK</div>`,
           },
         },
       );

spec/frontend/monitoring/components/dashboard_spec.js

@@ -508,7 +508,7 @@ describe('Dashboard', () => {
       const mockKeyup = key => window.dispatchEvent(new KeyboardEvent('keyup', { key }));
 
       const MockPanel = {
-        template: `<div><slot name="topLeft"/></div>`,
+        template: `<div><slot name="top-left"/></div>`,
       };
 
       beforeEach(() => {

spec/frontend/reports/components/report_section_spec.js

@@ -244,7 +244,7 @@ describe('Report section', () => {
           hasIssues: true,
         },
         slots: {
-          actionButtons: ['Action!'],
+          'action-buttons': ['Action!'],
         },
       });
     });

spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js

@@ -70,7 +70,7 @@ describe('AlertManagementEmptyState', () => {
         ...props,
       },
       slots: {
-        'emtpy-state': EmptyStateSlot,
+        'empty-state': EmptyStateSlot,
         'header-actions': HeaderActionsSlot,
         title: TitleSlot,
         table: TableSlot,