Merge branch 'pb-use-gl-alert-erased-block' into 'master'

Replace alert classes on div with GlAlert

See merge request gitlab-org/gitlab!52810

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

 <script>
 import { isEmpty } from 'lodash';
-import { GlLink } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    TimeagoTooltip,
+    GlAlert,
     GlLink,
+    GlSprintf,
+    TimeagoTooltip,
   },
   props: {
     user: {
@@ -27,17 +29,21 @@ 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-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>
         {{ s__('Job|Job has been erased') }}
       </template>
 
       <timeago-tooltip :time="erasedAt" />
-    </div>
+    </gl-alert>
   </div>
 </template>

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

+---
+title: Replace erase job alert background color with color consistent with UI
+merge_request: 52810
+author:
+type: changed

locale/gitlab.pot

@@ -16723,7 +16723,7 @@ msgstr ""
 msgid "Job|Job has been erased"
 msgstr ""
 
-msgid "Job|Job has been erased by"
+msgid "Job|Job has been erased by %{userLink}"
 msgstr ""
 
 msgid "Job|Keep"

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,
@@ -32,7 +34,7 @@ describe('Erased block', () => {
     });
 
     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');