Replace alert with GlAlert

Replace the alert in erased
block with GlAlert component.

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

 <script>
 import { isEmpty } from 'lodash';
-import { GlLink } from '@gitlab/ui';
+import { GlAlert, GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    TimeagoTooltip,
+    GlAlert,
     GlLink,
+    TimeagoTooltip,
   },
   props: {
     user: {
@@ -27,17 +28,18 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mt-3 js-build-erased">
-    <div class="erased alert alert-warning">
+  <div class="gl-mt-3">
+    <gl-alert variant="warning" :dismissible="false">
       <template v-if="isErasedByUser">
         {{ s__('Job|Job has been erased by') }}
-        <gl-link :href="user.web_url"> {{ user.username }} </gl-link>
+        <gl-link :href="user.web_url">{{ user.username }}</gl-link>
       </template>
+
       <template v-else>
         {{ s__('Job|Job has been erased') }}
       </template>
 
       <timeago-tooltip :time="erasedAt" />
-    </div>
+    </gl-alert>
   </div>
 </template>

spec/frontend/jobs/components/__snapshots__/erased_block_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Erased block with erased job renders alert with erased text and variant 1`] = `
+<div
+  class="gl-mt-3"
+>
+  <div
+    class="gl-alert gl-alert-warning"
+    role="alert"
+  >
+    <svg
+      aria-hidden="true"
+      class="gl-icon s16 gl-alert-icon gl-alert-icon-no-title"
+      data-testid="warning-icon"
+    >
+      <use
+        href="#warning"
+      />
+    </svg>
+     
+    <!---->
+     
+    <!---->
+     
+    <div
+      class="gl-alert-body"
+    >
+      
+      Job has been erased
+     
+      <time
+        class=""
+        datetime="2016-11-07T11:11:16.525Z"
+        title="Nov 7, 2016 11:11am GMT+0000"
+      >
+        4 years ago
+      </time>
+    </div>
+     
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Erased block with job erased by user renders alert with erased by text and variant 1`] = `
+<div
+  class="gl-mt-3"
+>
+  <div
+    class="gl-alert gl-alert-warning"
+    role="alert"
+  >
+    <svg
+      aria-hidden="true"
+      class="gl-icon s16 gl-alert-icon gl-alert-icon-no-title"
+      data-testid="warning-icon"
+    >
+      <use
+        href="#warning"
+      />
+    </svg>
+     
+    <!---->
+     
+    <!---->
+     
+    <div
+      class="gl-alert-body"
+    >
+      
+      Job has been erased by
+      
+      <a
+        class="gl-link"
+        href="gitlab.com/root"
+      >
+        root
+      </a>
+       
+      <time
+        class=""
+        datetime="2016-11-07T11:11:16.525Z"
+        title="Nov 7, 2016 11:11am GMT+0000"
+      >
+        4 years ago
+      </time>
+    </div>
+     
+    <!---->
+  </div>
+</div>
+`;

spec/frontend/jobs/components/erased_block_spec.js

@@ -10,6 +10,8 @@ describe('Erased block', () => {
   const timeago = getTimeago();
   const formattedDate = timeago.format(erasedAt);
 
+  const findLink = () => wrapper.find(GlLink);
+
   const createComponent = (props) => {
     wrapper = mount(ErasedBlock, {
       propsData: props,
@@ -31,8 +33,12 @@ describe('Erased block', () => {
       });
     });
 
+    it('renders alert with erased by text and variant', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
     it('renders username and link', () => {
-      expect(wrapper.find(GlLink).attributes('href')).toEqual('gitlab.com/root');
+      expect(findLink().attributes('href')).toEqual('gitlab.com/root');
 
       expect(wrapper.text().trim()).toContain('Job has been erased by');
       expect(wrapper.text().trim()).toContain('root');
@@ -50,6 +56,10 @@ describe('Erased block', () => {
       });
     });
 
+    it('renders alert with erased text and variant', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
     it('renders username and link', () => {
       expect(wrapper.text().trim()).toContain('Job has been erased');
     });