1 files changed, 43 insertions, 25 deletions
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index b69e6f9686f..8e8202246a2 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -1,10 +1,13 @@
 <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,35 +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="js-stuck-with-tags gl-mb-0">
-      {{
-        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">
-        {{ 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="js-stuck-no-runners gl-mb-0">
-      {{
-        s__(`Job|This job is stuck because the project
-  doesn't have any runners online assigned to it.`)
-      }}
-    </p>
-    <p v-else class="js-stuck-no-active-runner gl-mb-0">
-      {{
-        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" class="js-runners-path">
+    <gl-link v-if="runnersPath" :href="runnersPath">
       {{ __('CI settings') }}
     </gl-link>
-  </div>
+  </gl-alert>
 </template>