1 files changed, 54 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/tags/tags_header.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/tags/tags_header.vue
new file mode 100644
index 00000000000..e7f6989c49f
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/tags/tags_header.vue
@@ -0,0 +1,54 @@
+<script>
+import { isEmpty } from 'lodash';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import {
+  EMPTY_TAG_LABEL,
+  tagsCountText,
+} from '~/packages_and_registries/harbor_registry/constants';
+
+export default {
+  name: 'TagsHeader',
+  components: {
+    TitleArea,
+    MetadataItem,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    artifactDetail: {
+      type: Object,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+    tagsLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    tagCountText() {
+      if (isEmpty(this.pageInfo)) {
+        return EMPTY_TAG_LABEL;
+      }
+      return tagsCountText(this.pageInfo.total);
+    },
+  },
+};
+</script>
+
+<template>
+  <title-area :metadata-loading="tagsLoading">
+    <template #title>
+      <span class="gl-word-break-all" data-testid="title">
+        {{ artifactDetail.digest }}
+      </span>
+    </template>
+    <template #metadata-tags-count>
+      <metadata-item icon="tag" :text="tagCountText" data-testid="tags-count" />
+    </template>
+  </title-area>
+</template>