1 files changed, 87 insertions, 0 deletions
diff --git a/app/assets/javascripts/artifacts/components/artifact_row.vue b/app/assets/javascripts/artifacts/components/artifact_row.vue
new file mode 100644
index 00000000000..8c03db2acd1
--- /dev/null
+++ b/app/assets/javascripts/artifacts/components/artifact_row.vue
@@ -0,0 +1,87 @@
+<script>
+import { GlButtonGroup, GlButton, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { I18N_EXPIRED, I18N_DOWNLOAD, I18N_DELETE } from '../constants';
+
+export default {
+  name: 'ArtifactRow',
+  components: {
+    GlButtonGroup,
+    GlButton,
+    GlBadge,
+    GlFriendlyWrap,
+  },
+  props: {
+    artifact: {
+      type: Object,
+      required: true,
+    },
+    isLastRow: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    isExpired() {
+      if (!this.artifact.expireAt) {
+        return false;
+      }
+      return Date.now() > new Date(this.artifact.expireAt).getTime();
+    },
+    artifactSize() {
+      return numberToHumanSize(this.artifact.size);
+    },
+  },
+  i18n: {
+    expired: I18N_EXPIRED,
+    download: I18N_DOWNLOAD,
+    delete: I18N_DELETE,
+  },
+};
+</script>
+<template>
+  <div
+    class="gl-py-4"
+    :class="{ 'gl-border-b-solid gl-border-b-1 gl-border-gray-100': !isLastRow }"
+  >
+    <div class="gl-display-inline-flex gl-align-items-center gl-w-full">
+      <span
+        class="gl-w-half gl-pl-8 gl-display-flex gl-align-items-center"
+        data-testid="job-artifact-row-name"
+      >
+        <gl-friendly-wrap :text="artifact.name" />
+        <gl-badge size="sm" variant="neutral" class="gl-ml-2">
+          {{ artifact.fileType.toLowerCase() }}
+        </gl-badge>
+        <gl-badge v-if="isExpired" size="sm" variant="warning" icon="expire" class="gl-ml-2">
+          {{ $options.i18n.expired }}
+        </gl-badge>
+      </span>
+
+      <span class="gl-w-quarter gl-text-right gl-pr-5" data-testid="job-artifact-row-size">
+        {{ artifactSize }}
+      </span>
+
+      <span class="gl-w-quarter gl-text-right gl-pr-5">
+        <gl-button-group>
+          <gl-button
+            category="tertiary"
+            icon="download"
+            :title="$options.i18n.download"
+            :aria-label="$options.i18n.download"
+            :href="artifact.downloadPath"
+            data-testid="job-artifact-row-download-button"
+          />
+          <gl-button
+            category="tertiary"
+            icon="remove"
+            :title="$options.i18n.delete"
+            :aria-label="$options.i18n.delete"
+            data-testid="job-artifact-row-delete-button"
+            @click="$emit('delete')"
+          />
+        </gl-button-group>
+      </span>
+    </div>
+  </div>
+</template>