From b2c5fd5ae1a6f8fc7dc73da6b53d7f72c4079192 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 26 Sep 2023 10:40:35 +0200
Subject: [PATCH] Use CiBadgeLink instead of CiIcon for Pipeline Mini Graph

Changelog: changed
---
 .../components/header/pipeline_status.vue     |  2 +-
 .../legacy_pipeline_stage.vue                 | 17 ++++++------
 .../linked_pipelines_mini_list.vue            | 24 +++++++----------
 .../components/commit_box_pipeline_status.vue |  2 +-
 .../components/mr_widget_pipeline.vue         | 14 ++++++----
 .../vue_shared/components/ci_badge_link.vue   | 16 +++++++++---
 .../mr_widget_options.vue                     |  2 +-
 .../details/ci_resource_header_spec.js        |  2 ++
 .../legacy_pipeline_stage_spec.js             | 15 ++---------
 .../linked_pipelines_mini_list_spec.js        | 26 -------------------
 .../__snapshots__/last_commit_spec.js.snap    |  2 ++
 .../components/ci_badge_link_spec.js          |  2 +-
 12 files changed, 49 insertions(+), 75 deletions(-)

diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
index e33ce66ca66b42..44cf11acfe2004 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
@@ -158,7 +158,7 @@ export default {
         <a :href="status.detailsPath" class="gl-mr-auto">
           <ci-badge-link
             :status="status"
-            badge-size="md"
+            size="md"
             :show-text="false"
             data-testid="pipeline-status-icon"
           />
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
index bbe0f1fbefc9ca..34640d49b807e6 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
@@ -13,7 +13,7 @@
  */
 
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { createAlert } from '~/alert';
 import eventHub from '~/ci/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -33,7 +33,7 @@ export default {
     positionFixed: true,
   },
   components: {
-    CiIcon,
+    CiBadgeLink,
     GlLoadingIcon,
     GlDropdown,
     LegacyJobItem,
@@ -126,14 +126,13 @@ export default {
     @show="onShowDropdown"
   >
     <template #button-content>
-      <ci-icon
-        is-borderless
-        is-interactive
-        css-classes="gl-rounded-full"
-        :is-active="isDropdownOpen"
-        :size="24"
+      <ci-badge-link
         :status="stage.status"
-        class="gl-display-inline-flex gl-align-items-center gl-border gl-z-index-1"
+        size="md"
+        :show-text="false"
+        :show-tooltip="false"
+        :use-link="false"
+        class="gl-mb-0!"
       />
     </template>
     <div v-if="isLoading" class="gl--flex-center gl-p-2" data-testid="pipeline-stage-loading-state">
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
index 8567654a89ec00..cc703d29e23663 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { accessValue } from './accessors/linked_pipelines_accessors';
 /**
  * Renders the upstream/downstream portions of the pipeline mini graph.
@@ -11,7 +11,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    CiIcon,
+    CiBadgeLink,
   },
   inject: {
     dataMethod: {
@@ -99,24 +99,18 @@ export default {
     }"
     class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
   >
-    <a
+    <ci-badge-link
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
       v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
-      :href="pipeline.path"
+      :status="pipelineStatus(pipeline)"
+      size="md"
+      :show-text="false"
+      :show-tooltip="false"
       :class="triggerButtonClass(pipeline)"
-      class="linked-pipeline-mini-item gl-display-inline-flex gl-mr-2 gl-my-2 gl-rounded-full gl-vertical-align-middle"
+      class="linked-pipeline-mini-item gl-mb-0!"
       data-testid="linked-pipeline-mini-item"
-    >
-      <ci-icon
-        is-borderless
-        is-interactive
-        css-classes="gl-rounded-full"
-        :size="24"
-        :status="pipelineStatus(pipeline)"
-        class="gl-align-items-center gl-border gl-display-inline-flex"
-      />
-    </a>
+    />
 
     <a
       v-if="shouldRenderCounter"
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
index 8072116e2f5445..0feaf8db82bb0f 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
@@ -67,7 +67,7 @@ export default {
       v-else
       :status="pipelineStatus"
       :details-path="pipelineStatus.detailsPath"
-      badge-size="md"
+      size="md"
       :show-text="false"
     />
   </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index bfcd46103796a8..8eec961f8375ed 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
 import PipelineArtifacts from '~/ci/pipelines_page/components/pipelines_artifacts.vue';
 import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
@@ -21,7 +21,7 @@ import { MT_MERGE_STRATEGY } from '../constants';
 export default {
   name: 'MRWidgetPipeline',
   components: {
-    CiIcon,
+    CiBadgeLink,
     GlLink,
     GlLoadingIcon,
     GlIcon,
@@ -194,9 +194,13 @@ export default {
       </p>
     </template>
     <template v-else-if="hasPipeline">
-      <a :href="status.details_path" class="gl-align-self-start gl-mt-2 gl-mr-3">
-        <ci-icon :status="status" :size="24" class="gl-display-flex" />
-      </a>
+      <ci-badge-link
+        :status="status"
+        :href="status.details_path"
+        size="md"
+        :show-text="false"
+        class="gl-align-self-start gl-mt-2 gl-mr-3"
+      />
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">
           <div class="media-body">
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 036c03a9a1e8bd..3cd00972e17894 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -57,17 +57,27 @@ export default {
         return badgeSizeOptions[value] !== undefined;
       },
     },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    useLink: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
   },
   computed: {
     isNotLargeBadgeSize() {
-      return this.badgeSize !== badgeSizeOptions.lg;
+      return this.size !== badgeSizeOptions.lg;
     },
     title() {
-      return !this.showText ? this.status?.text : '';
+      return this.showTooltip && !this.showText ? this.status?.text : '';
     },
     detailsPath() {
       // For now, this can either come from graphQL with camelCase or REST API in snake_case
-      return this.status.detailsPath || this.status.details_path;
+      return this.useLink && (this.status.detailsPath || this.status.details_path);
     },
     badgeStyles() {
       switch (this.status.icon) {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 4f8df5b78fd10f..a915e0b8bd93c7 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -257,8 +257,8 @@ export default {
     />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"
-      data-testid="pipeline-container"
       :mr="mr"
+      data-testid="pipeline-container"
     />
     <mr-widget-approvals v-if="shouldRenderApprovals" :mr="mr" :service="service" />
     <report-widget-container>
diff --git a/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js b/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
index 25d1dd816784fe..46c6aa905920a0 100644
--- a/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
+++ b/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
@@ -94,6 +94,8 @@ describe('CiResourceHeader', () => {
             showText: true,
             size: 'sm',
             status: pipelineStatus,
+            showTooltip: true,
+            useLink: true,
           });
         }
       });
diff --git a/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js b/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js
index 30a0b868c5f45f..4b357a9fc7c988 100644
--- a/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js
+++ b/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js
@@ -2,7 +2,7 @@ import { GlDropdown } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import LegacyPipelineStage from '~/ci/pipeline_mini_graph/legacy_pipeline_stage.vue';
@@ -52,7 +52,7 @@ describe('Pipelines stage component', () => {
   });
 
   const findCiActionBtn = () => wrapper.find('.js-ci-action');
-  const findCiIcon = () => wrapper.findComponent(CiIcon);
+  const findCiIcon = () => wrapper.findComponent(CiBadgeLink);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
   const findDropdownMenu = () =>
@@ -106,17 +106,6 @@ describe('Pipelines stage component', () => {
       expect(findDropdownToggle().exists()).toBe(true);
       expect(findCiIcon().exists()).toBe(true);
     });
-
-    it('renders a borderless ci-icon', () => {
-      expect(findCiIcon().exists()).toBe(true);
-      expect(findCiIcon().props('isBorderless')).toBe(true);
-      expect(findCiIcon().classes('borderless')).toBe(true);
-    });
-
-    it('renders a ci-icon with a custom border class', () => {
-      expect(findCiIcon().exists()).toBe(true);
-      expect(findCiIcon().classes('gl-border')).toBe(true);
-    });
   });
 
   describe('when user opens dropdown and stage request is successful', () => {
diff --git a/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js b/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
index 0396029cdafa07..3c9d235bfccdc2 100644
--- a/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
+++ b/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
@@ -50,19 +50,6 @@ describe('Linked pipeline mini list', () => {
       expect(findCiIcon().exists()).toBe(true);
     });
 
-    it('should render a borderless ci-icon', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().props('isBorderless')).toBe(true);
-      expect(findCiIcon().classes('borderless')).toBe(true);
-    });
-
-    it('should render a ci-icon with a custom border class', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().classes('gl-border')).toBe(true);
-    });
-
     it('should render the correct ci status icon', () => {
       expect(findCiIcon().classes('ci-status-icon-running')).toBe(true);
     });
@@ -124,19 +111,6 @@ describe('Linked pipeline mini list', () => {
       expect(findLinkedPipelineMiniList().classes('is-downstream')).toBe(true);
     });
 
-    it('should render a borderless ci-icon', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().props('isBorderless')).toBe(true);
-      expect(findCiIcon().classes('borderless')).toBe(true);
-    });
-
-    it('should render a ci-icon with a custom border class', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().classes('gl-border')).toBe(true);
-    });
-
     it('should render the pipeline counter', () => {
       expect(findLinkedPipelineCounter().exists()).toBe(true);
     });
diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index 208af4ba24a749..1a5301c5525d62 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -14,8 +14,10 @@ exports[`Repository last commit component renders commit widget 1`] = `
         aria-label="Pipeline: failed"
         class="js-commit-pipeline"
         details-path="https://test.com/pipeline"
+        showtooltip="true"
         size="md"
         status="[object Object]"
+        uselink="true"
       />
     </div>
     <gl-button-group-stub
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
index 46fe5a0a74e757..e1660225a5c3d9 100644
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
@@ -151,7 +151,7 @@ describe('CI Badge Link Component', () => {
   });
 
   it('should have class `gl-px-2` when `showText` is false', () => {
-    createComponent({ status: statuses.success, size: 'lg', showText: false });
+    createComponent({ status: statuses.success, size: 'md', showText: false });
 
     expect(findBadge().classes()).toContain('gl-px-2');
   });
-- 
GitLab