Migrate bs-callout to GlAlert in …/unmet_prerequisites_block.vue

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

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlAlert } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 /**
  * Renders Unmet Prerequisites block for job's view.
  */
 export default {
+  i18n: {
+    failMessage: s__(
+      'Job|This job failed because the necessary resources were not successfully created.',
+    ),
+    moreInformation: __('More information'),
+  },
   components: {
     GlLink,
+    GlAlert,
   },
   props: {
     helpPath: {
@@ -16,15 +24,10 @@ export default {
 };
 </script>
 <template>
-  <div class="bs-callout bs-callout-danger">
-    <p class="js-failed-unmet-prerequisites gl-mb-0">
-      {{
-        s__(`Job|This job failed because the necessary resources were not successfully created.`)
-      }}
-
-      <gl-link :href="helpPath" class="js-help-path">
-        <strong> {{ __('More information') }} </strong>
-      </gl-link>
-    </p>
-  </div>
+  <gl-alert variant="danger" class="gl-mt-3" :dismissible="false">
+    {{ $options.i18n.failMessage }}
+    <gl-link :href="helpPath">
+      {{ $options.i18n.moreInformation }}
+    </gl-link>
+  </gl-alert>
 </template>

changelogs/unreleased/242028-migrate-bs-callout-to-glalert-in-app-assets-javascripts-jobs-compo.yml

+---
+title: Migrate bs-callout to GlAlert in …/unmet_prerequisites_block.vue
+merge_request: 48398
+author:
+type: other

spec/frontend/jobs/components/unmet_prerequisites_block_spec.js

-import Vue from 'vue';
-import component from '~/jobs/components/unmet_prerequisites_block.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlLink } from '@gitlab/ui';
+import UnmetPrerequisitesBlock from '~/jobs/components/unmet_prerequisites_block.vue';
 
 describe('Unmet Prerequisites Block Job component', () => {
-  const Component = Vue.extend(component);
-  let vm;
+  let wrapper;
   const helpPath = '/user/project/clusters/index.html#troubleshooting-failed-deployment-jobs';
 
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      hasNoRunnersForProject: true,
-      helpPath,
+  const createComponent = () => {
+    wrapper = shallowMount(UnmetPrerequisitesBlock, {
+      propsData: {
+        helpPath,
+      },
     });
+  };
+
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders an alert with the correct message', () => {
-    const container = vm.$el.querySelector('.js-failed-unmet-prerequisites');
+    const container = wrapper.find(GlAlert);
     const alertMessage =
       'This job failed because the necessary resources were not successfully created.';
 
     expect(container).not.toBeNull();
-    expect(container.innerHTML).toContain(alertMessage);
+    expect(container.text()).toContain(alertMessage);
   });
 
   it('renders link to help page', () => {
-    const helpLink = vm.$el.querySelector('.js-help-path');
+    const helpLink = wrapper.find(GlLink);
 
     expect(helpLink).not.toBeNull();
-    expect(helpLink.innerHTML).toContain('More information');
-    expect(helpLink.getAttribute('href')).toEqual(helpPath);
+    expect(helpLink.text()).toContain('More information');
+    expect(helpLink.attributes().href).toEqual(helpPath);
   });
 });