Apply reviewer feedback

Remove snapshots, use GlSprintf
to transalte the username link.

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

 <script>
 import { isEmpty } from 'lodash';
-import { GlAlert, GlLink } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     GlAlert,
     GlLink,
+    GlSprintf,
     TimeagoTooltip,
   },
   props: {
@@ -31,8 +32,11 @@ export default {
   <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-sprintf :message="s__('Job|Job has been erased by %{userLink}')">
+          <template #userLink>
+            <gl-link :href="user.web_url" target="_blank">{{ user.username }}</gl-link>
+          </template>
+        </gl-sprintf>
       </template>
 
       <template v-else>

changelogs/unreleased/pb-use-gl-alert-erased-block.yml

+---
+title: Replace erase job log alert variant with correct variant
+merge_request: 52810
+author:
+type: changed

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

@@ -33,10 +33,6 @@ describe('Erased block', () => {
       });
     });
 
-    it('renders alert with erased by text and variant', () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
     it('renders username and link', () => {
       expect(findLink().attributes('href')).toEqual('gitlab.com/root');
 
@@ -56,10 +52,6 @@ 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');
     });