1 files changed, 114 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages/details/components/package_history.vue b/app/assets/javascripts/packages/details/components/package_history.vue
new file mode 100644
index 00000000000..96ce106884d
--- /dev/null
+++ b/app/assets/javascripts/packages/details/components/package_history.vue
@@ -0,0 +1,114 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import HistoryElement from './history_element.vue';
+
+export default {
+  name: 'PackageHistory',
+  i18n: {
+    createdOn: s__('PackageRegistry|%{name} version %{version} was created %{datetime}'),
+    updatedAtText: s__('PackageRegistry|%{name} version %{version} was updated %{datetime}'),
+    commitText: s__('PackageRegistry|Commit %{link} on branch %{branch}'),
+    pipelineText: s__('PackageRegistry|Pipeline %{link} triggered %{datetime} by %{author}'),
+    publishText: s__('PackageRegistry|Published to the %{project} Package Registry %{datetime}'),
+  },
+  components: {
+    GlLink,
+    GlSprintf,
+    HistoryElement,
+    TimeAgoTooltip,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+    projectName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showDescription: false,
+    };
+  },
+  computed: {
+    packagePipeline() {
+      return this.packageEntity.pipeline?.id ? this.packageEntity.pipeline : null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issuable-discussion">
+    <h3 class="gl-font-lg" data-testid="title">{{ __('History') }}</h3>
+    <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline">
+      <history-element icon="clock" data-testid="created-on">
+        <gl-sprintf :message="$options.i18n.createdOn">
+          <template #name>
+            <strong>{{ packageEntity.name }}</strong>
+          </template>
+          <template #version>
+            <strong>{{ packageEntity.version }}</strong>
+          </template>
+          <template #datetime>
+            <time-ago-tooltip :time="packageEntity.created_at" />
+          </template>
+        </gl-sprintf>
+      </history-element>
+      <history-element icon="pencil" data-testid="updated-at">
+        <gl-sprintf :message="$options.i18n.updatedAtText">
+          <template #name>
+            <strong>{{ packageEntity.name }}</strong>
+          </template>
+          <template #version>
+            <strong>{{ packageEntity.version }}</strong>
+          </template>
+          <template #datetime>
+            <time-ago-tooltip :time="packageEntity.updated_at" />
+          </template>
+        </gl-sprintf>
+      </history-element>
+      <template v-if="packagePipeline">
+        <history-element icon="commit" data-testid="commit">
+          <gl-sprintf :message="$options.i18n.commitText">
+            <template #link>
+              <gl-link :href="packagePipeline.project.commit_url">{{
+                packagePipeline.sha
+              }}</gl-link>
+            </template>
+            <template #branch>
+              <strong>{{ packagePipeline.ref }}</strong>
+            </template>
+          </gl-sprintf>
+        </history-element>
+        <history-element icon="pipeline" data-testid="pipeline">
+          <gl-sprintf :message="$options.i18n.pipelineText">
+            <template #link>
+              <gl-link :href="packagePipeline.project.pipeline_url"
+                >#{{ packagePipeline.id }}</gl-link
+              >
+            </template>
+            <template #datetime>
+              <time-ago-tooltip :time="packagePipeline.created_at" />
+            </template>
+            <template #author>{{ packagePipeline.user.name }}</template>
+          </gl-sprintf>
+        </history-element>
+      </template>
+      <history-element icon="package" data-testid="published">
+        <gl-sprintf :message="$options.i18n.publishText">
+          <template #project>
+            <strong>{{ projectName }}</strong>
+          </template>
+          <template #datetime>
+            <time-ago-tooltip :time="packageEntity.created_at" />
+          </template>
+        </gl-sprintf>
+      </history-element>
+    </ul>
+  </div>
+</template>