Merge branch '225665-create-shared-components-for-package-and-container-registry' into 'master'

Move registry details_row and history_item to vue_shared/registry

See merge request gitlab-org/gitlab!41563

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

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import DetailsRow from '~/registry/shared/components/details_row.vue';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 import { generateConanRecipe } from '../utils';
 import { PackageType } from '../../shared/constants';
 

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

@@ -2,7 +2,7 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import HistoryElement from './history_element.vue';
+import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
 
 export default {
   name: 'PackageHistory',
@@ -16,7 +16,7 @@ export default {
   components: {
     GlLink,
     GlSprintf,
-    HistoryElement,
+    HistoryItem,
     TimeAgoTooltip,
   },
   props: {
@@ -46,7 +46,7 @@ export default {
   <div class="issuable-discussion">
     <h3 class="gl-font-lg" data-testid="title">{{ __('History') }}</h3>
     <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline">
-      <history-element icon="clock" data-testid="created-on">
+      <history-item icon="clock" data-testid="created-on">
         <gl-sprintf :message="$options.i18n.createdOn">
           <template #name>
             <strong>{{ packageEntity.name }}</strong>
@@ -58,8 +58,8 @@ export default {
             <time-ago-tooltip :time="packageEntity.created_at" />
           </template>
         </gl-sprintf>
-      </history-element>
-      <history-element icon="pencil" data-testid="updated-at">
+      </history-item>
+      <history-item icon="pencil" data-testid="updated-at">
         <gl-sprintf :message="$options.i18n.updatedAtText">
           <template #name>
             <strong>{{ packageEntity.name }}</strong>
@@ -71,9 +71,9 @@ export default {
             <time-ago-tooltip :time="packageEntity.updated_at" />
           </template>
         </gl-sprintf>
-      </history-element>
+      </history-item>
       <template v-if="packagePipeline">
-        <history-element icon="commit" data-testid="commit">
+        <history-item icon="commit" data-testid="commit">
           <gl-sprintf :message="$options.i18n.commitText">
             <template #link>
               <gl-link :href="packagePipeline.project.commit_url">{{
@@ -84,8 +84,8 @@ export default {
               <strong>{{ packagePipeline.ref }}</strong>
             </template>
           </gl-sprintf>
-        </history-element>
-        <history-element icon="pipeline" data-testid="pipeline">
+        </history-item>
+        <history-item icon="pipeline" data-testid="pipeline">
           <gl-sprintf :message="$options.i18n.pipelineText">
             <template #link>
               <gl-link :href="packagePipeline.project.pipeline_url"
@@ -97,9 +97,9 @@ export default {
             </template>
             <template #author>{{ packagePipeline.user.name }}</template>
           </gl-sprintf>
-        </history-element>
+        </history-item>
       </template>
-      <history-element icon="package" data-testid="published">
+      <history-item icon="package" data-testid="published">
         <gl-sprintf :message="$options.i18n.publishText">
           <template #project>
             <strong>{{ projectName }}</strong>
@@ -108,7 +108,7 @@ export default {
             <time-ago-tooltip :time="packageEntity.created_at" />
           </template>
         </gl-sprintf>
-      </history-element>
+      </history-item>
     </ul>
   </div>
 </template>

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

@@ -7,7 +7,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import DeleteButton from '../delete_button.vue';
-import DetailsRow from '~/registry/shared/components/details_row.vue';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 import {
   REMOVE_TAG_BUTTON_TITLE,
   DIGEST_LABEL,

app/assets/javascripts/packages/details/components/history_element.vue → app/assets/javascripts/vue_shared/components/registry/history_item.vue

@@ -3,12 +3,11 @@ import { GlIcon } from '@gitlab/ui';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 
 export default {
-  name: 'HistoryElement',
+  name: 'HistoryItem',
   components: {
     GlIcon,
     TimelineEntryItem,
   },
-
   props: {
     icon: {
       type: String,
@@ -29,7 +28,9 @@ export default {
           <slot></slot>
         </span>
       </div>
-      <div class="note-body"></div>
+      <div class="note-body">
+        <slot name="body"></slot>
+      </div>
     </div>
   </timeline-entry-item>
 </template>

spec/frontend/packages/details/components/additional_metadata_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import DetailsRow from '~/registry/shared/components/details_row.vue';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 import component from '~/packages/details/components/additional_metadata.vue';
 
 import { mavenPackage, conanPackage, nugetPackage, npmPackage } from '../../mock_data';

spec/frontend/packages/details/components/package_history_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import HistoryElement from '~/packages/details/components/history_element.vue';
+import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
 import component from '~/packages/details/components/package_history.vue';
 
 import { mavenPackage, mockPipelineInfo } from '../../mock_data';
@@ -17,8 +17,8 @@ describe('Package History', () => {
     wrapper = shallowMount(component, {
       propsData: { ...defaultProps, ...props },
       stubs: {
-        HistoryElement: {
-          props: HistoryElement.props,
+        HistoryItem: {
+          props: HistoryItem.props,
           template: '<div data-testid="history-element"><slot></slot></div>',
         },
         GlSprintf,

spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js

@@ -6,7 +6,7 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import component from '~/registry/explorer/components/details_page/tags_list_row.vue';
 import DeleteButton from '~/registry/explorer/components/delete_button.vue';
-import DetailsRow from '~/registry/shared/components/details_row.vue';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 import {
   REMOVE_TAG_BUTTON_TITLE,
   REMOVE_TAG_BUTTON_DISABLE_TOOLTIP,

spec/frontend/packages/details/components/__snapshots__/history_element_spec.js.snap → spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`History Element renders the correct markup 1`] = `
+exports[`History Item renders the correct markup 1`] = `
 <li
   class="timeline-entry system-note note-wrapper gl-mb-6!"
 >
@@ -31,8 +31,12 @@ exports[`History Element renders the correct markup 1`] = `
        
       <div
         class="note-body"
+      >
+        <div
+          data-testid="body-slot"
         />
       </div>
     </div>
+  </div>
 </li>
 `;

spec/frontend/registry/shared/components/details_row_spec.js → spec/frontend/vue_shared/components/registry/details_row_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
-import component from '~/registry/shared/components/details_row.vue';
+import component from '~/vue_shared/components/registry/details_row.vue';
 
 describe('DetailsRow', () => {
   let wrapper;

spec/frontend/packages/details/components/history_element_spec.js → spec/frontend/vue_shared/components/registry/history_item_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
-import component from '~/packages/details/components/history_element.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import component from '~/vue_shared/components/registry/history_item.vue';
 
-describe('History Element', () => {
+describe('History Item', () => {
   let wrapper;
   const defaultProps = {
     icon: 'pencil',
@@ -17,6 +17,7 @@ describe('History Element', () => {
       },
       slots: {
         default: '<div data-testid="default-slot"></div>',
+        body: '<div data-testid="body-slot"></div>',
       },
     });
   };
@@ -29,6 +30,7 @@ describe('History Element', () => {
   const findTimelineEntry = () => wrapper.find(TimelineEntryItem);
   const findGlIcon = () => wrapper.find(GlIcon);
   const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]');
+  const findBodySlot = () => wrapper.find('[data-testid="body-slot"]');
 
   it('renders the correct markup', () => {
     mountComponent();
@@ -41,11 +43,19 @@ describe('History Element', () => {
 
     expect(findDefaultSlot().exists()).toBe(true);
   });
+
+  it('has a body slot', () => {
+    mountComponent();
+
+    expect(findBodySlot().exists()).toBe(true);
+  });
+
   it('has a timeline entry', () => {
     mountComponent();
 
     expect(findTimelineEntry().exists()).toBe(true);
   });
+
   it('has an icon', () => {
     mountComponent();