Refactor stuck_block to use our modern components

We switch out the cutoms styles for badges and
alert and instead use our components. Also,
light refactor of the component to be data-driven
instead of repeating templates.

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

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlLink } from '@gitlab/ui';
+import { s__ } from '../../locale';
 /**
  * Renders Stuck Runners block for job's view.
  */
 export default {
   components: {
+    GlAlert,
+    GlBadge,
     GlLink,
   },
   props: {
@@ -22,40 +25,50 @@ export default {
       required: true,
     },
   },
+  computed: {
+    hasNoRunnersWithCorrespondingTags() {
+      return this.tags.length > 0;
+    },
+    stuckData() {
+      if (this.hasNoRunnersWithCorrespondingTags) {
+        return {
+          text: s__(`Job|This job is stuck because you don't have
+                any active runners online or available with any of these tags assigned to them:`),
+          dataTestId: 'job-stuck-with-tags',
+          showTags: true,
+        };
+      } else if (this.hasNoRunnersForProject) {
+        return {
+          text: s__(`Job|This job is stuck because the project
+                doesn't have any runners online assigned to it.`),
+          dataTestId: 'job-stuck-no-runners',
+          showTags: false,
+        };
+      }
+
+      return {
+        text: s__(`Job|This job is stuck because you don't
+              have any active runners that can run this job.`),
+        dataTestId: 'job-stuck-no-active-runners',
+        showTags: false,
+      };
+    },
+  },
 };
 </script>
 <template>
-  <div class="bs-callout bs-callout-warning">
-    <p v-if="tags.length" class="gl-mb-0" data-testid="job-stuck-with-tags">
-      {{
-        s__(`This job is stuck because you don't have
-  any active runners online or available with any of these tags assigned to them:`)
-      }}
-      <span
-        v-for="(tag, index) in tags"
-        :key="index"
-        class="badge badge-primary gl-mr-2"
-        data-testid="badge"
-      >
-        {{ tag }}
-      </span>
+  <gl-alert variant="warning" :dismissible="false">
+    <p class="gl-mb-0" :data-testid="stuckData.dataTestId">
+      {{ stuckData.text }}
+      <template v-if="stuckData.showTags">
+        <gl-badge v-for="tag in tags" :key="tag" variant="info">
+          {{ tag }}
+        </gl-badge>
+      </template>
     </p>
-    <p v-else-if="hasNoRunnersForProject" class="gl-mb-0" data-testid="job-stuck-no-runners">
-      {{
-        s__(`Job|This job is stuck because the project
-  doesn't have any runners online assigned to it.`)
-      }}
-    </p>
-    <p v-else class="gl-mb-0" data-testid="job-stuck-no-active-runners">
-      {{
-        s__(`This job is stuck because you don't
-  have any active runners that can run this job.`)
-      }}
-    </p>
-
     {{ __('Go to project') }}
     <gl-link v-if="runnersPath" :href="runnersPath">
       {{ __('CI settings') }}
     </gl-link>
-  </div>
+  </gl-alert>
 </template>

changelogs/unreleased/230734-change-stuck_block-component-to-use-glbadge.yml

+---
+title: Change the job stuck page to use UI library components
+merge_request: 38618
+author:
+type: changed

locale/gitlab.pot

@@ -13632,6 +13632,12 @@ msgstr ""
 msgid "Job|This job is stuck because the project doesn't have any runners online assigned to it."
 msgstr ""
 
+msgid "Job|This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:"
+msgstr ""
+
+msgid "Job|This job is stuck because you don't have any active runners that can run this job."
+msgstr ""
+
 msgid "Job|for"
 msgstr ""
 
@@ -24793,12 +24799,6 @@ msgstr ""
 msgid "This job is preparing to start"
 msgstr ""
 
-msgid "This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:"
-msgstr ""
-
-msgid "This job is stuck because you don't have any active runners that can run this job."
-msgstr ""
-
 msgid "This job is waiting for resource: "
 msgstr ""
 

spec/frontend/jobs/components/stuck_block_spec.js

-import { GlLink } from '@gitlab/ui';
+import { GlBadge, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import StuckBlock from '~/jobs/components/stuck_block.vue';
 
@@ -27,7 +27,7 @@ describe('Stuck Block Job component', () => {
   const findStuckNoRunners = () => wrapper.find('[data-testid="job-stuck-no-runners"]');
   const findStuckWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"]');
   const findRunnerPathLink = () => wrapper.find(GlLink);
-  const findAllBadges = () => wrapper.findAll('[data-testid="badge"]');
+  const findAllBadges = () => wrapper.findAll(GlBadge);
 
   describe('with no runners for project', () => {
     beforeEach(() => {