1 files changed, 65 insertions, 11 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 7b5ded9348f..9023807eba3 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from './ci_icon.vue';
 /**
  * Renders CI Badge link with CI icon and status text based on
@@ -26,8 +26,8 @@ import CiIcon from './ci_icon.vue';
 
 export default {
   components: {
-    GlLink,
     CiIcon,
+    GlBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -42,6 +42,11 @@ export default {
       required: false,
       default: true,
     },
+    badgeSize: {
+      type: String,
+      required: false,
+      default: 'md',
+    },
   },
   computed: {
     title() {
@@ -51,27 +56,76 @@ export default {
       // For now, this can either come from graphQL with camelCase or REST API in snake_case
       return this.status.detailsPath || this.status.details_path;
     },
-    cssClass() {
-      const className = this.status.group;
-      return className ? `ci-status ci-${className}` : 'ci-status';
+    badgeStyles() {
+      switch (this.status.icon) {
+        case 'status_success':
+          return {
+            textColor: 'gl-text-green-700',
+            variant: 'success',
+          };
+        case 'status_warning':
+          return {
+            textColor: 'gl-text-orange-700',
+            variant: 'warning',
+          };
+        case 'status_failed':
+          return {
+            textColor: 'gl-text-red-700',
+            variant: 'danger',
+          };
+        case 'status_running':
+          return {
+            textColor: 'gl-text-blue-700',
+            variant: 'info',
+          };
+        case 'status_pending':
+          return {
+            textColor: 'gl-text-orange-700',
+            variant: 'warning',
+          };
+        case 'status_canceled':
+          return {
+            textColor: 'gl-text-gray-700',
+            variant: 'neutral',
+          };
+        case 'status_manual':
+          return {
+            textColor: 'gl-text-gray-700',
+            variant: 'neutral',
+          };
+        // default covers the styles for the remainder of CI
+        // statuses that are not explicitly stated here
+        default:
+          return {
+            textColor: 'gl-text-gray-600',
+            variant: 'muted',
+          };
+      }
     },
   },
 };
 </script>
 <template>
-  <gl-link
+  <gl-badge
     v-gl-tooltip
-    class="gl-display-inline-flex gl-align-items-center gl-line-height-0 gl-px-3 gl-py-2 gl-rounded-base"
-    :class="cssClass"
     :title="title"
-    data-qa-selector="status_badge_link"
     :href="detailsPath"
+    :size="badgeSize"
+    :variant="badgeStyles.variant"
+    :data-testid="`ci-badge-${status.text}`"
+    data-qa-selector="status_badge_link"
     @click="$emit('ciStatusBadgeClick')"
   >
     <ci-icon :status="status" />
 
     <template v-if="showText">
-      <span class="gl-ml-2 gl-white-space-nowrap">{{ status.text }}</span>
+      <span
+        class="gl-ml-2 gl-white-space-nowrap"
+        :class="badgeStyles.textColor"
+        data-testid="ci-badge-text"
+      >
+        {{ status.text }}
+      </span>
     </template>
-  </gl-link>
+  </gl-badge>
 </template>