Fix shared component dynamic slot names

- source
- tests

app/assets/javascripts/packages/details/components/package_title.vue

@@ -54,15 +54,15 @@ export default {
       </gl-sprintf>
     </template>
 
-    <template v-if="packageTypeDisplay" #metadata_type>
+    <template v-if="packageTypeDisplay" #metadata-type>
       <metadata-item data-testid="package-type" icon="package" :text="packageTypeDisplay" />
     </template>
 
-    <template #metadata_size>
+    <template #metadata-size>
       <metadata-item data-testid="package-size" icon="disk" :text="totalSize" />
     </template>
 
-    <template v-if="packagePipeline" #metadata_pipeline>
+    <template v-if="packagePipeline" #metadata-pipeline>
       <metadata-item
         data-testid="pipeline-project"
         icon="review-list"
@@ -71,11 +71,11 @@ export default {
       />
     </template>
 
-    <template v-if="packagePipeline" #metadata_ref>
+    <template v-if="packagePipeline" #metadata-ref>
       <metadata-item data-testid="package-ref" icon="branch" :text="packagePipeline.ref" />
     </template>
 
-    <template v-if="hasTagsToDisplay" #metadata_tags>
+    <template v-if="hasTagsToDisplay" #metadata-tags>
       <package-tags :tag-display-limit="2" :tags="packageEntity.tags" hide-label />
     </template>
 

app/assets/javascripts/packages/list/components/package_title.vue

@@ -40,7 +40,7 @@ export default {
 
 <template>
   <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages">
-    <template #metadata_amount>
+    <template #metadata-amount>
       <metadata-item v-if="showPackageCount" icon="package" :text="packageAmountText" />
     </template>
   </title-area>

app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue

@@ -171,7 +171,7 @@ export default {
       />
     </template>
 
-    <template v-if="!invalidTag" #details_published>
+    <template v-if="!invalidTag" #details-published>
       <details-row icon="clock" data-testid="published-date-detail">
         <gl-sprintf :message="$options.i18n.PUBLISHED_DETAILS_ROW_TEXT">
           <template #repositoryPath>
@@ -186,7 +186,7 @@ export default {
         </gl-sprintf>
       </details-row>
     </template>
-    <template v-if="!invalidTag" #details_manifest_digest>
+    <template v-if="!invalidTag" #details-manifest-digest>
       <details-row icon="log" data-testid="manifest-detail">
         <gl-sprintf :message="$options.i18n.MANIFEST_DETAILS_ROW_TEST">
           <template #digest>
@@ -202,7 +202,7 @@ export default {
         />
       </details-row>
     </template>
-    <template v-if="!invalidTag" #details_configuration_digest>
+    <template v-if="!invalidTag" #details-configuration-digest>
       <details-row icon="cloud-gear" data-testid="configuration-detail">
         <gl-sprintf :message="$options.i18n.CONFIGURATION_DETAILS_ROW_TEST">
           <template #digest>

app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue

@@ -96,7 +96,7 @@ export default {
     <template #right-actions>
       <slot name="commands"></slot>
     </template>
-    <template #metadata_count>
+    <template #metadata-count>
       <metadata-item
         v-if="imagesCount"
         data-testid="images-count"
@@ -104,7 +104,7 @@ export default {
         :text="imagesCountText"
       />
     </template>
-    <template #metadata_exp_policies>
+    <template #metadata-exp-policies>
       <metadata-item
         v-if="!hideExpirationPolicyData"
         data-testid="expiration-policy"

app/assets/javascripts/vue_shared/components/registry/list_item.vue

@@ -39,7 +39,7 @@ export default {
     },
   },
   mounted() {
-    this.detailsSlots = Object.keys(this.$slots).filter(k => k.startsWith('details_'));
+    this.detailsSlots = Object.keys(this.$slots).filter(k => k.startsWith('details-'));
   },
   methods: {
     toggleDetails() {

app/assets/javascripts/vue_shared/components/registry/title_area.vue

@@ -31,7 +31,7 @@ export default {
     };
   },
   mounted() {
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith('metadata_'));
+    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith('metadata-'));
   },
 };
 </script>

spec/frontend/vue_shared/components/registry/list_item_spec.js

@@ -58,9 +58,9 @@ describe('list item', () => {
 
   describe.each`
     slotNames
-    ${['details_foo']}
-    ${['details_foo', 'details_bar']}
-    ${['details_foo', 'details_bar', 'details_baz']}
+    ${['details-foo']}
+    ${['details-foo', 'details-bar']}
+    ${['details-foo', 'details-bar', 'details-baz']}
   `('$slotNames details slots', ({ slotNames }) => {
     const slotMocks = slotNames.reduce((acc, current) => {
       acc[current] = `<div data-testid="${current}" />`;
@@ -89,7 +89,7 @@ describe('list item', () => {
 
   describe('details toggle button', () => {
     it('is visible when at least one details slot exists', async () => {
-      mountComponent({}, { details_foo: '<span></span>' });
+      mountComponent({}, { 'details-foo': '<span></span>' });
       await wrapper.vm.$nextTick();
       expect(findToggleDetailsButton().exists()).toBe(true);
     });

spec/frontend/vue_shared/components/registry/title_area_spec.js

@@ -79,9 +79,9 @@ describe('title area', () => {
 
   describe.each`
     slotNames
-    ${['metadata_foo']}
-    ${['metadata_foo', 'metadata_bar']}
-    ${['metadata_foo', 'metadata_bar', 'metadata_baz']}
+    ${['metadata-foo']}
+    ${['metadata-foo', 'metadata-bar']}
+    ${['metadata-foo', 'metadata-bar', 'metadata-baz']}
   `('$slotNames metadata slots', ({ slotNames }) => {
     const slotMocks = slotNames.reduce((acc, current) => {
       acc[current] = `<div data-testid="${current}" />`;