Update details header to show new metadata

- details_header
- tests
- details page bindings
- details page tests
- mock_data

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

 <script>
 import { GlSprintf } from '@gitlab/ui';
+import { sprintf } from '~/locale';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
-import { DETAILS_PAGE_TITLE } from '../../constants/index';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { DETAILS_PAGE_TITLE, UPDATED_AT } from '../../constants/index';
 
 export default {
-  components: { GlSprintf, TitleArea },
+  components: { GlSprintf, TitleArea, MetadataItem },
+  mixins: [timeagoMixin],
   props: {
-    imageName: {
-      type: String,
-      required: false,
-      default: '',
+    image: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    visibilityIcon() {
+      return this.image?.project?.visibility === 'public' ? 'eye' : 'eye-slash';
+    },
+    timeAgo() {
+      return this.timeFormatted(this.image.updatedAt);
+    },
+    updatedText() {
+      return sprintf(UPDATED_AT, { time: this.timeAgo });
     },
   },
   i18n: {
@@ -23,9 +37,17 @@ export default {
     <template #title>
       <gl-sprintf :message="$options.i18n.DETAILS_PAGE_TITLE">
         <template #imageName>
-          {{ imageName }}
+          {{ image.name }}
         </template>
       </gl-sprintf>
     </template>
+    <template #metadata-updated>
+      <metadata-item
+        :icon="visibilityIcon"
+        :text="updatedText"
+        size="xl"
+        data-testid="updated-and-visibility"
+      />
+    </template>
   </title-area>
 </template>

app/assets/javascripts/registry/explorer/constants/details.js

@@ -56,6 +56,8 @@ export const MISSING_MANIFEST_WARNING_TOOLTIP = s__(
   'ContainerRegistry|Invalid tag: missing manifest digest',
 );
 
+export const UPDATED_AT = s__('ContainerRegistry|Last updated %{time}');
+
 export const NOT_AVAILABLE_TEXT = __('N/A');
 export const NOT_AVAILABLE_SIZE = __('0 bytes');
 // Parameters

app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.graphql

@@ -15,6 +15,7 @@ query getContainerRepositoryDetails(
     location
     canDelete
     createdAt
+    updatedAt
     tagsCount
     expirationPolicyStartedAt
     tags(after: $after, before: $before, first: $first, last: $last) {
@@ -33,5 +34,8 @@ query getContainerRepositoryDetails(
         ...PageInfo
       }
     }
+    project {
+      visibility
+    }
   }
 }

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -185,7 +185,7 @@ export default {
       @dismiss="dismissPartialCleanupWarning = true"
     />
 
-    <details-header :image-name="image.name" />
+    <details-header :image="image" />
 
     <tags-loader v-if="isLoading" />
     <template v-else>

changelogs/unreleased/216795-show-last-update-and-visibility.yml

+---
+title: Add visibility and last updated image repository details
+merge_request: 49703
+author:
+type: changed

locale/gitlab.pot

@@ -7429,6 +7429,9 @@ msgstr ""
 msgid "ContainerRegistry|Keep these tags"
 msgstr ""
 
+msgid "ContainerRegistry|Last updated %{time}"
+msgstr ""
+
 msgid "ContainerRegistry|Login"
 msgstr ""
 

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

@@ -7,9 +7,27 @@ import { DETAILS_PAGE_TITLE } from '~/registry/explorer/constants';
 describe('Details Header', () => {
   let wrapper;
 
-  const mountComponent = propsData => {
+  const defaultImage = {
+    name: 'foo',
+    updatedAt: '2020-11-03T13:29:21Z',
+    project: {
+      visibility: 'public',
+    },
+  };
+
+  const findLastUpdatedAndVisibility = () => wrapper.find('[data-testid="updated-and-visibility"]');
+
+  const waitForMetadataItems = async () => {
+    // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+  };
+
+  const mountComponent = (image = defaultImage) => {
     wrapper = shallowMount(component, {
-      propsData,
+      propsData: {
+        image,
+      },
       stubs: {
         GlSprintf,
         TitleArea,
@@ -23,12 +41,34 @@ describe('Details Header', () => {
   });
 
   it('has the correct title ', () => {
-    mountComponent();
+    mountComponent({ ...defaultImage, name: '' });
     expect(wrapper.text()).toMatchInterpolatedText(DETAILS_PAGE_TITLE);
   });
 
   it('shows imageName in the title', () => {
-    mountComponent({ imageName: 'foo' });
+    mountComponent();
     expect(wrapper.text()).toContain('foo');
   });
+
+  it('has a metadata item with last updated text', async () => {
+    mountComponent();
+    await waitForMetadataItems();
+
+    expect(findLastUpdatedAndVisibility().props('text')).toBe('Last updated 1 month ago');
+  });
+
+  describe('visibility icon', () => {
+    it('shows an eye when the project is public', async () => {
+      mountComponent();
+      await waitForMetadataItems();
+
+      expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye');
+    });
+    it('shows an eye slashed when the project is not public', async () => {
+      mountComponent({ ...defaultImage, project: { visibility: 'private' } });
+      await waitForMetadataItems();
+
+      expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye-slash');
+    });
+  });
 });

spec/frontend/registry/explorer/mock_data.js

@@ -201,8 +201,13 @@ export const containerRepositoryMock = {
   location: 'host.docker.internal:5000/gitlab-org/gitlab-test/rails-12009',
   canDelete: true,
   createdAt: '2020-11-03T13:29:21Z',
+  updatedAt: '2020-11-03T13:29:21Z',
   tagsCount: 13,
   expirationPolicyStartedAt: null,
+  project: {
+    visibility: 'public',
+    __typename: 'Project',
+  },
 };
 
 export const tagsPageInfo = {

spec/frontend/registry/explorer/pages/details_spec.js

@@ -355,7 +355,12 @@ describe('Details Page', () => {
       mountComponent();
 
       await waitForApolloRequestRender();
-      expect(findDetailsHeader().props()).toEqual({ imageName: containerRepositoryMock.name });
+      expect(findDetailsHeader().props('image')).toMatchObject({
+        name: containerRepositoryMock.name,
+        project: {
+          visibility: containerRepositoryMock.project.visibility,
+        },
+      });
     });
   });