1 files changed, 43 insertions, 69 deletions

diff --git a/app/assets/javascripts/packages/details/components/package_title.vue b/app/assets/javascripts/packages/details/components/package_title.vue
index d07883e3e7a..69dd494f11a 100644
--- a/app/assets/javascripts/packages/details/components/package_title.vue
+++ b/app/assets/javascripts/packages/details/components/package_title.vue
@@ -1,19 +1,21 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
-import { GlAvatar, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import PackageTags from '../../shared/components/package_tags.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import { __ } from '~/locale';
 
 export default {
   name: 'PackageTitle',
   components: {
-    GlAvatar,
+    TitleArea,
     GlIcon,
-    GlLink,
     GlSprintf,
     PackageTags,
+    MetadataItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -36,77 +38,49 @@ export default {
 </script>
 
 <template>
-  <div class="gl-flex-direction-column">
-    <div class="gl-display-flex">
-      <gl-avatar
-        v-if="packageIcon"
-        :src="packageIcon"
-        shape="rect"
-        class="gl-align-self-center gl-mr-4"
-        data-testid="package-icon"
-      />
-
-      <div class="gl-display-flex gl-flex-direction-column">
-        <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2">
-          {{ packageEntity.name }}
-        </h1>
+  <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
+    <template #sub-header>
+      <gl-icon name="eye" class="gl-mr-3" />
+      <gl-sprintf :message="$options.i18n.packageInfo">
+        <template #version>
+          {{ packageEntity.version }}
+        </template>
 
-        <div class="gl-display-flex gl-align-items-center gl-text-gray-500">
-          <gl-icon name="eye" class="gl-mr-3" />
-          <gl-sprintf :message="$options.i18n.packageInfo">
-            <template #version>
-              {{ packageEntity.version }}
-            </template>
+        <template #timeAgo>
+          <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
+            &nbsp;{{ timeFormatted(packageEntity.created_at) }}
+          </span>
+        </template>
+      </gl-sprintf>
+    </template>
 
-            <template #timeAgo>
-              <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
-                &nbsp;{{ timeFormatted(packageEntity.created_at) }}
-              </span>
-            </template>
-          </gl-sprintf>
-        </div>
-      </div>
-    </div>
+    <template v-if="packageTypeDisplay" #metadata_type>
+      <metadata-item data-testid="package-type" icon="package" :text="packageTypeDisplay" />
+    </template>
 
-    <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3">
-      <div v-if="packageTypeDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="package" class="gl-text-gray-500 gl-mr-3" />
-        <span data-testid="package-type" class="gl-font-weight-bold">{{ packageTypeDisplay }}</span>
-      </div>
+    <template #metadata_size>
+      <metadata-item data-testid="package-size" icon="disk" :text="totalSize" />
+    </template>
 
-      <div v-if="hasTagsToDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <package-tags :tag-display-limit="1" :tags="packageEntity.tags" />
-      </div>
+    <template v-if="packagePipeline" #metadata_pipeline>
+      <metadata-item
+        data-testid="pipeline-project"
+        icon="review-list"
+        :text="packagePipeline.project.name"
+        :link="packagePipeline.project.web_url"
+      />
+    </template>
 
-      <div v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="review-list" class="gl-text-gray-500 gl-mr-3" />
-        <gl-link
-          data-testid="pipeline-project"
-          :href="packagePipeline.project.web_url"
-          class="gl-font-weight-bold text-truncate"
-        >
-          {{ packagePipeline.project.name }}
-        </gl-link>
-      </div>
+    <template v-if="packagePipeline" #metadata_ref>
+      <metadata-item data-testid="package-ref" icon="branch" :text="packagePipeline.ref" />
+    </template>
 
-      <div
-        v-if="packagePipeline"
-        data-testid="package-ref"
-        class="gl-display-flex gl-align-items-center gl-mr-5"
-      >
-        <gl-icon name="branch" class="gl-text-gray-500 gl-mr-3" />
-        <span
-          v-gl-tooltip
-          class="gl-font-weight-bold text-truncate mw-xs"
-          :title="packagePipeline.ref"
-          >{{ packagePipeline.ref }}</span
-        >
-      </div>
+    <template v-if="hasTagsToDisplay" #metadata_tags>
+      <package-tags :tag-display-limit="2" :tags="packageEntity.tags" hide-label />
+    </template>
 
-      <div class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="disk" class="gl-text-gray-500 gl-mr-3" />
-        <span data-testid="package-size" class="gl-font-weight-bold">{{ totalSize }}</span>
-      </div>
-    </div>
-  </div>
+    <template #right-actions>
+      <slot name="delete-button"></slot>
+    </template>
+  </title-area>
 </template>