1 files changed, 74 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/components/tags/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/components/tags/tags_list_row.vue
new file mode 100644
index 00000000000..63e046c1abc
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/harbor_registry/components/tags/tags_list_row.vue
@@ -0,0 +1,74 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { CREATED_AT_LABEL } from '~/packages_and_registries/harbor_registry/constants';
+import { tagPullCommand } from '~/packages_and_registries/harbor_registry/utils';
+
+export default {
+  name: 'TagsListRow',
+  components: {
+    GlSprintf,
+    ListItem,
+    ClipboardButton,
+    TimeAgoTooltip,
+  },
+  inject: ['harborIntegrationProjectName', 'repositoryUrl'],
+  props: {
+    tag: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n: {
+    createdAtLabel: CREATED_AT_LABEL,
+  },
+  methods: {
+    getPullCommand(tagName) {
+      if (tagName) {
+        const { image } = this.$route.params;
+
+        return tagPullCommand({
+          imageName: image,
+          tag: tagName,
+          repositoryUrl: this.repositoryUrl,
+          harborProjectName: this.harborIntegrationProjectName,
+        });
+      }
+
+      return '';
+    },
+  },
+};
+</script>
+
+<template>
+  <list-item v-bind="$attrs">
+    <template #left-primary>
+      <div class="gl-display-flex gl-align-items-center">
+        <div
+          data-testid="name"
+          class="gl-text-overflow-ellipsis gl-overflow-hidden gl-white-space-nowrap"
+        >
+          {{ tag.name }}
+        </div>
+        <clipboard-button
+          :title="getPullCommand(tag.name)"
+          :text="getPullCommand(tag.name)"
+          category="tertiary"
+        />
+      </div>
+    </template>
+
+    <template #right-primary>
+      <span data-testid="time">
+        <gl-sprintf :message="$options.i18n.createdAtLabel">
+          <template #timeInfo>
+            <time-ago-tooltip :time="tag.pushTime" />
+          </template>
+        </gl-sprintf>
+      </span>
+    </template>
+  </list-item>
+</template>