Add latest changes from gitlab-org/gitlab@master

4 files changed, 36 insertions, 8 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
index ff613daf7fa..3eeb7b29386 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -1,15 +1,29 @@
 <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>
diff --git a/app/assets/javascripts/registry/explorer/constants/details.js b/app/assets/javascripts/registry/explorer/constants/details.js
index 306e6903a4f..1babaaa93da 100644
--- a/app/assets/javascripts/registry/explorer/constants/details.js
+++ b/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
diff --git a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.graphql b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.graphql
index a54934fa681..b40200e020b 100644
--- a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.graphql
+++ b/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
+    }
   }
 }
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index 7e93b05b43a..57c59c7dc42 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -183,7 +183,7 @@ export default {
       @dismiss="dismissPartialCleanupWarning = true"
     />
 
-    <details-header :image-name="image.name" />
+    <details-header :image="image" />
 
     <tags-loader v-if="isLoading" />
     <template v-else>