Creates vue component for artifacts block

app/assets/javascripts/jobs/components/artifacts_block.vue

+<script>
+  import TimeagoTooltiop from '~/vue_shared/components/time_ago_tooltip.vue';
+
+  export default {
+    components: {
+      TimeagoTooltiop,
+    },
+    props: {
+      // @build.artifacts_expired?
+      haveArtifactsExpired: {
+        type: Boolean,
+        required: true,
+      },
+      // @build.has_expiring_artifacts?
+      willArtifactsExpire: {
+        type: Boolean,
+        required: true,
+      },
+      expireAt: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      keepArtifactsPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      downloadArtifactsPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      browseArtifactsPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+    },
+  };
+</script>
+<template>
+  <div class="block">
+    <div class="title">
+      {{ s__('Job|Job artifacts') }}
+    </div>
+
+    <p
+      v-if="haveArtifactsExpired"
+      class="js-artifacts-removed build-detail-row"
+    >
+      {{ s__('Job|The artifacts were removed') }}
+    </p>
+    <p
+      v-else-if="willArtifactsExpire"
+      class="js-artifacts-will-be-removed build-detail-row"
+    >
+      {{ s__('Job|The artifacts will be removed') }}
+    </p>
+
+    <timeago-tooltiop
+      v-if="expireAt"
+      :time="expireAt"
+    />
+
+    <div
+      class="btn-group d-flex"
+      role="group"
+    >
+      <a
+        v-if="keepArtifactsPath"
+        :href="keepArtifactsPath"
+        class="js-keep-artifacts btn btn-sm btn-default"
+        data-method="post"
+      >
+        {{ s__('Job|Keep') }}
+      </a>
+
+      <a
+        v-if="downloadArtifactsPath"
+        :href="downloadArtifactsPath"
+        class="js-download-artifacts btn btn-sm btn-default"
+        download
+        rel="nofollow"
+      >
+        {{ s__('Job|Download') }}
+      </a>
+
+      <a
+        v-if="browseArtifactsPath"
+        :href="browseArtifactsPath"
+        class="js-browse-artifacts btn btn-sm btn-default"
+      >
+        {{ s__('Job|Browse') }}
+      </a>
+    </div>
+  </div>
+</template>

changelogs/unreleased/50101-aritfacts-block.yml

+---
+title: Creates Vue component for artifacts block on job page
+merge_request:
+author:
+type: other

locale/gitlab.pot

@@ -3139,12 +3139,30 @@ msgstr ""
 msgid "Jobs"
 msgstr ""
 
+msgid "Job|Browse"
+msgstr ""
+
+msgid "Job|Download"
+msgstr ""
+
+msgid "Job|Job artifacts"
+msgstr ""
+
 msgid "Job|Job has been erased"
 msgstr ""
 
 msgid "Job|Job has been erased by"
 msgstr ""
 
+msgid "Job|Keep"
+msgstr ""
+
+msgid "Job|The artifacts were removed"
+msgstr ""
+
+msgid "Job|The artifacts will be removed"
+msgstr ""
+
 msgid "Jul"
 msgstr ""
 

spec/javascripts/jobs/artifacts_block_spec.js

+import Vue from 'vue';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import component from '~/jobs/components/artifacts_block.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Artifacts block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  const expireAt = '2018-08-14T09:38:49.157Z';
+  const timeago = getTimeago();
+  const formatedDate = timeago.format(expireAt);
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('with expired artifacts', () => {
+    it('renders expired artifact date and info', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+      });
+
+      expect(vm.$el.querySelector('.js-artifacts-removed')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).toBeNull();
+      expect(vm.$el.textContent).toContain(formatedDate);
+    });
+  });
+
+  describe('with artifacts that will expire', () => {
+    it('renders will expire artifact date and info', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: false,
+        willArtifactsExpire: true,
+        expireAt,
+      });
+
+      expect(vm.$el.querySelector('.js-artifacts-removed')).toBeNull();
+      expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).not.toBeNull();
+      expect(vm.$el.textContent).toContain(formatedDate);
+    });
+  });
+
+  describe('when the user can keep the artifacts', () => {
+    it('renders the keep button', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+        keepArtifactsPath: '/keep',
+      });
+
+      expect(vm.$el.querySelector('.js-keep-artifacts')).not.toBeNull();
+    });
+  });
+
+  describe('when the user can not keep the artifacts', () => {
+    it('does not render the keep button', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+      });
+
+      expect(vm.$el.querySelector('.js-keep-artifacts')).toBeNull();
+    });
+  });
+
+  describe('when the user can download the artifacts', () => {
+    it('renders the download button', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+        downloadArtifactsPath: '/download',
+      });
+
+      expect(vm.$el.querySelector('.js-download-artifacts')).not.toBeNull();
+    });
+  });
+
+  describe('when the user can not download the artifacts', () => {
+    it('does not render the keep button', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+      });
+
+      expect(vm.$el.querySelector('.js-download-artifacts')).toBeNull();
+    });
+  });
+
+  describe('when the user can browse the artifacts', () => {
+    it('does not render the browse button', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+        browseArtifactsPath: '/browse',
+      });
+
+      expect(vm.$el.querySelector('.js-browse-artifacts')).not.toBeNull();
+    });
+  });
+
+  describe('when the user can not browse the artifacts', () => {
+    it('does not render the browse button', () => {
+      vm = mountComponent(Component, {
+        haveArtifactsExpired: true,
+        willArtifactsExpire: false,
+        expireAt,
+      });
+
+      expect(vm.$el.querySelector('.js-browse-artifacts')).toBeNull();
+    });
+  });
+});