diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/components/details_page/details_header.vue')
-rw-r--r-- | app/assets/javascripts/registry/explorer/components/details_page/details_header.vue | 36 |
1 files changed, 29 insertions, 7 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> |