Convert slot names to kebab-case

Convert slot names in Vue.js templates
to kebab-case to match our coding style.

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

@@ -26,7 +26,7 @@ export default {
 </script>
 <template>
   <div class="file-header-content d-flex align-items-center lh-100">
-    <slot name="filepathPrepend"></slot>
+    <slot name="filepath-prepend"></slot>
 
     <template v-if="blob.path">
       <file-icon :file-name="blob.path" :size="18" aria-hidden="true" css-classes="mr-2" />

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

@@ -343,7 +343,7 @@ export default {
           >
           <span v-else class="js-cluster-application-title">{{ title }}</span>
         </strong>
-        <slot name="installedVia"></slot>
+        <slot name="installed-via"></slot>
         <div>
           <slot name="description"></slot>
         </div>

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

@@ -108,7 +108,7 @@ export default {
         </span>
       </div>
       <div class="gl-display-flex gl-align-items-baseline">
-        <slot name="resolveDiscussion"></slot>
+        <slot name="resolve-discussion"></slot>
         <button
           v-if="isEditButtonVisible"
           v-gl-tooltip
@@ -127,7 +127,7 @@ export default {
         class="note-text js-note-text md"
         data-qa-selector="note_content"
       ></div>
-      <slot name="resolvedStatus"></slot>
+      <slot name="resolved-status"></slot>
     </template>
     <apollo-mutation
       v-else

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

@@ -110,7 +110,7 @@ export default {
         </textarea>
       </template>
     </markdown-field>
-    <slot name="resolveCheckbox"></slot>
+    <slot name="resolve-checkbox"></slot>
     <div class="note-form-actions gl-display-flex gl-justify-content-space-between">
       <gl-button
         ref="submitButton"

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -207,6 +207,6 @@ export default {
         />
       </gl-collapse>
     </template>
-    <slot name="replyForm"></slot>
+    <slot name="reply-form"></slot>
   </div>
 </template>

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

@@ -69,7 +69,7 @@ export default {
   <div class="environments-container">
     <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" />
 
-    <slot name="emptyState"></slot>
+    <slot name="empty-state"></slot>
 
     <div v-if="!isLoading && environments.length > 0" class="table-holder">
       <environment-table

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

@@ -365,7 +365,7 @@ export default {
 <template>
   <div v-gl-resize-observer="onResize" class="prometheus-graph">
     <div class="d-flex align-items-center">
-      <slot name="topLeft"></slot>
+      <slot name="top-left"></slot>
       <h5
         ref="graphTitle"
         class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3"

app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -138,7 +138,7 @@ export default {
             href="#related-issues"
             aria-hidden="true"
           />
-          <slot name="headerText">{{ __('Linked issues') }}</slot>
+          <slot name="header-text">{{ __('Linked issues') }}</slot>
           <gl-link
             v-if="hasHelpPath"
             :href="helpPath"
@@ -167,7 +167,7 @@ export default {
             />
           </div>
         </h3>
-        <slot name="headerActions"></slot>
+        <slot name="header-actions"></slot>
       </div>
       <div
         class="linked-issues-card-body bg-gray-light"

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

@@ -181,10 +181,10 @@ export default {
             <slot :name="slotName"></slot>
             <popover v-if="hasPopover" :options="popoverOptions" class="gl-ml-2" />
           </div>
-          <slot name="subHeading"></slot>
+          <slot name="sub-heading"></slot>
         </div>
 
-        <slot name="actionButtons"></slot>
+        <slot name="action-buttons"></slot>
 
         <button
           v-if="isCollapsible"

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

@@ -147,7 +147,7 @@ export default {
         class="card upload-dropzone-border upload-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       >
         <div v-show="!isDragDataValid" class="mw-50 gl-text-center">
-          <slot name="invalidDragDataSlot">
+          <slot name="invalid-drag-data-slot">
             <h3 :class="{ 'gl-font-base gl-display-inline': !displayAsCard }">
               {{ __('Oh no!') }}
             </h3>
@@ -159,7 +159,7 @@ export default {
           </slot>
         </div>
         <div v-show="isDragDataValid" class="mw-50 gl-text-center">
-          <slot name="validDragDataSlot">
+          <slot name="valid-drag-data-slot">
             <h3 :class="{ 'gl-font-base gl-display-inline': !displayAsCard }">
               {{ __('Incoming!') }}
             </h3>

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

@@ -110,7 +110,7 @@ export default {
         @openModal="openModal({ vulnerability })"
       />
 
-      <slot v-if="showEmptyState" name="emptyState">
+      <slot v-if="showEmptyState" name="empty-state">
         <gl-empty-state
           :title="s__(`We've found no vulnerabilities`)"
           :description="

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

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

ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue

@@ -233,7 +233,7 @@ export default {
       </template>
 
       <template #empty>
-        <slot name="emptyState">
+        <slot name="empty-state">
           <gl-empty-state
             ref="tableEmptyState"
             :title="s__('NetworkPolicies|No policies detected')"

ee/app/assets/javascripts/vue_shared/components/accordion/accordion_item.vue

@@ -120,7 +120,7 @@ export default {
         :aria-labelledby="buttonId"
         role="region"
       >
-        <slot name="subTitle"></slot>
+        <slot name="sub-title"></slot>
         <div ref="content" :style="contentStyles"><slot name="default"></slot></div>
       </div>
     </template>