1 files changed, 112 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages/details/components/package_title.vue b/app/assets/javascripts/packages/details/components/package_title.vue
new file mode 100644
index 00000000000..d07883e3e7a
--- /dev/null
+++ b/app/assets/javascripts/packages/details/components/package_title.vue
@@ -0,0 +1,112 @@
+<script>
+import { mapState, mapGetters } from 'vuex';
+import { GlAvatar, GlIcon, GlLink, 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 { __ } from '~/locale';
+
+export default {
+  name: 'PackageTitle',
+  components: {
+    GlAvatar,
+    GlIcon,
+    GlLink,
+    GlSprintf,
+    PackageTags,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [timeagoMixin],
+  computed: {
+    ...mapState(['packageEntity', 'packageFiles']),
+    ...mapGetters(['packageTypeDisplay', 'packagePipeline', 'packageIcon']),
+    hasTagsToDisplay() {
+      return Boolean(this.packageEntity.tags && this.packageEntity.tags.length);
+    },
+    totalSize() {
+      return numberToHumanSize(this.packageFiles.reduce((acc, p) => acc + p.size, 0));
+    },
+  },
+  i18n: {
+    packageInfo: __('v%{version} published %{timeAgo}'),
+  },
+};
+</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>
+
+        <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>
+        </div>
+      </div>
+    </div>
+
+    <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>
+
+      <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>
+
+      <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>
+
+      <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>
+
+      <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>