1 files changed, 40 insertions, 85 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 9f4cfa6f690..a2b6b4642c9 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -6,20 +6,11 @@ import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
  *
  * Receives status object containing:
  * status: {
- *   group:"running" // used for CSS class
- *   icon: "icon_status_running" // used to render the icon
+ *   icon: "status_running" // used to render the icon and CSS class
+ *   text: "Running",
+ *   detailsPath: '/project1/jobs/1' // can also be details_path
  * }
  *
- * Used in:
- * - Extended MR Popover
- * - Jobs show view header
- * - Jobs show view sidebar
- * - Jobs table
- * - Linked pipelines
- * - Pipeline graph
- * - Pipeline mini graph
- * - Pipeline show view badge
- * - Pipelines table Badge
  */
 
 export default {
@@ -35,13 +26,8 @@ export default {
       type: Object,
       required: true,
       validator(status) {
-        const { group, icon } = status;
-        return (
-          typeof group === 'string' &&
-          group.length &&
-          typeof icon === 'string' &&
-          icon.startsWith('status_')
-        );
+        const { icon } = status;
+        return typeof icon === 'string' && icon.startsWith('status_');
       },
     },
     showStatusText: {
@@ -62,66 +48,47 @@ export default {
   },
   computed: {
     title() {
-      return this.showTooltip && !this.showStatusText ? this.status?.text : '';
+      if (this.showTooltip) {
+        // show tooltip only when not showing text already
+        return !this.showStatusText ? this.status?.text : null;
+      }
+      return null;
     },
-    detailsPath() {
-      // For now, this can either come from graphQL with camelCase or REST API in snake_case
-      if (!this.useLink) {
-        return null;
+    ariaLabel() {
+      // show aria-label only when text is not rendered
+      if (!this.showStatusText) {
+        return this.status?.text;
       }
-      return this.status.detailsPath || this.status.details_path;
+      return null;
     },
-    wrapperStyleClasses() {
-      const status = this.status.group;
-      return `ci-status-icon ci-status-icon-${status} gl-rounded-full gl-justify-content-center gl-line-height-0`;
+    href() {
+      // href can come from GraphQL (camelCase) or REST API (snake_case)
+      if (this.useLink) {
+        return this.status.detailsPath || this.status.details_path;
+      }
+      return null;
     },
     icon() {
-      return this.status.icon;
+      if (this.status.icon) {
+        return `${this.status.icon}_borderless`;
+      }
+      return null;
     },
-    badgeStyles() {
+    variant() {
       switch (this.status.icon) {
         case 'status_success':
-          return {
-            textColor: 'gl-text-green-700',
-            variant: 'success',
-          };
+          return 'success';
         case 'status_warning':
-          return {
-            textColor: 'gl-text-orange-700',
-            variant: 'warning',
-          };
+        case 'status_pending':
+          return 'warning';
         case 'status_failed':
-          return {
-            textColor: 'gl-text-red-700',
-            variant: 'danger',
-          };
+          return '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',
-          };
+          return 'info';
         // 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',
-          };
+          return 'neutral';
       }
     },
   },
@@ -131,30 +98,18 @@ export default {
   <gl-badge
     v-gl-tooltip
     class="ci-icon gl-p-2"
+    :class="`ci-icon-variant-${variant}`"
+    :variant="variant"
     :title="title"
-    :aria-label="title"
-    :href="detailsPath"
+    :aria-label="ariaLabel"
+    :href="href"
     size="md"
-    :variant="badgeStyles.variant"
     data-testid="ci-icon"
     @click="$emit('ciStatusBadgeClick')"
   >
-    <span
-      class="ci-icon-wrapper"
-      :class="[
-        wrapperStyleClasses,
-        {
-          'gl-display-inline-block gl-vertical-align-top': showStatusText,
-        },
-      ]"
-    >
-      <gl-icon :name="icon" :aria-label="status.icon" /> </span
-    ><span
-      v-if="showStatusText"
-      class="gl-mx-2 gl-white-space-nowrap"
-      :class="badgeStyles.textColor"
-      data-testid="ci-icon-text"
-      >{{ status.text }}</span
-    >
+    <span class="ci-icon-gl-icon-wrapper"><gl-icon :name="icon" /></span
+    ><span v-if="showStatusText" class="gl-mx-2 gl-white-space-nowrap" data-testid="ci-icon-text">{{
+      status.text
+    }}</span>
   </gl-badge>
 </template>