1 files changed, 28 insertions, 40 deletions

diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 525c5eec91a..d5866f9b9f1 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -1,40 +1,27 @@
 <script>
-  import TimeagoTooltiop from '~/vue_shared/components/time_ago_tooltip.vue';
+  import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+  import timeagoMixin from '~/vue_shared/mixins/timeago';
 
   export default {
     components: {
-      TimeagoTooltiop,
+      TimeagoTooltip,
     },
+    mixins: [
+      timeagoMixin,
+    ],
     props: {
-      // @build.artifacts_expired?
-      haveArtifactsExpired: {
-        type: Boolean,
+      artifact: {
+        type: Object,
         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,
+    },
+    computed: {
+      isExpired() {
+        return this.artifact.expired;
       },
-      browseArtifactsPath: {
-        type: String,
-        required: false,
-        default: null,
+      // Only when the key is `false` we can render this block
+      willExpire() {
+        return this.artifact.expired === false;
       },
     },
   };
@@ -46,21 +33,22 @@
     </div>
 
     <p
-      v-if="haveArtifactsExpired"
+      v-if="isExpired"
       class="js-artifacts-removed build-detail-row"
     >
       {{ s__('Job|The artifacts were removed') }}
     </p>
+
     <p
-      v-else-if="willArtifactsExpire"
+      v-else-if="willExpire"
       class="js-artifacts-will-be-removed build-detail-row"
     >
-      {{ s__('Job|The artifacts will be removed') }}
+      {{ s__('Job|The artifacts will be removed in') }}
     </p>
 
-    <timeago-tooltiop
-      v-if="expireAt"
-      :time="expireAt"
+    <timeago-tooltip
+      v-if="artifact.expire_at"
+      :time="artifact.expire_at"
     />
 
     <div
@@ -68,8 +56,8 @@
       role="group"
     >
       <a
-        v-if="keepArtifactsPath"
-        :href="keepArtifactsPath"
+        v-if="artifact.keep_path"
+        :href="artifact.keep_path"
         class="js-keep-artifacts btn btn-sm btn-default"
         data-method="post"
       >
@@ -77,8 +65,8 @@
       </a>
 
       <a
-        v-if="downloadArtifactsPath"
-        :href="downloadArtifactsPath"
+        v-if="artifact.download_path"
+        :href="artifact.download_path"
         class="js-download-artifacts btn btn-sm btn-default"
         download
         rel="nofollow"
@@ -87,8 +75,8 @@
       </a>
 
       <a
-        v-if="browseArtifactsPath"
-        :href="browseArtifactsPath"
+        v-if="artifact.browse_path"
+        :href="artifact.browse_path"
         class="js-browse-artifacts btn btn-sm btn-default"
       >
         {{ s__('Job|Browse') }}