4 files changed, 122 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
new file mode 100644
index 00000000000..2a6c9c49b2f
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -0,0 +1,55 @@
+<script>
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    TimeagoTooltip,
+  },
+  props: {
+    erasedByUser: {
+      type: Boolean,
+      required: true,
+    },
+    username: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    linkToUser: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    erasedAt: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="prepend-top-default js-build-erased">
+    <div class="erased alert alert-warning">
+      <template v-if="erasedByUser">
+        {{ s__("Job|Job has been erased by") }}
+
+        <a
+          :href="linkToUser"
+        >
+          {{ username }}
+        </a>
+
+        <timeago-tooltip
+          :time="erasedAt"
+        />
+
+      </template>
+      <template v-else>
+        {{ s__("Job|Job has been erased") }}
+        <timeago-tooltip
+          :time="erasedAt"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/changelogs/unreleased/50101-erased-block.yml b/changelogs/unreleased/50101-erased-block.yml
new file mode 100644
index 00000000000..5a5c9bc0fc4
--- /dev/null
+++ b/changelogs/unreleased/50101-erased-block.yml
@@ -0,0 +1,5 @@
+---
+title: Creates vue component for erased block on job view
+merge_request:
+author:
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 92f424ccdf0..aeb9efb528f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3130,6 +3130,12 @@ msgstr ""
 msgid "Jobs"
 msgstr ""
 
+msgid "Job|Job has been erased"
+msgstr ""
+
+msgid "Job|Job has been erased by"
+msgstr ""
+
 msgid "Jul"
 msgstr ""
 
diff --git a/spec/javascripts/jobs/erased_block_spec.js b/spec/javascripts/jobs/erased_block_spec.js
new file mode 100644
index 00000000000..7cf32e984a2
--- /dev/null
+++ b/spec/javascripts/jobs/erased_block_spec.js
@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import component from '~/jobs/components/erased_block.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Erased block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  const erasedAt = '2016-11-07T11:11:16.525Z';
+  const timeago = getTimeago();
+  const formatedDate = timeago.format(erasedAt);
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('with job erased by user', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        erasedByUser: true,
+        username: 'root',
+        linkToUser: 'gitlab.com/root',
+        erasedAt,
+      });
+    });
+
+    it('renders username and link', () => {
+      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('gitlab.com/root');
+
+      expect(vm.$el.textContent).toContain('Job has been erased by');
+      expect(vm.$el.textContent).toContain('root');
+    });
+
+    it('renders erasedAt', () => {
+      expect(vm.$el.textContent).toContain(formatedDate);
+    });
+  });
+
+  describe('with erased job', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        erasedByUser: false,
+        erasedAt,
+      });
+    });
+
+    it('renders username and link', () => {
+      expect(vm.$el.textContent).toContain('Job has been erased');
+    });
+
+    it('renders erasedAt', () => {
+      expect(vm.$el.textContent).toContain(formatedDate);
+    });
+  });
+});