1 files changed, 37 insertions, 31 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
index bde0dd53aac..d1bac078642 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlPopover, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
 import { SCHEDULE_ORIGIN } from '../../constants';
 
 export default {
@@ -7,10 +7,16 @@ export default {
     GlLink,
     GlPopover,
     GlSprintf,
+    GlBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: {
+    targetProjectFullPath: {
+      default: '',
+    },
+  },
   props: {
     pipeline: {
       type: Object,
@@ -25,11 +31,6 @@ export default {
       required: true,
     },
   },
-  inject: {
-    targetProjectFullPath: {
-      default: '',
-    },
-  },
   computed: {
     user() {
       return this.pipeline.user;
@@ -50,7 +51,6 @@ export default {
   <div class="table-section section-10 d-none d-md-block pipeline-tags">
     <gl-link
       :href="pipeline.path"
-      class="js-pipeline-url-link js-onboarding-pipeline-item"
       data-testid="pipeline-url-link"
       data-qa-selector="pipeline_url_link"
     >
@@ -58,46 +58,49 @@ export default {
     </gl-link>
     <div class="label-container">
       <gl-link v-if="isScheduled" :href="pipelineScheduleUrl" target="__blank">
-        <span
+        <gl-badge
           v-gl-tooltip
           :title="__('This pipeline was triggered by a schedule.')"
-          class="badge badge-info"
+          variant="info"
+          size="sm"
           data-testid="pipeline-url-scheduled"
-          >{{ __('Scheduled') }}</span
+          >{{ __('Scheduled') }}</gl-badge
         >
       </gl-link>
-      <span
+      <gl-badge
         v-if="pipeline.flags.latest"
         v-gl-tooltip
         :title="__('Latest pipeline for the most recent commit on this branch')"
-        class="js-pipeline-url-latest badge badge-success"
+        variant="success"
+        size="sm"
         data-testid="pipeline-url-latest"
-        >{{ __('latest') }}</span
+        >{{ __('latest') }}</gl-badge
       >
-      <span
+      <gl-badge
         v-if="pipeline.flags.yaml_errors"
         v-gl-tooltip
         :title="pipeline.yaml_errors"
-        class="js-pipeline-url-yaml badge badge-danger"
+        variant="danger"
+        size="sm"
         data-testid="pipeline-url-yaml"
-        >{{ __('yaml invalid') }}</span
+        >{{ __('yaml invalid') }}</gl-badge
       >
-      <span
+      <gl-badge
         v-if="pipeline.flags.failure_reason"
         v-gl-tooltip
         :title="pipeline.failure_reason"
-        class="js-pipeline-url-failure badge badge-danger"
+        variant="danger"
+        size="sm"
         data-testid="pipeline-url-failure"
-        >{{ __('error') }}</span
+        >{{ __('error') }}</gl-badge
       >
       <gl-link
         v-if="pipeline.flags.auto_devops"
         :id="`pipeline-url-autodevops-${pipeline.id}`"
         tabindex="0"
-        class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
         data-testid="pipeline-url-autodevops"
         role="button"
-        >{{ __('Auto DevOps') }}</gl-link
+        ><gl-badge variant="info" size="sm">{{ __('Auto DevOps') }}</gl-badge></gl-link
       >
       <gl-popover
         :target="`pipeline-url-autodevops-${pipeline.id}`"
@@ -113,7 +116,7 @@ export default {
                 )
               "
             >
-              <template #strong="{content}">
+              <template #strong="{ content }">
                 <b>{{ content }}</b>
               </template>
             </gl-sprintf>
@@ -123,13 +126,14 @@ export default {
           __('Learn more about Auto DevOps')
         }}</gl-link>
       </gl-popover>
-      <span
+      <gl-badge
         v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck badge badge-warning"
+        variant="warning"
+        size="sm"
         data-testid="pipeline-url-stuck"
-        >{{ __('stuck') }}</span
+        >{{ __('stuck') }}</gl-badge
       >
-      <span
+      <gl-badge
         v-if="pipeline.flags.detached_merge_request_pipeline"
         v-gl-tooltip
         :title="
@@ -137,17 +141,19 @@ export default {
             'Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.',
           )
         "
-        class="js-pipeline-url-detached badge badge-info"
+        variant="info"
+        size="sm"
         data-testid="pipeline-url-detached"
-        >{{ __('detached') }}</span
+        >{{ __('detached') }}</gl-badge
       >
-      <span
+      <gl-badge
         v-if="isInFork"
         v-gl-tooltip
         :title="__('Pipeline ran in fork of project')"
-        class="badge badge-info"
+        variant="info"
+        size="sm"
         data-testid="pipeline-url-fork"
-        >{{ __('fork') }}</span
+        >{{ __('fork') }}</gl-badge
       >
     </div>
   </div>