From 61f1a3895438bbc353221c94bc8bf91c49dc6109 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 5 Oct 2023 13:39:54 +0200
Subject: [PATCH 1/2] Refactor CiIcon

Refactores CiIcon as SSoT and migrates CiBadgeLink towards it.

Changelog: changed
---
 .../components/job_artifacts_table.vue        |   6 +-
 .../components/details/ci_resource_header.vue |  11 +-
 .../ci/common/private/job_name_component.vue  |   2 +-
 .../ci/job_details/components/job_header.vue  |   6 +-
 .../components/sidebar/job_container_item.vue |   4 +-
 .../components/sidebar/stages_dropdown.vue    |   8 +-
 .../components/job_cells/status_cell.vue      |   6 +-
 .../graph/components/job_item.vue             |   6 +-
 .../graph/components/linked_pipeline.vue      |   8 +-
 .../header/pipeline_details_header.vue        |  11 +-
 .../jobs/components/failed_jobs_table.vue     |   6 +-
 .../components/header/pipeline_status.vue     |  13 +-
 .../legacy_pipeline_stage.vue                 |  13 +-
 .../linked_pipelines_mini_list.vue            |   8 +-
 .../cells/pipeline_schedule_last_pipeline.vue |   7 +-
 .../components/pipeline_status_badge.vue      |  13 +-
 .../runner/components/runner_jobs_table.vue   |   6 +-
 .../graphql/show/runner_jobs.query.graphql    |   2 +-
 .../components/environment_item.vue           |   2 +-
 .../ide/components/ide_status_bar.vue         |   1 -
 .../components/jobs/detail/description.vue    |   2 -
 .../ide/components/pipelines/list.vue         |   2 +-
 .../components/related_issuable_item.vue      |   2 +-
 .../components/commit_box_pipeline_status.vue |  12 +-
 .../components/commit_pipeline_status.vue     |   9 +-
 .../repository/components/last_commit.vue     |   8 +-
 .../terraform/components/states_table.vue     |   8 +-
 .../components/mr_widget_pipeline.vue         |  12 +-
 .../vue_shared/components/ci_badge_link.vue   | 157 -----------------
 .../vue_shared/components/ci_icon.vue         | 129 ++++++++++----
 .../stylesheets/page_bundles/build.scss       |   8 -
 app/helpers/ci/status_helper.rb               |  91 +++++-----
 app/views/ci/status/_badge.html.haml          |  13 --
 app/views/ci/status/_icon.html.haml           |  11 +-
 app/views/projects/branches/_branch.html.haml |   2 +-
 app/views/projects/ci/builds/_build.html.haml |   2 +-
 .../_generic_commit_status.html.haml          |   2 +-
 .../issues/_related_branches.html.haml        |   4 +-
 app/views/projects/jobs/_header.html.haml     |   2 +-
 app/views/projects/tags/_tag.html.haml        |   2 +-
 .../runner/components/runner_job_failure.vue  |   6 +-
 .../components/tabs/base_tab.vue              |   6 +-
 .../components/project_pipeline.vue           |  15 +-
 .../components/runner_job_failure_spec.js     |   9 +-
 locale/gitlab.pot                             |   6 -
 qa/qa/ee/page/operations_dashboard.rb         |   4 +-
 .../{ci_badge_link.rb => ci_icon.rb}          |  10 +-
 qa/qa/page/project/job/show.rb                |   2 +-
 qa/qa/page/project/pipeline/index.rb          |   4 +-
 qa/qa/page/project/pipeline/show.rb           |   2 +-
 spec/features/admin/admin_jobs_spec.rb        |   2 +-
 spec/features/commits_spec.rb                 |   2 +-
 spec/features/dashboard/projects_spec.rb      |   4 +-
 .../user_sees_merge_request_pipelines_spec.rb |  14 +-
 .../merge_request/user_sees_pipelines_spec.rb |   2 +-
 .../commit/user_sees_pipelines_tab_spec.rb    |   2 +-
 .../projects/jobs/user_browses_jobs_spec.rb   |   8 +-
 spec/features/projects/jobs_spec.rb           |   2 +-
 .../projects/pipelines/pipeline_spec.rb       |  18 +-
 .../projects/pipelines/pipelines_spec.rb      |  16 +-
 .../components/job_artifacts_table_spec.js    |   9 +-
 .../details/ci_resource_header_spec.js        |   7 +-
 .../ci/common/pipelines_table_spec.js         |  10 +-
 .../job_details/components/job_header_spec.js |   6 +-
 .../sidebar/stages_dropdown_spec.js           |   5 +-
 .../jobs_page/components/jobs_table_spec.js   |   6 +-
 .../graph/components/job_item_spec.js         |  20 +--
 .../header/pipeline_details_header_spec.js    |   4 +-
 .../legacy_pipeline_stage_spec.js             |   4 +-
 .../pipeline_schedule_last_pipeline_spec.js   |  12 +-
 .../commit_box_pipeline_status_spec.js        |  12 +-
 .../jobs/detail/description_spec.js           |   4 -
 .../frontend/ide/components/jobs/item_spec.js |   2 +-
 .../__snapshots__/last_commit_spec.js.snap    |   4 +-
 .../components/ci_badge_link_spec.js          | 158 ------------------
 .../vue_shared/components/ci_icon_spec.js     |  42 +----
 spec/helpers/ci/status_helper_spec.rb         |  86 ++++------
 spec/views/ci/status/_badge.html.haml_spec.rb |  92 ----------
 .../commits/_commit.html.haml_spec.rb         |   6 +-
 79 files changed, 388 insertions(+), 852 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/ci_badge_link.vue
 delete mode 100644 app/views/ci/status/_badge.html.haml
 rename qa/qa/page/component/{ci_badge_link.rb => ci_icon.rb} (86%)
 delete mode 100644 spec/frontend/vue_shared/components/ci_badge_link_spec.js
 delete mode 100644 spec/views/ci/status/_badge.html.haml_spec.rb

diff --git a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
index d8f9eb65236fd9..de37aa431e6079 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
@@ -10,7 +10,7 @@ import {
   GlFormCheckbox,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -68,7 +68,7 @@ export default {
     GlPagination,
     GlFormCheckbox,
     TimeAgo,
-    CiBadgeLink,
+    CiIcon,
     JobCheckbox,
     ArtifactsBulkDelete,
     BulkDeleteModal,
@@ -442,7 +442,7 @@ export default {
       <template #cell(job)="{ item }">
         <div class="gl-display-inline-flex gl-align-items-center gl-mb-3 gl-gap-3">
           <span data-testid="job-artifacts-job-status">
-            <ci-badge-link :status="item.detailedStatus" size="sm" :show-text="false" />
+            <ci-icon :status="item.detailedStatus" />
           </span>
           <gl-link :href="item.webPath">
             {{ item.name }}
diff --git a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
index 6673785ffd2b37..29009c14e1bbba 100644
--- a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
+++ b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
@@ -2,13 +2,13 @@
 import { GlAvatar, GlAvatarLink, GlBadge } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isNumeric } from '~/lib/utils/number_utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CiResourceAbout from './ci_resource_about.vue';
 import CiResourceHeaderSkeletonLoader from './ci_resource_header_skeleton_loader.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     CiResourceAbout,
     CiResourceHeaderSkeletonLoader,
     GlAvatar,
@@ -102,12 +102,11 @@ export default {
             {{ versionBadgeText }}
           </gl-badge>
         </span>
-        <ci-badge-link
+        <ci-icon
           v-if="hasPipelineStatus"
-          class="gl-mt-2"
           :status="pipelineStatus"
-          size="sm"
-          show-text
+          show-status-text
+          class="gl-mt-2"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/ci/common/private/job_name_component.vue b/app/assets/javascripts/ci/common/private/job_name_component.vue
index 1c7f5a7476d01c..b4e831d69d4bb0 100644
--- a/app/assets/javascripts/ci/common/private/job_name_component.vue
+++ b/app/assets/javascripts/ci/common/private/job_name_component.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <span class="mw-100 gl-display-flex gl-align-items-center gl-flex-grow-1">
-    <ci-icon :size="iconSize" :status="status" class="gl-line-height-0" />
+    <ci-icon :size="iconSize" :status="status" :show-tooltip="false" class="gl-line-height-0" />
     <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block">
       {{ name }}
     </span>
diff --git a/app/assets/javascripts/ci/job_details/components/job_header.vue b/app/assets/javascripts/ci/job_details/components/job_header.vue
index 00d15f870643e5..1aa83a94bc5680 100644
--- a/app/assets/javascripts/ci/job_details/components/job_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_header.vue
@@ -4,12 +4,12 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { glEmojiTag } from '~/emoji';
 import { __, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     TimeagoTooltip,
     GlButton,
     GlAvatarLink,
@@ -113,7 +113,7 @@ export default {
       </div>
     </div>
     <section class="header-main-content gl-display-flex gl-align-items-center gl-mr-3">
-      <ci-badge-link class="gl-mr-3" :status="status" />
+      <ci-icon class="gl-mr-3" :status="status" show-status-text />
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('Started') }}</template>
       <template v-else>{{ __('Created') }}</template>
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue b/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue
index 8e87f118fa4ac1..4ec9044a21cbd1 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue
@@ -63,11 +63,11 @@ export default {
       <gl-icon
         v-if="isActive"
         name="arrow-right"
+        :show-tooltip="false"
         class="icon-arrow-right gl-absolute gl-display-block"
-        :size="14"
       />
 
-      <ci-icon :status="job.status" class="gl-mr-3" :size="14" />
+      <ci-icon :status="job.status" :show-tooltip="false" class="gl-mr-3" />
 
       <span class="gl-text-truncate gl-w-full">{{ jobName }}</span>
 
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
index 7744395734f6d8..e6dadbebe8accf 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLink, GlDisclosureDropdown, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { Mousetrap } from '~/lib/mousetrap';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -14,7 +14,7 @@ export default {
     GlDisclosureDropdown,
     GlLink,
     GlSprintf,
-    CiBadgeLink,
+    CiIcon,
   },
   props: {
     pipeline: {
@@ -108,9 +108,9 @@ export default {
           >
         </template>
         <template #status>
-          <ci-badge-link
+          <ci-icon
             :status="pipeline.details.status"
-            size="sm"
+            show-status-text
             data-testid="pipeline-status-link"
           />
         </template>
diff --git a/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue b/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue
index a2b6a4301381a7..efa74d86bd6e98 100644
--- a/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue
+++ b/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue
@@ -1,14 +1,14 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
 import { formatTime } from '~/lib/utils/datetime_utility';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   iconSize: 12,
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlIcon,
     TimeAgoTooltip,
   },
@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div>
-    <ci-badge-link :status="job.detailedStatus" />
+    <ci-icon :status="job.detailedStatus" show-status-text />
     <div class="gl-font-sm gl-text-secondary gl-mt-2 gl-ml-3">
       <div v-if="duration" data-testid="job-duration">
         <gl-icon name="timer" :size="$options.iconSize" data-testid="duration-icon" />
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
index bb36ac8b6aba0e..ab12e4c05e3045 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
@@ -5,7 +5,7 @@ import delayedJobMixin from '~/ci/mixins/delayed_job_mixin';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, s__, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ActionComponent from '../../../common/private/job_action_component.vue';
 import JobNameComponent from '../../../common/private/job_name_component.vue';
 import { BRIDGE_KIND, RETRY_ACTION_TITLE, SINGLE_JOB, SKIP_RETRY_MODAL_KEY } from '../constants';
@@ -58,7 +58,7 @@ export default {
   hoverClass: 'gl-shadow-x0-y0-b3-s1-blue-500',
   components: {
     ActionComponent,
-    CiBadgeLink,
+    CiIcon,
     GlBadge,
     GlForm,
     GlFormCheckbox,
@@ -329,7 +329,7 @@ export default {
       @mouseout="hideTooltips"
     >
       <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
-        <ci-badge-link :status="job.status" size="md" :show-text="false" :use-link="false" />
+        <ci-icon :status="job.status" size="md" :use-link="false" />
         <div class="gl-pl-3 gl-pr-3 gl-display-flex gl-flex-direction-column gl-pipeline-job-width">
           <div class="gl-text-truncate gl-pr-9 gl-line-height-normal">{{ job.name }}</div>
           <div
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index 5960eea5b4f4dd..511eac79fb58a5 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -13,7 +13,7 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
 import CancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import RetryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { reportToSentry } from '~/ci/utils';
 import { ACTION_FAILURE, DOWNSTREAM, UPSTREAM } from '../constants';
 
@@ -22,7 +22,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlBadge,
     GlButton,
     GlLink,
@@ -242,11 +242,9 @@ export default {
     </gl-tooltip>
     <div class="gl-bg-white gl-border gl-p-3 gl-rounded-lg gl-w-full" :class="cardClasses">
       <div class="gl-display-flex gl-gap-x-3">
-        <ci-badge-link
+        <ci-icon
           v-if="!pipelineIsLoading"
           :status="pipelineStatus"
-          size="md"
-          :show-text="false"
           :use-link="false"
           class="gl-align-self-start"
         />
diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
index 51a68f6619a4e4..5c1841615ab37b 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
@@ -17,7 +17,7 @@ import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility'; // eslint-
 import { __, s__, sprintf, formatNumber } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants';
@@ -38,7 +38,7 @@ export default {
   pipelineRetry: 'pipelineRetry',
   finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'],
   components: {
-    CiBadgeLink,
+    CiIcon,
     ClipboardButton,
     GlAlert,
     GlBadge,
@@ -403,7 +403,12 @@ export default {
           {{ commitTitle }}
         </h3>
         <div>
-          <ci-badge-link :status="detailedStatus" class="gl-display-inline-block gl-mb-3" />
+          <ci-icon
+            :status="detailedStatus"
+            show-status-text
+            :show-link="false"
+            class="gl-display-inline-block gl-mb-3"
+          />
           <div class="gl-ml-2 gl-mb-3 gl-display-inline-block gl-h-6">
             <gl-link
               v-if="user"
diff --git a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
index 4752fbb3e96c81..287f6e045c6ca4 100644
--- a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
@@ -5,7 +5,7 @@ import { __, s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import Tracking from '~/tracking';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { TRACKING_CATEGORIES } from '~/ci/constants';
 import RetryFailedJobMutation from '../graphql/mutations/retry_failed_job.mutation.graphql';
 import { DEFAULT_FIELDS } from '../../constants';
@@ -14,7 +14,7 @@ export default {
   fields: DEFAULT_FIELDS,
   retry: __('Retry'),
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlButton,
     GlLink,
     GlTableLite,
@@ -80,7 +80,7 @@ export default {
       <div
         class="gl-display-flex gl-align-items-center gl-lg-justify-content-start gl-justify-content-end"
       >
-        <ci-badge-link :status="item.detailedStatus" :show-text="false" class="gl-mr-3" />
+        <ci-icon :status="item.detailedStatus" class="gl-mr-3" />
         <div class="gl-text-truncate">
           <gl-link
             :href="item.detailedStatus.detailsPath"
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 44cf11acfe2004..7c4a07e3f83a16 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
@@ -7,7 +7,7 @@ import getPipelineQuery from '~/ci/pipeline_editor/graphql/queries/pipeline.quer
 import getPipelineEtag from '~/ci/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql';
 import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
 import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue';
 
@@ -25,7 +25,7 @@ export const i18n = {
 export default {
   i18n,
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlButton,
     GlIcon,
     GlLink,
@@ -155,14 +155,7 @@ export default {
     </template>
     <template v-else>
       <div class="gl-text-truncate gl-md-max-w-50p gl-mr-1">
-        <a :href="status.detailsPath" class="gl-mr-auto">
-          <ci-badge-link
-            :status="status"
-            size="md"
-            :show-text="false"
-            data-testid="pipeline-status-icon"
-          />
-        </a>
+        <ci-icon :status="status" data-testid="pipeline-status-icon" />
         <span class="gl-font-weight-bold">
           <gl-sprintf :message="$options.i18n.pipelineInfo">
             <template #id="{ content }">
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 34640d49b807e6..ed78a335453b60 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 CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.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: {
-    CiBadgeLink,
+    CiIcon,
     GlLoadingIcon,
     GlDropdown,
     LegacyJobItem,
@@ -126,14 +126,7 @@ export default {
     @show="onShowDropdown"
   >
     <template #button-content>
-      <ci-badge-link
-        :status="stage.status"
-        size="md"
-        :show-text="false"
-        :show-tooltip="false"
-        :use-link="false"
-        class="gl-mb-0!"
-      />
+      <ci-icon :status="stage.status" :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">
       <gl-loading-icon size="sm" class="gl-mr-3" />
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 cc703d29e23663..4dace6b501aeec 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 CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.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: {
-    CiBadgeLink,
+    CiIcon,
   },
   inject: {
     dataMethod: {
@@ -99,13 +99,11 @@ export default {
     }"
     class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
   >
-    <ci-badge-link
+    <ci-icon
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
       v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
       :status="pipelineStatus(pipeline)"
-      size="md"
-      :show-text="false"
       :show-tooltip="false"
       :class="triggerButtonClass(pipeline)"
       class="linked-pipeline-mini-item gl-mb-0!"
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue b/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue
index 92f461c72d7ada..d979c0efaf2398 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue
@@ -1,9 +1,9 @@
 <script>
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
   },
   props: {
     schedule: {
@@ -24,9 +24,10 @@ export default {
 
 <template>
   <div data-testid="last-pipeline-status">
-    <ci-badge-link
+    <ci-icon
       v-if="hasPipeline"
       :status="lastPipelineStatus"
+      show-status-text
       class="gl-vertical-align-middle"
     />
     <span v-else data-testid="pipeline-schedule-status-text">
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
index 20e2c7e9dce11b..4355906b9beb72 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
@@ -1,12 +1,12 @@
 <script>
 import { TRACKING_CATEGORIES } from '~/ci/constants';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     PipelinesTimeago,
   },
   mixins: [Tracking.mixin()],
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     trackClick() {
-      this.track('click_ci_status_badge', { label: TRACKING_CATEGORIES.table });
+      this.track('click_ci_icon', { label: TRACKING_CATEGORIES.table });
     },
   },
 };
@@ -31,7 +31,12 @@ export default {
 
 <template>
   <div>
-    <ci-badge-link class="gl-mb-3" :status="pipelineStatus" @ciStatusBadgeClick="trackClick" />
+    <ci-icon
+      class="gl-mb-3"
+      :status="pipelineStatus"
+      show-status-text
+      @ciStatusBadgeClick="trackClick"
+    />
     <pipelines-timeago :pipeline="pipeline" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue b/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue
index 5d8e9dcdee2817..653d9b053304a8 100644
--- a/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue
@@ -3,7 +3,7 @@ import { GlTableLite } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { formatTime } from '~/lib/utils/datetime_utility';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import RunnerTags from '~/ci/runner/components/runner_tags.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { tableField } from '../utils';
@@ -11,7 +11,7 @@ import LinkCell from './cells/link_cell.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlTableLite,
     LinkCell,
     RunnerTags,
@@ -80,7 +80,7 @@ export default {
     fixed
   >
     <template #cell(status)="{ item = {} }">
-      <ci-badge-link v-if="item.detailedStatus" :status="item.detailedStatus" />
+      <ci-icon v-if="item.detailedStatus" :status="item.detailedStatus" show-status-text />
     </template>
 
     <template #cell(job)="{ item = {} }">
diff --git a/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql b/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql
index b6d6996a8577f7..611de43b99517e 100644
--- a/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql
+++ b/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql
@@ -8,7 +8,7 @@ query getRunnerJobs($id: CiRunnerID!, $first: Int, $last: Int, $before: String,
       nodes {
         id
         detailedStatus {
-          # fields for `<ci-badge-link>`
+          # fields for `<ci-icon>`
           id
           detailsPath
           group
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 08a1eacec7ac54..47edec8dcb0d9a 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -752,7 +752,7 @@ export default {
             :title="upcomingDeploymentTooltipText"
             data-testid="upcoming-deployment-status-link"
           >
-            <ci-icon class="gl-mr-2" :status="upcomingDeployment.deployable.status" />
+            <ci-icon :status="upcomingDeployment.deployable.status" class="gl-mr-2" />
           </gl-link>
         </div>
         <span
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 76b284b61854b0..984dc9edaf1586 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -88,7 +88,6 @@ export default {
           @click="openRightPane($options.rightSidebarViews.pipelines)"
         >
           <ci-icon
-            v-gl-tooltip
             :status="latestPipeline.details.status"
             :title="latestPipeline.details.status.text"
           />
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue
index f0c5b29e210b5c..f5840661c17294 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/description.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue
@@ -25,9 +25,7 @@ export default {
 <template>
   <div class="d-flex align-items-center">
     <ci-icon
-      is-borderless
       :status="job.status"
-      :size="24"
       class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1"
     />
     <span class="gl-ml-3">
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 6bf51ed06a613d..0e07cc34dd8d5f 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -63,7 +63,7 @@ export default {
     </div>
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
-        <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />
+        <ci-icon :status="latestPipeline.details.status" />
         <span class="gl-ml-3">
           <strong> {{ __('Pipeline') }} </strong>
           <a
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index 71bd301162ea52..76518cc3adfbce 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -193,7 +193,7 @@ export default {
           >
             <span v-if="hasPipeline" class="mr-ci-status order-md-last">
               <a :href="pipelineStatus.details_path">
-                <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" />
+                <ci-icon :status="pipelineStatus" :title="pipelineStatusTooltip" />
               </a>
             </span>
 
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 0feaf8db82bb0f..a4851b4fe4b22a 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
@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
 import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import getLatestPipelineStatusQuery from '../graphql/queries/get_latest_pipeline_status.query.graphql';
@@ -9,7 +9,7 @@ import { COMMIT_BOX_POLL_INTERVAL, PIPELINE_STATUS_FETCH_ERROR } from '../consta
 export default {
   PIPELINE_STATUS_FETCH_ERROR,
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlLoadingIcon,
   },
   inject: {
@@ -63,12 +63,6 @@ export default {
 <template>
   <div class="gl-display-inline-block gl-vertical-align-middle gl-mr-2">
     <gl-loading-icon v-if="loading" />
-    <ci-badge-link
-      v-else
-      :status="pipelineStatus"
-      :details-path="pipelineStatus.detailsPath"
-      size="md"
-      :show-text="false"
-    />
+    <ci-icon v-else :status="pipelineStatus" />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
index 16d688de3a034b..074cddac42221e 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
@@ -94,14 +94,7 @@ export default {
   <div class="gl-ml-5">
     <gl-loading-icon v-if="isLoading" size="lg" label="Loading pipeline status" />
     <a v-else :href="ciStatus.details_path">
-      <ci-icon
-        v-gl-tooltip
-        :title="statusTitle"
-        :aria-label="statusTitle"
-        :status="ciStatus"
-        :size="24"
-        data-container="body"
-      />
+      <ci-icon :status="ciStatus" :title="statusTitle" :aria-label="statusTitle" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index d6fa879976ef20..d77da83fe6e91d 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -3,7 +3,7 @@ import { GlTooltipDirective, GlButton, GlButtonGroup, GlLoadingIcon } from '@git
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { sprintf, s__ } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import SignatureBadge from '~/commit/components/signature_badge.vue';
 import getRefMixin from '../mixins/get_ref';
@@ -17,7 +17,7 @@ export default {
     CommitInfo,
     ClipboardButton,
     SignatureBadge,
-    CiBadgeLink,
+    CiIcon,
     GlButtonGroup,
     GlButton,
     GlLoadingIcon,
@@ -116,11 +116,9 @@ export default {
     >
       <signature-badge v-if="commit.signature" :signature="commit.signature" />
       <div v-if="commit.pipeline" class="gl-ml-5">
-        <ci-badge-link
+        <ci-icon
           :status="commit.pipeline.detailedStatus"
-          :details-path="commit.pipeline.detailedStatus.detailsPath"
           :aria-label="statusTitle"
-          :show-text="false"
           class="js-commit-pipeline"
         />
       </div>
diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue
index c88c528a632e4b..273cd5993088d2 100644
--- a/app/assets/javascripts/terraform/components/states_table.vue
+++ b/app/assets/javascripts/terraform/components/states_table.vue
@@ -11,14 +11,14 @@ import {
 } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import StateActions from './states_table_actions.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlAlert,
     GlBadge,
     GlLink,
@@ -198,10 +198,10 @@ export default {
           :id="`terraformJobStatusContainer${item.name}`"
           class="gl-my-2"
         >
-          <ci-badge-link
+          <ci-icon
             :id="`terraformJobStatus${item.name}`"
             :status="pipelineDetailedStatus(item)"
-            class="gl-py-1"
+            show-status-text
           />
 
           <gl-tooltip
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 2e104f2b93b547..ac037b69dd71c0 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 CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.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: {
-    CiBadgeLink,
+    CiIcon,
     GlLink,
     GlLoadingIcon,
     GlIcon,
@@ -194,13 +194,7 @@ export default {
       </p>
     </template>
     <template v-else-if="hasPipeline">
-      <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"
-      />
+      <ci-icon :status="status" 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
deleted file mode 100644
index abbeac0e0983b1..00000000000000
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<script>
-import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import CiIcon from './ci_icon.vue';
-
-/**
- * Renders CI Badge link with CI icon and status text based on
- * API response shared between all places where it is used.
- *
- * Receives status object containing:
- * status: {
- *   details_path or detailsPath: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
- *   group:"running" // used for CSS class
- *   icon: "icon_status_running" // used to render the icon
- *   label:"running" // used for potential tooltip
- *   text:"running" // text rendered
- * }
- *
- * Used in:
- * - Pipelines table - first column
- * - Jobs table - first column
- * - Pipeline show view - header
- * - Job show view - header
- * - MR widget
- * - Terraform table
- * - On-demand scans list
- */
-
-const badgeSizeOptions = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-};
-
-export default {
-  components: {
-    CiIcon,
-    GlBadge,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    status: {
-      type: Object,
-      required: true,
-    },
-    showText: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    size: {
-      type: String,
-      required: false,
-      default: badgeSizeOptions.md,
-      validator(value) {
-        return badgeSizeOptions[value] !== undefined;
-      },
-    },
-    showTooltip: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    useLink: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-  },
-  computed: {
-    isNotLargeBadgeSize() {
-      return this.size !== badgeSizeOptions.lg;
-    },
-    title() {
-      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
-      if (!this.useLink) {
-        return null;
-      }
-      return this.status.detailsPath || this.status.details_path;
-    },
-    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-badge
-    v-gl-tooltip
-    :class="{ 'gl-px-2': !showText && isNotLargeBadgeSize }"
-    :title="title"
-    :href="detailsPath"
-    :size="size"
-    :variant="badgeStyles.variant"
-    data-testid="ci-badge-link"
-    @click="$emit('ciStatusBadgeClick')"
-  >
-    <ci-icon :status="status" />
-
-    <template v-if="showText">
-      <span
-        class="gl-ml-2 gl-white-space-nowrap"
-        :class="badgeStyles.textColor"
-        data-testid="ci-badge-text"
-      >
-        {{ status.text }}
-      </span>
-    </template>
-  </gl-badge>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 6670b93141678a..601985712daa7b 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 /**
  * Renders CI icon based on API response shared between all places where it is used.
@@ -22,16 +22,14 @@ import { GlIcon } from '@gitlab/ui';
  * - Pipelines table Badge
  */
 
-/*
- * These sizes are defined in gitlab-ui/src/scss/variables.scss
- * under '$gl-icon-sizes'
- */
-const validSizes = [8, 12, 14, 16, 24, 32, 48, 72];
-
 export default {
   components: {
+    GlBadge,
     GlIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     status: {
       type: Object,
@@ -46,54 +44,117 @@ export default {
         );
       },
     },
-    size: {
-      type: Number,
-      required: false,
-      default: 16,
-      validator(value) {
-        return validSizes.includes(value);
-      },
-    },
-    isActive: {
+    showStatusText: {
       type: Boolean,
       required: false,
       default: false,
     },
-    isBorderless: {
+    showTooltip: {
       type: Boolean,
       required: false,
-      default: false,
+      default: true,
     },
-    isInteractive: {
+    useLink: {
       type: Boolean,
+      default: true,
       required: false,
-      default: false,
-    },
-    cssClasses: {
-      type: String,
-      required: false,
-      default: '',
     },
   },
   computed: {
+    title() {
+      return this.showTooltip && !this.showStatusText ? this.status?.text : '';
+    },
+    detailsPath() {
+      // For now, this can either come from graphQL with camelCase or REST API in snake_case
+      if (!this.useLink) {
+        return null;
+      }
+      return this.status.detailsPath || this.status.details_path;
+    },
     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`;
     },
     icon() {
-      return this.isBorderless ? `${this.status.icon}_borderless` : this.status.icon;
+      return this.status.icon;
+    },
+    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>
-  <span
-    :class="[
-      wrapperStyleClasses,
-      { interactive: isInteractive, active: isActive, borderless: isBorderless },
-    ]"
-    :style="{ height: `${size}px`, width: `${size}px` }"
+  <gl-badge
+    v-gl-tooltip
+    class="ci-icon gl-p-2"
+    :title="title"
+    :aria-label="title"
+    :href="detailsPath"
+    size="md"
+    :variant="badgeStyles.variant"
+    data-testid="ci-icon"
+    @click="$emit('ciStatusBadgeClick')"
   >
-    <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" />
-  </span>
+    <span
+      class="ci-icon-wrapper"
+      :class="[
+        wrapperStyleClasses,
+        {
+          'gl-display-inline-block gl-vertical-align-top': showStatusText,
+        },
+      ]"
+    >
+      <gl-icon :name="icon" :size="16" :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
+    >
+  </gl-badge>
 </template>
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 16fc0e7ebae1f9..6165ee6e8b4e5c 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -48,14 +48,6 @@
     border: 1px solid var(--border-color, $border-color);
     padding: 8px $gl-padding 12px;
     border-radius: $border-radius-default;
-
-    svg {
-      position: relative;
-      top: 3px;
-      margin-right: 5px;
-      width: 22px;
-      height: 22px;
-    }
   }
 
   .build-loader-animation {
diff --git a/app/helpers/ci/status_helper.rb b/app/helpers/ci/status_helper.rb
index c1e61e9d67244a..8bce1ccd7782c8 100644
--- a/app/helpers/ci/status_helper.rb
+++ b/app/helpers/ci/status_helper.rb
@@ -16,41 +16,41 @@ def ci_status_for_statuseable(subject)
 
     # rubocop:disable Metrics/CyclomaticComplexity
     def ci_icon_for_status(status, size: 16)
-      if detailed_status?(status)
-        return sprite_icon(status.icon, size: size)
-      end
-
       icon_name =
-        case status
-        when 'success'
-          'status_success'
-        when 'success-with-warnings'
-          'status_warning'
-        when 'failed'
-          'status_failed'
-        when 'pending'
-          'status_pending'
-        when 'waiting_for_resource'
-          'status_pending'
-        when 'preparing'
-          'status_preparing'
-        when 'running'
-          'status_running'
-        when 'play'
-          'play'
-        when 'created'
-          'status_created'
-        when 'skipped'
-          'status_skipped'
-        when 'manual'
-          'status_manual'
-        when 'scheduled'
-          'status_scheduled'
+        if detailed_status?(status)
+          status.icon
         else
-          'status_canceled'
+          case status
+          when 'success'
+            'status_success'
+          when 'success-with-warnings'
+            'status_warning'
+          when 'failed'
+            'status_failed'
+          when 'pending'
+            'status_pending'
+          when 'waiting-for-resource'
+            'status_pending'
+          when 'preparing'
+            'status_preparing'
+          when 'running'
+            'status_running'
+          when 'play'
+            'play'
+          when 'created'
+            'status_created'
+          when 'skipped'
+            'status_skipped'
+          when 'manual'
+            'status_manual'
+          when 'scheduled'
+            'status_scheduled'
+          else
+            'status_canceled'
+          end
         end
 
-      sprite_icon(icon_name, size: size)
+      sprite_icon(icon_name, size: size, css_class: 'gl-icon')
     end
     # rubocop:enable Metrics/CyclomaticComplexity
 
@@ -68,23 +68,34 @@ def render_commit_status(commit, status, ref: nil, tooltip_placement: 'left')
       project = commit.project
       path = pipelines_project_commit_path(project, commit, ref: ref)
 
-      render_status_with_link(
+      render_ci_icon(
         status,
         path,
         tooltip_placement: tooltip_placement,
-        icon_size: 16)
+        option_css_classes: 'gl-ml-3'
+      )
     end
 
-    def render_status_with_link(status, path = nil, type: _('pipeline'), tooltip_placement: 'left', cssclass: '', container: 'body', icon_size: 16)
+    def render_ci_icon(
+      status,
+      path = nil,
+      tooltip_placement: 'left',
+      option_css_classes: '',
+      container: 'body',
+      show_status_text: false
+    )
       variant = badge_variant(status)
-      klass = "js-ci-status-badge-legacy #{ci_icon_class_for_status(status)} d-inline-flex gl-line-height-1 #{cssclass}"
-      title = "#{type.titleize}: #{ci_label_for_status(status)}"
-      data = { toggle: 'tooltip', placement: tooltip_placement, container: container, testid: 'ci-status-badge-legacy' }
-      badge_classes = 'gl-px-2 gl-ml-3'
+      klass = "js-ci-status-badge-legacy ci-status-icon #{ci_icon_class_for_status(status)} gl-rounded-full gl-justify-content-center gl-line-height-0"
+      title = "#{_('Pipeline')}: #{ci_label_for_status(status)}"
+      data = { toggle: 'tooltip', placement: tooltip_placement, container: container, testid: 'ci-icon' }
+      badge_classes = "ci-icon gl-p-2 #{option_css_classes}"
 
       gl_badge_tag(variant: variant, size: :md, href: path, class: badge_classes, title: title, data: data) do
-        content_tag :span, ci_icon_for_status(status, size: icon_size),
-          class: klass
+        if show_status_text
+          content_tag(:span, ci_icon_for_status(status), { class: klass }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-white-space-nowrap' })
+        else
+          content_tag(:span, ci_icon_for_status(status), { class: klass })
+        end
       end
     end
 
diff --git a/app/views/ci/status/_badge.html.haml b/app/views/ci/status/_badge.html.haml
deleted file mode 100644
index e3b409dea762e8..00000000000000
--- a/app/views/ci/status/_badge.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- status = local_assigns.fetch(:status)
-- link   = local_assigns.fetch(:link, true)
-- title  = local_assigns.fetch(:title, nil)
-- css_classes = "gl-display-inline-flex gl-align-items-center gl-gap-2 gl-line-height-0 gl-px-3 gl-py-2 gl-rounded-base ci-status ci-#{status.group} #{'has-tooltip' if title.present?}"
-
-- if link && status.has_details?
-  = link_to status.details_path, class: css_classes, title: title, data: { html: title.present? } do
-    = sprite_icon(status.icon)
-    = status.text
-- else
-  %span{ class: css_classes, title: title, data: { html: title.present? } }
-    = sprite_icon(status.icon)
-    = status.text
diff --git a/app/views/ci/status/_icon.html.haml b/app/views/ci/status/_icon.html.haml
index 48e4472c117671..bcb83874bfb79e 100644
--- a/app/views/ci/status/_icon.html.haml
+++ b/app/views/ci/status/_icon.html.haml
@@ -1,10 +1,7 @@
 - status             = local_assigns.fetch(:status)
-- tooltip_placement  = local_assigns.fetch(:tooltip_placement, "left")
 - path               = local_assigns.fetch(:path, status.has_details? ? status.details_path : nil)
-- option_css_classes = local_assigns.fetch(:option_css_classes, '')
-- css_classes        = "gl-px-2 #{option_css_classes}"
-- ci_css_classes     = "ci-status-icon ci-status-icon-#{status.group} gl-line-height-1"
-- title              = s_("PipelineStatusTooltip|Pipeline: %{ci_status}") % {ci_status: status.label}
+- tooltip_placement  = local_assigns.fetch(:tooltip_placement, "left")
+- option_css_classes = local_assigns.fetch(:option_css_classes, nil)
+- show_status_text   = local_assigns.fetch(:show_status_text, false)
 
-= gl_badge_tag(variant: badge_variant(status), size: :md, href: path, class: css_classes, title: title, data: { toggle: 'tooltip', placement: tooltip_placement, testid: "ci-status-badge" }) do
-  = content_tag :span, sprite_icon(status.icon, size: 16), class: ci_css_classes
+= render_ci_icon(status, path, tooltip_placement: tooltip_placement, option_css_classes: option_css_classes, show_status_text: show_status_text)
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 61961172eb28a8..360e38afb5d16c 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -28,7 +28,7 @@
 
   .pipeline-status.d-none.d-md-block<
     - if commit_status
-      = render 'ci/status/icon', size: 16, status: commit_status
+      = render 'ci/status/icon', status: commit_status
     - elsif show_commit_status
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-3
         %svg.s16
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 4017db459a9bf6..a622895b4de158 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -14,7 +14,7 @@
   %td.status
     -# Sending 'status' prevents calling the user relation inside the presenter, generating N+1,
     -# see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68743
-    = render "ci/status/badge", status: status, title: job.status_title(status)
+    = render "ci/status/icon", status: status, show_status_text: true
 
   %td
     - if can?(current_user, :read_build, job)
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index a3569d41714ad2..e766536f12bf73 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -7,7 +7,7 @@
 
 %tr.generic-commit-status{ class: ('retried' if retried) }
   %td.status
-    = render 'ci/status/badge', status: generic_commit_status.detailed_status(current_user)
+    = render 'ci/status/icon', status: generic_commit_status.detailed_status(current_user), show_status_text: true
 
   %td
     = generic_commit_status.name
diff --git a/app/views/projects/issues/_related_branches.html.haml b/app/views/projects/issues/_related_branches.html.haml
index ba5c41be7c665f..4fa5ad05c2b8e1 100644
--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -18,8 +18,8 @@
                   .item-contents.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-flex-grow-1.gl-min-h-7
                     .item-title.gl-display-flex.mb-xl-0.gl-min-w-0.gl-align-items-center
                       - if branch[:pipeline_status].present?
-                        %span.related-branch-ci-status
-                          = render 'ci/status/icon', status: branch[:pipeline_status], option_css_classes: 'gl-display-block gl-mr-3'
+                        %span.related-branch-ci-status.gl-mt-n2.gl-mb-n2.gl-mr-3
+                          = render 'ci/status/icon', status: branch[:pipeline_status]
                       %span.related-branch-info
                         %strong
                           = link_to branch[:name], branch[:link], class: "ref-name"
diff --git a/app/views/projects/jobs/_header.html.haml b/app/views/projects/jobs/_header.html.haml
index 018ff09347593b..a77e8f2d0b471e 100644
--- a/app/views/projects/jobs/_header.html.haml
+++ b/app/views/projects/jobs/_header.html.haml
@@ -2,7 +2,7 @@
 
 .content-block.build-header.top-area.page-content-header
   .header-content
-    = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false, title: @build.status_title
+    = render 'ci/status/icon', status: @build.detailed_status(current_user), show_status_text: true
     %strong
       Job
       = link_to "##{@build.id}", project_job_path(@project, @build), class: 'js-build-id'
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index cc49ff9e293699..f04d6ab341fad8 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -30,7 +30,7 @@
         = render partial: 'projects/commit/signature', object: tag.signature
 
     - if commit_status
-      = render 'ci/status/icon', size: 24, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
+      = render 'ci/status/icon', status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
     - elsif @tag_pipeline_statuses && @tag_pipeline_statuses.any?
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
         %svg.s24
diff --git a/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue b/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue
index ce444ff4ff8011..14ebb746623b12 100644
--- a/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue
+++ b/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue
@@ -2,7 +2,7 @@
 import { GlLink } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { getTypeFromGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_CI_BUILD } from '~/graphql_shared/constants';
@@ -14,7 +14,7 @@ export default {
   components: {
     GlLink,
     TimeAgo,
-    CiBadgeLink,
+    CiIcon,
     RunnerFullName,
   },
   directives: {
@@ -43,7 +43,7 @@ export default {
   <div>
     <time-ago v-if="job.finishedAt" :time="job.finishedAt" class="gl-text-secondary gl-font-sm" />
     <div class="gl-mt-1 gl-mb-3">
-      <ci-badge-link v-if="job.detailedStatus" :status="job.detailedStatus" size="sm" />
+      <ci-icon v-if="job.detailedStatus" :status="job.detailedStatus" show-status-text />
       <gl-link v-if="runner" :href="runner.adminUrl" data-testid="runner-link">
         <runner-full-name :runner="runner" />
       </gl-link>
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
index e1f637a46b67b7..3126b998be84aa 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
@@ -9,7 +9,7 @@ import {
   GlSkeletonLoader,
   GlTruncate,
 } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { DAST_SHORT_NAME } from '~/security_configuration/components/constants';
 import { __, s__ } from '~/locale';
@@ -45,7 +45,7 @@ export default {
     GlAlert,
     GlSkeletonLoader,
     GlTruncate,
-    CiBadgeLink,
+    CiIcon,
     TimeAgoTooltip,
     Actions,
     EmptyState,
@@ -262,7 +262,7 @@ export default {
 
         <template #cell(status)="{ value }">
           <div class="gl-my-3">
-            <ci-badge-link :status="value" />
+            <ci-icon :status="value" show-status-text />
           </div>
         </template>
 
diff --git a/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue b/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue
index 1bc9bdfc2621f9..f462c367ec1b90 100644
--- a/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue
+++ b/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue
@@ -1,12 +1,10 @@
 <script>
 import { GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
-    CiBadgeLink,
     CiIcon,
     GlIcon,
     GlLink,
@@ -76,10 +74,7 @@ export default {
         :href="upstreamPipeline.details.status.details_path"
         class="d-inline-block align-middle"
       >
-        <ci-icon
-          class="d-flex js-upstream-pipeline-status"
-          :status="upstreamPipeline.details.status"
-        />
+        <ci-icon :status="upstreamPipeline.details.status" class="js-upstream-pipeline-status" />
       </gl-link>
       <gl-tooltip :target="() => $refs.upstreamStatus">
         <div class="bold">{{ $options.relations.upstream }}</div>
@@ -90,11 +85,11 @@ export default {
       <gl-icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
     </template>
 
-    <ci-badge-link
+    <ci-icon
       ref="status"
-      class="d-inline-block align-middle py-0"
       :status="lastPipeline.details.status"
-      :show-text="true"
+      show-status-text
+      class="gl-display-inline-block align-middle"
     />
     <gl-tooltip :target="() => $refs.status">
       <div class="bold">{{ $options.relations.current }}</div>
@@ -115,7 +110,7 @@ export default {
           :href="pipeline.details.status.details_path"
           class="d-inline-block align-middle"
         >
-          <ci-icon class="d-flex js-downstream-pipeline-status" :status="pipeline.details.status" />
+          <ci-icon :status="pipeline.details.status" class="js-downstream-pipeline-status" />
         </gl-link>
         <gl-tooltip :target="() => $refs.downstreamStatus[index]">
           <div class="bold">{{ $options.relations.downstream }}</div>
diff --git a/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js b/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js
index a61e2acb0cc7ae..b5f9f8c4b304d3 100644
--- a/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js
+++ b/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js
@@ -1,5 +1,5 @@
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import RunnerJobFailure from 'ee/ci/runner/components/runner_job_failure.vue';
@@ -16,7 +16,7 @@ describe('RunnerJobFailure', () => {
   let wrapper;
 
   const findTimeAgo = () => wrapper.findComponent(TimeAgo);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findRunnerLink = () => wrapper.findByTestId('runner-link');
   const findLog = () => wrapper.find('pre');
 
@@ -52,8 +52,7 @@ describe('RunnerJobFailure', () => {
     it('shows status badge', () => {
       createComponent();
 
-      expect(findCiBadgeLink().props('status')).toBe(mockFailedJob.detailedStatus);
-      expect(findCiBadgeLink().props('size')).toBe('sm');
+      expect(findCiIcon().props('status')).toBe(mockFailedJob.detailedStatus);
     });
 
     it('when data is not present, shows no status badge', () => {
@@ -61,7 +60,7 @@ describe('RunnerJobFailure', () => {
         job: { detailedStatus: null },
       });
 
-      expect(findCiBadgeLink().exists()).toBe(false);
+      expect(findCiIcon().exists()).toBe(false);
     });
   });
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4ba49ace5c768d..0e28b52f02e8cf 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34701,9 +34701,6 @@ msgstr ""
 msgid "PipelineStatusTooltip|Pipeline: %{ciStatus}"
 msgstr ""
 
-msgid "PipelineStatusTooltip|Pipeline: %{ci_status}"
-msgstr ""
-
 msgid "PipelineWizardDefaultCommitMessage|Add %{filename}"
 msgstr ""
 
@@ -57287,9 +57284,6 @@ msgstr ""
 msgid "personal access tokens"
 msgstr ""
 
-msgid "pipeline"
-msgstr ""
-
 msgid "pipelineEditorWalkthrough|Let's do this!"
 msgstr ""
 
diff --git a/qa/qa/ee/page/operations_dashboard.rb b/qa/qa/ee/page/operations_dashboard.rb
index b063c0a30968e9..fa9dc2cd71d020 100644
--- a/qa/qa/ee/page/operations_dashboard.rb
+++ b/qa/qa/ee/page/operations_dashboard.rb
@@ -5,7 +5,7 @@ module EE
     module Page
       class OperationsDashboard < QA::Page::Base
         include QA::Page::Component::ProjectSelector
-        include QA::Page::Component::CiBadgeLink
+        include QA::Page::Component::CiIcon
 
         view 'ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue' do
           element 'add-projects-button'
@@ -43,7 +43,7 @@ def find_project_card_by_name(name)
 
         def pipeline_status(project_card)
           within(project_card) do
-            find_element('ci-badge-text')
+            find_element('ci-icon-text')
           end.text
         end
 
diff --git a/qa/qa/page/component/ci_badge_link.rb b/qa/qa/page/component/ci_icon.rb
similarity index 86%
rename from qa/qa/page/component/ci_badge_link.rb
rename to qa/qa/page/component/ci_icon.rb
index d0a40b4bfbe9aa..1ddcc810f95547 100644
--- a/qa/qa/page/component/ci_badge_link.rb
+++ b/qa/qa/page/component/ci_icon.rb
@@ -3,10 +3,12 @@
 module QA
   module Page
     module Component
-      module CiBadgeLink
+      module CiIcon
         extend QA::Page::PageConcern
 
+        # rubocop:disable Layout/LineLength
         COMPLETED_STATUSES = %w[Passed Failed Canceled Blocked Skipped Manual].freeze # excludes Created, Pending, Running
+        # rubocop:enable Layout/LineLength
         INCOMPLETE_STATUSES = %w[Pending Created Running].freeze
 
         # e.g. def passed?(timeout: nil); status_badge == 'Passed'; end
@@ -31,14 +33,14 @@ module CiBadgeLink
         def self.included(base)
           super
 
-          base.view 'app/assets/javascripts/vue_shared/components/ci_badge_link.vue' do
-            element 'ci-badge-text'
+          base.view 'app/assets/javascripts/vue_shared/components/ci_icon.vue' do
+            element 'ci-icon-text'
           end
         end
 
         def status_badge
           # There are more than 1 on job details page
-          all_elements('ci-badge-text', minimum: 1).first.text
+          all_elements('ci-icon-text', minimum: 1).first.text
         end
 
         def completed?(timeout: 60)
diff --git a/qa/qa/page/project/job/show.rb b/qa/qa/page/project/job/show.rb
index a1ad3a50be7be9..1d253a62ceb94d 100644
--- a/qa/qa/page/project/job/show.rb
+++ b/qa/qa/page/project/job/show.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Job
         class Show < QA::Page::Base
-          include Component::CiBadgeLink
+          include Component::CiIcon
 
           view 'app/assets/javascripts/ci/job_details/components/log/log.vue' do
             element 'job-log-content'
diff --git a/qa/qa/page/project/pipeline/index.rb b/qa/qa/page/project/pipeline/index.rb
index 5a050eaa8bb28c..bd5d934cc5060d 100644
--- a/qa/qa/page/project/pipeline/index.rb
+++ b/qa/qa/page/project/pipeline/index.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Pipeline
         class Index < QA::Page::Base
-          include Component::CiBadgeLink
+          include Component::CiIcon
 
           view 'app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue' do
             element 'pipeline-url-link'
@@ -25,7 +25,7 @@ def latest_pipeline
 
           def latest_pipeline_status
             within(latest_pipeline) do
-              find_element('ci-badge-text')
+              find_element('ci-icon-text')
             end.text
           end
 
diff --git a/qa/qa/page/project/pipeline/show.rb b/qa/qa/page/project/pipeline/show.rb
index 0caf373fffd834..16b931c1a56867 100644
--- a/qa/qa/page/project/pipeline/show.rb
+++ b/qa/qa/page/project/pipeline/show.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Pipeline
         class Show < QA::Page::Base
-          include Component::CiBadgeLink
+          include Component::CiIcon
 
           view 'app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue' do
             element 'pipeline-details-header', required: true
diff --git a/spec/features/admin/admin_jobs_spec.rb b/spec/features/admin/admin_jobs_spec.rb
index b125974532beb2..b3e21d02354456 100644
--- a/spec/features/admin/admin_jobs_spec.rb
+++ b/spec/features/admin/admin_jobs_spec.rb
@@ -132,7 +132,7 @@
 
         within_testid('jobs-table') do
           expect(page).to have_selector('[data-testid="jobs-table-row"]', count: 1)
-          expect(find_by_testid('ci-badge-text')).to have_content('Failed')
+          expect(find_by_testid('ci-icon-text')).to have_content('Failed')
         end
       end
     end
diff --git a/spec/features/commits_spec.rb b/spec/features/commits_spec.rb
index 5f880af37dc383..1df1b7373d911f 100644
--- a/spec/features/commits_spec.rb
+++ b/spec/features/commits_spec.rb
@@ -81,7 +81,7 @@
 
           it 'shows correct build status from default branch' do
             page.within("//li[@id='commit-#{pipeline.short_sha}']") do
-              expect(page).to have_css("[data-testid='ci-status-badge-legacy']")
+              expect(page).to have_css("[data-testid='ci-icon']")
               expect(page).to have_css('.ci-status-icon-success')
             end
           end
diff --git a/spec/features/dashboard/projects_spec.rb b/spec/features/dashboard/projects_spec.rb
index 90ad6fcea25400..65436b35cd7708 100644
--- a/spec/features/dashboard/projects_spec.rb
+++ b/spec/features/dashboard/projects_spec.rb
@@ -153,7 +153,7 @@
 
       page.within('[data-testid="project_controls"]') do
         expect(page).to have_xpath("//a[@href='#{pipelines_project_commit_path(project, project.commit, ref: pipeline.ref)}']")
-        expect(page).to have_css("[data-testid='ci-status-badge']")
+        expect(page).to have_css("[data-testid='ci-icon']")
         expect(page).to have_css('.ci-status-icon-success')
         expect(page).to have_link('Pipeline: passed')
       end
@@ -165,7 +165,7 @@
 
         page.within('[data-testid="project_controls"]') do
           expect(page).not_to have_xpath("//a[@href='#{pipelines_project_commit_path(project, project.commit, ref: pipeline.ref)}']")
-          expect(page).not_to have_css("[data-testid='ci-status-badge']")
+          expect(page).not_to have_css("[data-testid='ci-icon']")
           expect(page).not_to have_css('.ci-status-icon-success')
           expect(page).not_to have_link('Pipeline: passed')
         end
diff --git a/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb b/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
index 69eb6b0dc17551..5e683ddf7baf6c 100644
--- a/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
@@ -86,7 +86,7 @@ def mr_widget_title
 
       it 'sees branch pipelines and detached merge request pipelines in correct order' do
         page.within('.ci-table') do
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Created', count: 2)
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Created', count: 2)
           expect(first('[data-testid="pipeline-url-link"]')).to have_content("##{detached_merge_request_pipeline.id}")
         end
       end
@@ -122,7 +122,7 @@ def mr_widget_title
 
         it 'sees branch pipelines and detached merge request pipelines in correct order' do
           page.within('.ci-table') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 4)
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 4)
 
             expect(all('[data-testid="pipeline-url-link"]')[0])
               .to have_content("##{detached_merge_request_pipeline_2.id}")
@@ -220,7 +220,7 @@ def mr_widget_title
 
         it 'sees a branch pipeline in pipeline tab' do
           page.within('.ci-table') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Created', count: 1)
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Created', count: 1)
             expect(first('[data-testid="pipeline-url-link"]')).to have_content("##{push_pipeline.id}")
           end
         end
@@ -273,7 +273,7 @@ def mr_widget_title
 
       it 'sees branch pipelines and detached merge request pipelines in correct order' do
         page.within('.ci-table') do
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 2)
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 2)
           expect(first('[data-testid="pipeline-url-link"]')).to have_content("##{detached_merge_request_pipeline.id}")
         end
       end
@@ -289,7 +289,7 @@ def mr_widget_title
       it 'sees pipeline list in forked project' do
         visit project_pipelines_path(forked_project)
 
-        expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 2)
+        expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 2)
       end
 
       context 'when a user updated a merge request from a forked project to the parent project' do
@@ -315,7 +315,7 @@ def mr_widget_title
 
         it 'sees branch pipelines and detached merge request pipelines in correct order' do
           page.within('.ci-table') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 4)
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 4)
 
             expect(all('[data-testid="pipeline-url-link"]')[0])
               .to have_content("##{detached_merge_request_pipeline_2.id}")
@@ -358,7 +358,7 @@ def mr_widget_title
         it 'sees pipeline list in forked project' do
           visit project_pipelines_path(forked_project)
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 4)
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 4)
         end
       end
 
diff --git a/spec/features/merge_request/user_sees_pipelines_spec.rb b/spec/features/merge_request/user_sees_pipelines_spec.rb
index a68b3c444fe698..c21c9043f01b24 100644
--- a/spec/features/merge_request/user_sees_pipelines_spec.rb
+++ b/spec/features/merge_request/user_sees_pipelines_spec.rb
@@ -49,7 +49,7 @@
           wait_for_requests
 
           page.within(find('[data-testid="pipeline-table-row"]', match: :first)) do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Passed')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Passed')
             expect(page).to have_content(pipeline.id)
             expect(page).to have_content('API')
             expect(page).to have_css('[data-testid="pipeline-mini-graph"]')
diff --git a/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb b/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb
index 00cb5474ea06c3..56a3a252f3e96f 100644
--- a/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb
+++ b/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb
@@ -36,7 +36,7 @@
       wait_for_requests
 
       page.within('[data-testid="pipeline-table-row"]') do
-        expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Passed')
+        expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Passed')
         expect(page).to have_content(pipeline.id)
         expect(page).to have_content('API')
         expect(page).to have_css('[data-testid="pipeline-mini-graph"]')
diff --git a/spec/features/projects/jobs/user_browses_jobs_spec.rb b/spec/features/projects/jobs/user_browses_jobs_spec.rb
index fc67d7dedcc118..115b3dda5b2712 100644
--- a/spec/features/projects/jobs/user_browses_jobs_spec.rb
+++ b/spec/features/projects/jobs/user_browses_jobs_spec.rb
@@ -72,7 +72,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Canceled')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Canceled')
           expect(page).not_to have_selector('[data-testid="jobs-table-error-alert"]')
         end
       end
@@ -93,7 +93,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending')
         end
       end
 
@@ -133,7 +133,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending')
         end
 
         it 'unschedules a job successfully' do
@@ -141,7 +141,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Manual')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Manual')
         end
       end
 
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 12ed2558712d1b..050ed4e0e4cd62 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -66,7 +66,7 @@
 
         wait_for_requests
 
-        expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Passed')
+        expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Passed')
       end
 
       it 'shows commit`s data', :js do
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index f042a12884c774..ae0b02dac07d92 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -224,7 +224,7 @@
 
           expect(page).not_to have_content('Retry job')
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -278,7 +278,7 @@
 
           expect(page).not_to have_content('Retry job')
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
 
@@ -312,7 +312,7 @@
 
           expect(page).not_to have_content('Play job')
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -537,7 +537,7 @@
 
         it 'shows running status in pipeline header', :sidekiq_might_not_need_inline do
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -900,7 +900,7 @@
         subject
 
         within('[data-testid="pipeline-details-header"]') do
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending')
         end
 
         within('.js-pipeline-graph') do
@@ -925,7 +925,7 @@
           subject
 
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
 
           within('.js-pipeline-graph') do
@@ -954,7 +954,7 @@
           subject
 
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Waiting')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Waiting')
           end
 
           within('.js-pipeline-graph') do
@@ -974,7 +974,7 @@
             subject
 
             within('[data-testid="pipeline-details-header"]') do
-              expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+              expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
             end
 
             within('.js-pipeline-graph') do
@@ -1002,7 +1002,7 @@
             subject
 
             within('[data-testid="pipeline-details-header"]') do
-              expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Waiting')
+              expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Waiting')
             end
 
             within('.js-pipeline-graph') do
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index fcbe8060fc304f..91f926af0222da 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -115,7 +115,7 @@
 
         it 'indicates that pipeline can be canceled' do
           expect(page).to have_selector('.js-pipelines-cancel-button')
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
         end
 
         context 'when canceling' do
@@ -127,7 +127,7 @@
 
           it 'indicated that pipelines was canceled', :sidekiq_might_not_need_inline do
             expect(page).not_to have_selector('.js-pipelines-cancel-button')
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Canceled')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Canceled')
           end
         end
       end
@@ -144,7 +144,7 @@
 
         it 'indicates that pipeline can be retried' do
           expect(page).to have_selector('.js-pipelines-retry-button')
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Failed')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Failed')
         end
 
         context 'when retrying' do
@@ -155,7 +155,7 @@
 
           it 'shows running pipeline that is not retryable' do
             expect(page).not_to have_selector('.js-pipelines-retry-button')
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -396,7 +396,7 @@
           end
 
           it 'shows the pipeline as preparing' do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Preparing')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Preparing')
           end
         end
 
@@ -417,7 +417,7 @@
           end
 
           it 'has pipeline running' do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
 
           context 'when canceling' do
@@ -428,7 +428,7 @@
 
             it 'indicates that pipeline was canceled', :sidekiq_might_not_need_inline do
               expect(page).not_to have_selector('.js-pipelines-cancel-button')
-              expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Canceled')
+              expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Canceled')
             end
           end
         end
@@ -450,7 +450,7 @@
           end
 
           it 'has failed pipeline', :sidekiq_might_not_need_inline do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Failed')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Failed')
           end
         end
       end
diff --git a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
index 3628af31aa10f3..ba77d90f4e2cf3 100644
--- a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
@@ -2,7 +2,7 @@ import { GlLoadingIcon, GlTable, GlLink, GlPagination, GlModal, GlFormCheckbox }
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import getJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import JobArtifactsTable from '~/ci/artifacts/components/job_artifacts_table.vue';
 import ArtifactsTableRowDetails from '~/ci/artifacts/components/artifacts_table_row_details.vue';
@@ -51,7 +51,7 @@ describe('JobArtifactsTable component', () => {
 
   const findStatuses = () => wrapper.findAllByTestId('job-artifacts-job-status');
   const findSuccessfulJobStatus = () => findStatuses().at(0);
-  const findCiBadgeLink = () => findSuccessfulJobStatus().findComponent(CiBadgeLink);
+  const findCiIcon = () => findSuccessfulJobStatus().findComponent(CiIcon);
 
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findJobLink = () => findLinks().at(0);
@@ -201,12 +201,11 @@ describe('JobArtifactsTable component', () => {
     });
 
     it('shows the job status as an icon for a successful job', () => {
-      expect(findCiBadgeLink().props()).toMatchObject({
+      expect(findCiIcon().props()).toMatchObject({
         status: {
           group: 'success',
         },
-        size: 'sm',
-        showText: false,
+        showStatusText: false,
       });
     });
 
diff --git a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
index 6ab9520508d977..c061332ba13681 100644
--- a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
+++ b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
@@ -2,8 +2,8 @@ import { GlAvatar, GlAvatarLink, GlBadge } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CiResourceHeader from '~/ci/catalog/components/details/ci_resource_header.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import CiResourceAbout from '~/ci/catalog/components/details/ci_resource_about.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { catalogSharedDataMock, catalogAdditionalDetailsMock } from '../../mock';
 
 describe('CiResourceHeader', () => {
@@ -24,7 +24,7 @@ describe('CiResourceHeader', () => {
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
   const findVersionBadge = () => wrapper.findComponent(GlBadge);
-  const findPipelineStatusBadge = () => wrapper.findComponent(CiBadgeLink);
+  const findPipelineStatusBadge = () => wrapper.findComponent(CiIcon);
 
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMountExtended(CiResourceHeader, {
@@ -126,8 +126,7 @@ describe('CiResourceHeader', () => {
         expect(findPipelineStatusBadge().exists()).toBe(hasPipelineBadge);
         if (hasPipelineBadge) {
           expect(findPipelineStatusBadge().props()).toEqual({
-            showText: true,
-            size: 'sm',
+            showStatusText: true,
             status: pipelineStatus,
             showTooltip: true,
             useLink: true,
diff --git a/spec/frontend/ci/common/pipelines_table_spec.js b/spec/frontend/ci/common/pipelines_table_spec.js
index 6cf391d72ca096..f1f90e240e8a2c 100644
--- a/spec/frontend/ci/common/pipelines_table_spec.js
+++ b/spec/frontend/ci/common/pipelines_table_spec.js
@@ -16,7 +16,7 @@ import {
   TRACKING_CATEGORIES,
 } from '~/ci/constants';
 
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 describe('Pipelines Table', () => {
   let wrapper;
@@ -58,7 +58,7 @@ describe('Pipelines Table', () => {
   };
 
   const findGlTableLite = () => wrapper.findComponent(GlTableLite);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findPipelineInfo = () => wrapper.findComponent(PipelineUrl);
   const findTriggerer = () => wrapper.findComponent(PipelineTriggerer);
   const findLegacyPipelineMiniGraph = () => wrapper.findComponent(LegacyPipelineMiniGraph);
@@ -96,7 +96,7 @@ describe('Pipelines Table', () => {
 
     describe('status cell', () => {
       it('should render a status badge', () => {
-        expect(findCiBadgeLink().exists()).toBe(true);
+        expect(findCiIcon().exists()).toBe(true);
       });
     });
 
@@ -265,9 +265,9 @@ describe('Pipelines Table', () => {
     });
 
     it('tracks status badge click', () => {
-      findCiBadgeLink().vm.$emit('ciStatusBadgeClick');
+      findCiIcon().vm.$emit('ciStatusBadgeClick');
 
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_ci_status_badge', {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_ci_icon', {
         label: TRACKING_CATEGORIES.table,
       });
     });
diff --git a/spec/frontend/ci/job_details/components/job_header_spec.js b/spec/frontend/ci/job_details/components/job_header_spec.js
index 609369316f553b..d12267807acc63 100644
--- a/spec/frontend/ci/job_details/components/job_header_spec.js
+++ b/spec/frontend/ci/job_details/components/job_header_spec.js
@@ -1,7 +1,7 @@
 import { GlButton, GlAvatarLink, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import JobHeader from '~/ci/job_details/components/job_header.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -29,7 +29,7 @@ describe('Header CI Component', () => {
     shouldRenderTriggeredLabel: true,
   };
 
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip);
   const findUserLink = () => wrapper.findComponent(GlAvatarLink);
   const findSidebarToggleBtn = () => wrapper.findComponent(GlButton);
@@ -57,7 +57,7 @@ describe('Header CI Component', () => {
     });
 
     it('should render status badge', () => {
-      expect(findCiBadgeLink().exists()).toBe(true);
+      expect(findCiIcon().exists()).toBe(true);
     });
 
     it('should render timeago date', () => {
diff --git a/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js b/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js
index e007896c81eef2..54c5a73f757143 100644
--- a/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js
+++ b/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { Mousetrap } from '~/lib/mousetrap';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import StagesDropdown from '~/ci/job_details/components/sidebar/stages_dropdown.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import * as copyToClipboard from '~/behaviors/copy_to_clipboard';
 import {
   mockPipelineWithoutRef,
@@ -15,7 +15,7 @@ import {
 describe('Stages Dropdown', () => {
   let wrapper;
 
-  const findStatus = () => wrapper.findComponent(CiBadgeLink);
+  const findStatus = () => wrapper.findComponent(CiIcon);
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findSelectedStageText = () => findDropdown().props('toggleText');
 
@@ -47,7 +47,6 @@ describe('Stages Dropdown', () => {
 
     it('renders pipeline status', () => {
       expect(findStatus().props('status')).toBe(mockPipelineWithoutMR.details.status);
-      expect(findStatus().props('size')).toBe('sm');
     });
 
     it('renders dropdown with stages', () => {
diff --git a/spec/frontend/ci/jobs_page/components/jobs_table_spec.js b/spec/frontend/ci/jobs_page/components/jobs_table_spec.js
index d4e0ce92bc2557..d14afe7dd3e62d 100644
--- a/spec/frontend/ci/jobs_page/components/jobs_table_spec.js
+++ b/spec/frontend/ci/jobs_page/components/jobs_table_spec.js
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import JobsTable from '~/ci/jobs_page/components/jobs_table.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { DEFAULT_FIELDS_ADMIN } from '~/ci/admin/jobs_table/constants';
 import ProjectCell from '~/ci/admin/jobs_table/components/cells/project_cell.vue';
 import RunnerCell from '~/ci/admin/jobs_table/components/cells/runner_cell.vue';
@@ -13,7 +13,7 @@ describe('Jobs Table', () => {
   let wrapper;
 
   const findTable = () => wrapper.findComponent(GlTable);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findTableRows = () => wrapper.findAllByTestId('jobs-table-row');
   const findJobStage = () => wrapper.findByTestId('job-stage-name');
   const findJobName = () => wrapper.findByTestId('job-name');
@@ -45,7 +45,7 @@ describe('Jobs Table', () => {
     });
 
     it('displays job status', () => {
-      expect(findCiBadgeLink().exists()).toBe(true);
+      expect(findCiIcon().exists()).toBe(true);
     });
 
     it('displays the job stage, id and name', () => {
diff --git a/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js b/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js
index de9ee8a16bf404..cda84a9e4d3178 100644
--- a/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js
+++ b/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js
@@ -5,7 +5,7 @@ import JobItem from '~/ci/pipeline_details/graph/components/job_item.vue';
 import axios from '~/lib/utils/axios_utils';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import ActionComponent from '~/ci/common/private/job_action_component.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
@@ -31,7 +31,7 @@ describe('pipeline graph job item', () => {
   const findActionComponent = () => wrapper.findByTestId('ci-action-button');
   const findBadge = () => wrapper.findByTestId('job-bridge-badge');
   const findJobLink = () => wrapper.findByTestId('job-with-link');
-  const findJobCiBadge = () => wrapper.findComponent(CiBadgeLink);
+  const findJobCiIcon = () => wrapper.findComponent(CiIcon);
   const findModal = () => wrapper.findComponent(GlModal);
 
   const clickOnModalPrimaryBtn = () => findModal().vm.$emit('primary');
@@ -60,7 +60,7 @@ describe('pipeline graph job item', () => {
         ...mocks,
       },
       stubs: {
-        CiBadgeLink,
+        CiIcon,
       },
     });
   };
@@ -86,8 +86,8 @@ describe('pipeline graph job item', () => {
 
       expect(link.attributes('title')).toBe(`${mockJob.name} - ${mockJob.status.label}`);
 
-      expect(findJobCiBadge().exists()).toBe(true);
-      expect(findJobCiBadge().find('.ci-status-icon-success').exists()).toBe(true);
+      expect(findJobCiIcon().exists()).toBe(true);
+      expect(findJobCiIcon().find('.ci-status-icon-success').exists()).toBe(true);
 
       expect(wrapper.text()).toBe(mockJob.name);
     });
@@ -105,8 +105,8 @@ describe('pipeline graph job item', () => {
     });
 
     it('should render status and name', () => {
-      expect(findJobCiBadge().exists()).toBe(true);
-      expect(findJobCiBadge().find('.ci-status-icon-success').exists()).toBe(true);
+      expect(findJobCiIcon().exists()).toBe(true);
+      expect(findJobCiIcon().find('.ci-status-icon-success').exists()).toBe(true);
       expect(findJobLink().exists()).toBe(false);
 
       expect(wrapper.text()).toBe(mockJobWithoutDetails.name);
@@ -117,12 +117,12 @@ describe('pipeline graph job item', () => {
     });
   });
 
-  describe('CiBadgeLink', () => {
+  describe('CiIcon', () => {
     it('should not render a link', () => {
       createWrapper();
 
-      expect(findJobCiBadge().exists()).toBe(true);
-      expect(findJobCiBadge().props('useLink')).toBe(false);
+      expect(findJobCiIcon().exists()).toBe(true);
+      expect(findJobCiIcon().props('useLink')).toBe(false);
     });
   });
 
diff --git a/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js b/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js
index 6e13658a7735ce..6b8a525a15aca7 100644
--- a/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js
+++ b/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js
@@ -7,7 +7,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import PipelineDetailsHeader from '~/ci/pipeline_details/header/pipeline_details_header.vue';
 import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/ci/constants';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import cancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '~/ci/pipeline_details/graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
@@ -56,7 +56,7 @@ describe('Pipeline details header', () => {
     .mockResolvedValue(pipelineDeleteMutationResponseFailed);
 
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findStatus = () => wrapper.findComponent(CiBadgeLink);
+  const findStatus = () => wrapper.findComponent(CiIcon);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAllBadges = () => wrapper.findAllComponents(GlBadge);
   const findDeleteModal = () => wrapper.findComponent(GlModal);
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 4b357a9fc7c988..87df7676bf1f60 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 CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.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(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
   const findDropdownMenu = () =>
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
index ae069145292a2b..b79e7c6e251e77 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
@@ -1,5 +1,5 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import PipelineScheduleLastPipeline from '~/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue';
 import { mockPipelineScheduleNodes } from '../../../mock_data';
 
@@ -18,16 +18,14 @@ describe('Pipeline schedule last pipeline', () => {
     });
   };
 
-  const findCIBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findStatusText = () => wrapper.findByTestId('pipeline-schedule-status-text');
 
   it('displays pipeline status', () => {
     createComponent();
 
-    expect(findCIBadgeLink().exists()).toBe(true);
-    expect(findCIBadgeLink().props('status')).toBe(
-      defaultProps.schedule.lastPipeline.detailedStatus,
-    );
+    expect(findCiIcon().exists()).toBe(true);
+    expect(findCiIcon().props('status')).toBe(defaultProps.schedule.lastPipeline.detailedStatus);
     expect(findStatusText().exists()).toBe(false);
   });
 
@@ -35,6 +33,6 @@ describe('Pipeline schedule last pipeline', () => {
     createComponent({ schedule: mockPipelineScheduleNodes[0] });
 
     expect(findStatusText().text()).toBe('None');
-    expect(findCIBadgeLink().exists()).toBe(false);
+    expect(findCiIcon().exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
index 844a2d81832648..008a1b2c068485 100644
--- a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
+++ b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
@@ -5,7 +5,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitBoxPipelineStatus from '~/projects/commit_box/info/components/commit_box_pipeline_status.vue';
 import {
   COMMIT_BOX_POLL_INTERVAL,
@@ -32,7 +32,7 @@ describe('Commit box pipeline status', () => {
   const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
 
   const advanceToNextFetch = () => {
     jest.advanceTimersByTime(COMMIT_BOX_POLL_INTERVAL);
@@ -50,7 +50,7 @@ describe('Commit box pipeline status', () => {
         ...mockProvide,
       },
       stubs: {
-        CiBadgeLink,
+        CiIcon,
       },
       apolloProvider: createMockApolloProvider(handler),
     });
@@ -61,7 +61,7 @@ describe('Commit box pipeline status', () => {
       createComponent();
 
       expect(findLoadingIcon().exists()).toBe(true);
-      expect(findCiBadgeLink().exists()).toBe(false);
+      expect(findCiIcon().exists()).toBe(false);
     });
   });
 
@@ -73,7 +73,7 @@ describe('Commit box pipeline status', () => {
     });
 
     it('should display pipeline status after the query is resolved successfully', () => {
-      expect(findCiBadgeLink().exists()).toBe(true);
+      expect(findCiIcon().exists()).toBe(true);
 
       expect(findLoadingIcon().exists()).toBe(false);
       expect(createAlert).toHaveBeenCalledTimes(0);
@@ -90,7 +90,7 @@ describe('Commit box pipeline status', () => {
         },
       } = mockPipelineStatusResponse;
 
-      expect(findCiBadgeLink().attributes('href')).toBe(detailsPath);
+      expect(findCiIcon().attributes('href')).toBe(detailsPath);
     });
   });
 
diff --git a/spec/frontend/ide/components/jobs/detail/description_spec.js b/spec/frontend/ide/components/jobs/detail/description_spec.js
index 2bb0f3fccf48d4..5465615bf38371 100644
--- a/spec/frontend/ide/components/jobs/detail/description_spec.js
+++ b/spec/frontend/ide/components/jobs/detail/description_spec.js
@@ -23,10 +23,6 @@ describe('IDE job description', () => {
     expect(wrapper.find('.ci-status-icon').findComponent(GlIcon).exists()).toBe(true);
   });
 
-  it('renders a borderless CI icon', () => {
-    expect(wrapper.find('.borderless').findComponent(GlIcon).exists()).toBe(true);
-  });
-
   it('renders bridge job details without the job link', () => {
     wrapper = mount(Description, {
       propsData: {
diff --git a/spec/frontend/ide/components/jobs/item_spec.js b/spec/frontend/ide/components/jobs/item_spec.js
index ab442a2781763a..dc0f732d11e1e6 100644
--- a/spec/frontend/ide/components/jobs/item_spec.js
+++ b/spec/frontend/ide/components/jobs/item_spec.js
@@ -18,7 +18,7 @@ describe('IDE jobs item', () => {
   });
 
   it('renders CI icon', () => {
-    expect(wrapper.find('[data-testid="status_success_borderless-icon"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="status_success-icon"]').exists()).toBe(true);
   });
 
   it('does not render view logs button if not started', async () => {
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 44b9b44fc77a17..99cfc4f418fc09 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -10,12 +10,10 @@ exports[`Repository last commit component renders commit widget 1`] = `
     <div
       class="gl-ml-5"
     >
-      <ci-badge-link-stub
+      <ci-icon-stub
         aria-label="Pipeline: failed"
         class="js-commit-pipeline"
-        details-path="https://test.com/pipeline"
         showtooltip="true"
-        size="md"
         status="[object Object]"
         uselink="true"
       />
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
deleted file mode 100644
index e1660225a5c3d9..00000000000000
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import { GlBadge } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
-
-jest.mock('~/lib/utils/url_utility', () => ({
-  visitUrl: jest.fn(),
-}));
-
-describe('CI Badge Link Component', () => {
-  let wrapper;
-
-  const statuses = {
-    canceled: {
-      text: 'canceled',
-      label: 'canceled',
-      group: 'canceled',
-      icon: 'status_canceled',
-      details_path: 'status/canceled',
-    },
-    created: {
-      text: 'created',
-      label: 'created',
-      group: 'created',
-      icon: 'status_created',
-      details_path: 'status/created',
-    },
-    failed: {
-      text: 'failed',
-      label: 'failed',
-      group: 'failed',
-      icon: 'status_failed',
-      details_path: 'status/failed',
-    },
-    manual: {
-      text: 'manual',
-      label: 'manual action',
-      group: 'manual',
-      icon: 'status_manual',
-      details_path: 'status/manual',
-    },
-    pending: {
-      text: 'pending',
-      label: 'pending',
-      group: 'pending',
-      icon: 'status_pending',
-      details_path: 'status/pending',
-    },
-    preparing: {
-      text: 'preparing',
-      label: 'preparing',
-      group: 'preparing',
-      icon: 'status_preparing',
-      details_path: 'status/preparing',
-    },
-    running: {
-      text: 'running',
-      label: 'running',
-      group: 'running',
-      icon: 'status_running',
-      details_path: 'status/running',
-    },
-    scheduled: {
-      text: 'scheduled',
-      label: 'scheduled',
-      group: 'scheduled',
-      icon: 'status_scheduled',
-      details_path: 'status/scheduled',
-    },
-    skipped: {
-      text: 'skipped',
-      label: 'skipped',
-      group: 'skipped',
-      icon: 'status_skipped',
-      details_path: 'status/skipped',
-    },
-    success_warining: {
-      text: 'warning',
-      label: 'passed with warnings',
-      group: 'success-with-warnings',
-      icon: 'status_warning',
-      details_path: 'status/warning',
-    },
-    success: {
-      text: 'passed',
-      label: 'passed',
-      group: 'passed',
-      icon: 'status_success',
-      details_path: 'status/passed',
-    },
-  };
-
-  const findIcon = () => wrapper.findComponent(CiIcon);
-  const findBadge = () => wrapper.findComponent(GlBadge);
-  const findBadgeText = () => wrapper.find('[data-testid="ci-badge-text"');
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(CiBadgeLink, { propsData });
-  };
-
-  it.each(Object.keys(statuses))('should render badge for status: %s', (status) => {
-    createComponent({ status: statuses[status] });
-
-    expect(wrapper.attributes('href')).toBe(statuses[status].details_path);
-    expect(wrapper.text()).toBe(statuses[status].text);
-    expect(findBadge().props('size')).toBe('md');
-    expect(findIcon().exists()).toBe(true);
-  });
-
-  it.each`
-    status                       | textColor               | variant
-    ${statuses.success}          | ${'gl-text-green-700'}  | ${'success'}
-    ${statuses.success_warining} | ${'gl-text-orange-700'} | ${'warning'}
-    ${statuses.failed}           | ${'gl-text-red-700'}    | ${'danger'}
-    ${statuses.running}          | ${'gl-text-blue-700'}   | ${'info'}
-    ${statuses.pending}          | ${'gl-text-orange-700'} | ${'warning'}
-    ${statuses.preparing}        | ${'gl-text-gray-600'}   | ${'muted'}
-    ${statuses.canceled}         | ${'gl-text-gray-700'}   | ${'neutral'}
-    ${statuses.scheduled}        | ${'gl-text-gray-600'}   | ${'muted'}
-    ${statuses.skipped}          | ${'gl-text-gray-600'}   | ${'muted'}
-    ${statuses.manual}           | ${'gl-text-gray-700'}   | ${'neutral'}
-    ${statuses.created}          | ${'gl-text-gray-600'}   | ${'muted'}
-  `(
-    'should contain correct badge class and variant for status: $status.text',
-    ({ status, textColor, variant }) => {
-      createComponent({ status });
-
-      expect(findBadgeText().classes()).toContain(textColor);
-      expect(findBadge().props('variant')).toBe(variant);
-    },
-  );
-
-  it('should not render label', () => {
-    createComponent({ status: statuses.canceled, showText: false });
-
-    expect(wrapper.text()).toBe('');
-  });
-
-  it('should emit ciStatusBadgeClick event', () => {
-    createComponent({ status: statuses.success });
-
-    findBadge().vm.$emit('click');
-
-    expect(wrapper.emitted('ciStatusBadgeClick')).toEqual([[]]);
-  });
-
-  it('should render dynamic badge size', () => {
-    createComponent({ status: statuses.success, size: 'lg' });
-
-    expect(findBadge().props('size')).toBe('lg');
-  });
-
-  it('should have class `gl-px-2` when `showText` is false', () => {
-    createComponent({ status: statuses.success, size: 'md', showText: false });
-
-    expect(findBadge().classes()).toContain('gl-px-2');
-  });
-});
diff --git a/spec/frontend/vue_shared/components/ci_icon_spec.js b/spec/frontend/vue_shared/components/ci_icon_spec.js
index c907b776b9147f..1dc46538ec4957 100644
--- a/spec/frontend/vue_shared/components/ci_icon_spec.js
+++ b/spec/frontend/vue_shared/components/ci_icon_spec.js
@@ -25,46 +25,6 @@ describe('CI Icon component', () => {
     expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
   });
 
-  describe.each`
-    isActive
-    ${true}
-    ${false}
-  `('when isActive is $isActive', ({ isActive }) => {
-    it(`"active" class is ${isActive ? 'not ' : ''}added`, () => {
-      wrapper = shallowMount(CiIcon, {
-        propsData: {
-          status: {
-            group: 'success',
-            icon: 'status_success',
-          },
-          isActive,
-        },
-      });
-
-      expect(wrapper.classes('active')).toBe(isActive);
-    });
-  });
-
-  describe.each`
-    isInteractive
-    ${true}
-    ${false}
-  `('when isInteractive is $isInteractive', ({ isInteractive }) => {
-    it(`"interactive" class is ${isInteractive ? 'not ' : ''}added`, () => {
-      wrapper = shallowMount(CiIcon, {
-        propsData: {
-          status: {
-            group: 'success',
-            icon: 'status_success',
-          },
-          isInteractive,
-        },
-      });
-
-      expect(wrapper.classes('interactive')).toBe(isInteractive);
-    });
-  });
-
   describe('rendering a status', () => {
     it.each`
       icon                 | group         | cssClass
@@ -87,7 +47,7 @@ describe('CI Icon component', () => {
         },
       });
 
-      expect(wrapper.classes()).toContain(cssClass);
+      expect(wrapper.find('.ci-icon-wrapper').classes()).toContain(cssClass);
     });
   });
 });
diff --git a/spec/helpers/ci/status_helper_spec.rb b/spec/helpers/ci/status_helper_spec.rb
index dc56ec96e3b487..18983c832625bf 100644
--- a/spec/helpers/ci/status_helper_spec.rb
+++ b/spec/helpers/ci/status_helper_spec.rb
@@ -8,18 +8,6 @@
   let(:success_commit) { double("Ci::Pipeline", status: 'success') }
   let(:failed_commit) { double("Ci::Pipeline", status: 'failed') }
 
-  describe '#ci_icon_for_status' do
-    it 'renders to correct svg on success' do
-      expect(helper.ci_icon_for_status('success').to_s)
-        .to include 'status_success'
-    end
-
-    it 'renders the correct svg on failure' do
-      expect(helper.ci_icon_for_status('failed').to_s)
-        .to include 'status_failed'
-    end
-  end
-
   describe "#pipeline_status_cache_key" do
     it "builds a cache key for pipeline status" do
       pipeline_status = Gitlab::Cache::Ci::ProjectPipelineStatus.new(
@@ -33,12 +21,8 @@
     end
   end
 
-  describe "#render_status_with_link" do
-    subject { helper.render_status_with_link("success") }
-
-    it "renders a passed status icon" do
-      is_expected.to include("<span class=\"js-ci-status-badge-legacy ci-status-icon-success d-inline-flex")
-    end
+  describe "#render_ci_icon" do
+    subject { helper.render_ci_icon("success") }
 
     it "has 'Pipeline' as the status type in the title" do
       is_expected.to include("title=\"Pipeline: passed\"")
@@ -49,7 +33,7 @@
     end
 
     context "when pipeline has commit path" do
-      subject { helper.render_status_with_link("success", "/commit-path") }
+      subject { helper.render_ci_icon("success", "/commit-path") }
 
       it "links to commit" do
         is_expected.to include("href=\"/commit-path\"")
@@ -64,49 +48,24 @@
       end
     end
 
-    context "when different type than pipeline is provided" do
-      subject { helper.render_status_with_link("success", type: "commit") }
-
-      it "has the provided type in the title" do
-        is_expected.to include("title=\"Commit: passed\"")
-      end
-    end
-
     context "when tooltip_placement is provided" do
-      subject { helper.render_status_with_link("success", tooltip_placement: "right") }
+      subject { helper.render_ci_icon("success", tooltip_placement: "right") }
 
       it "has the provided tooltip placement" do
         is_expected.to include("data-placement=\"right\"")
       end
     end
 
-    context "when additional CSS classes are provided" do
-      subject { helper.render_status_with_link("success", cssclass: "extra-class") }
-
-      it "has appended extra class to icon classes" do
-        is_expected.to include('class="js-ci-status-badge-legacy ci-status-icon-success d-inline-flex ' \
-                               'gl-line-height-1 extra-class"')
-      end
-    end
-
     context "when container is provided" do
-      subject { helper.render_status_with_link("success", container: "my-container") }
+      subject { helper.render_ci_icon("success", container: "my-container") }
 
       it "has the provided container in data" do
         is_expected.to include("data-container=\"my-container\"")
       end
     end
 
-    context "when icon_size is provided" do
-      subject { helper.render_status_with_link("success", icon_size: 24) }
-
-      it "has the svg class to change size" do
-        is_expected.to include("<svg class=\"s24\"")
-      end
-    end
-
     context "when status is success-with-warnings" do
-      subject { helper.render_status_with_link("success-with-warnings") }
+      subject { helper.render_ci_icon("success-with-warnings") }
 
       it "renders warning variant of gl-badge" do
         is_expected.to include('gl-badge badge badge-pill badge-warning')
@@ -114,7 +73,7 @@
     end
 
     context "when status is manual" do
-      subject { helper.render_status_with_link("manual") }
+      subject { helper.render_ci_icon("manual") }
 
       it "renders neutral variant of gl-badge" do
         is_expected.to include('gl-badge badge badge-pill badge-neutral')
@@ -137,11 +96,40 @@
     end
 
     with_them do
-      subject { helper.render_status_with_link(status) }
+      subject { helper.render_ci_icon(status) }
 
       it 'uses the correct badge variant classes for gl-badge' do
         is_expected.to include("gl-badge badge badge-pill #{expected_badge_variant_class}")
       end
     end
   end
+
+  describe '#ci_icon_for_status' do
+    using RSpec::Parameterized::TableSyntax
+
+    where(:status, :icon_variant) do
+      'success'               | 'status_success'
+      'success-with-warnings' | 'status_warning'
+      'preparing'             | 'status_preparing'
+      'pending'               | 'status_pending'
+      'waiting-for-resource'  | 'status_pending'
+      'failed'                | 'status_failed'
+      'running'               | 'status_running'
+      'canceled'              | 'status_canceled'
+      'created'               | 'status_created'
+      'scheduled'             | 'status_scheduled'
+      'play'                  | 'play'
+      'skipped'               | 'status_skipped'
+      'manual'                | 'status_manual'
+    end
+
+    with_them do
+      subject { helper.render_ci_icon(status).to_s }
+
+      it 'uses the correct icon variant for status' do
+        is_expected.to include("ci-status-icon-#{status}")
+        is_expected.to include(icon_variant)
+      end
+    end
+  end
 end
diff --git a/spec/views/ci/status/_badge.html.haml_spec.rb b/spec/views/ci/status/_badge.html.haml_spec.rb
deleted file mode 100644
index 65497de1608081..00000000000000
--- a/spec/views/ci/status/_badge.html.haml_spec.rb
+++ /dev/null
@@ -1,92 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'ci/status/_badge' do
-  let(:user) { create(:user) }
-  let(:project) { create(:project, :private) }
-  let(:pipeline) { create(:ci_pipeline, project: project) }
-
-  context 'when rendering status for build' do
-    let(:build) do
-      create(:ci_build, :success, pipeline: pipeline)
-    end
-
-    context 'when user has ability to see details' do
-      before do
-        project.add_developer(user)
-      end
-
-      it 'has link to build details page' do
-        details_path = project_job_path(project, build)
-
-        render_status(build)
-
-        expect(rendered).to have_link 'Passed', href: details_path
-      end
-    end
-
-    context 'when user do not have ability to see build details' do
-      before do
-        render_status(build)
-      end
-
-      it 'contains build status text' do
-        expect(rendered).to have_content 'Passed'
-      end
-
-      it 'does not contain links' do
-        expect(rendered).not_to have_link 'Passed'
-      end
-    end
-  end
-
-  context 'when rendering status for external job' do
-    context 'when user has ability to see commit status details' do
-      before do
-        project.add_developer(user)
-      end
-
-      context 'status has external target url' do
-        before do
-          external_job = create(
-            :generic_commit_status,
-            status: :running,
-            pipeline: pipeline,
-            target_url: 'http://gitlab.com'
-          )
-
-          render_status(external_job)
-        end
-
-        it 'contains valid commit status text' do
-          expect(rendered).to have_content 'Running'
-        end
-
-        it 'has link to external status page' do
-          expect(rendered).to have_link 'Running', href: 'http://gitlab.com'
-        end
-      end
-
-      context 'status do not have external target url' do
-        before do
-          external_job = create(:generic_commit_status, status: :canceled)
-
-          render_status(external_job)
-        end
-
-        it 'contains valid commit status text' do
-          expect(rendered).to have_content 'Canceled'
-        end
-
-        it 'has link to external status page' do
-          expect(rendered).not_to have_link 'Canceled'
-        end
-      end
-    end
-  end
-
-  def render_status(resource)
-    render 'ci/status/badge', status: resource.detailed_status(user)
-  end
-end
diff --git a/spec/views/projects/commits/_commit.html.haml_spec.rb b/spec/views/projects/commits/_commit.html.haml_spec.rb
index d45f1da86e8be8..cc73418ea1e255 100644
--- a/spec/views/projects/commits/_commit.html.haml_spec.rb
+++ b/spec/views/projects/commits/_commit.html.haml_spec.rb
@@ -74,7 +74,7 @@
           commit: commit
         }
 
-        expect(rendered).not_to have_css("[data-testid='ci-status-badge-legacy']")
+        expect(rendered).not_to have_css("[data-testid='ci-icon']")
       end
     end
 
@@ -91,7 +91,7 @@
             commit: commit
           }
 
-          expect(rendered).to have_css("[data-testid='ci-status-badge-legacy']")
+          expect(rendered).to have_css("[data-testid='ci-icon']")
         end
       end
 
@@ -103,7 +103,7 @@
             commit: commit
           }
 
-          expect(rendered).not_to have_css("[data-testid='ci-status-badge-legacy']")
+          expect(rendered).not_to have_css("[data-testid='ci-icon']")
         end
       end
     end
-- 
GitLab


From 9595c7ea03a204a31f9f3ba6944a0e1abbc1bca7 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 23 Oct 2023 12:32:26 +0200
Subject: [PATCH 2/2] Remove HAML changes and split them into a new MR

---
 .../components/sidebar/stages_dropdown.vue    |  7 +-
 .../components/pipeline_status_badge.vue      |  2 +-
 .../vue_shared/components/ci_icon.vue         |  2 +-
 app/helpers/ci/status_helper.rb               | 91 ++++++++----------
 app/views/ci/status/_badge.html.haml          | 13 +++
 app/views/ci/status/_icon.html.haml           | 11 ++-
 app/views/projects/branches/_branch.html.haml |  2 +-
 app/views/projects/ci/builds/_build.html.haml |  2 +-
 .../_generic_commit_status.html.haml          |  2 +-
 .../issues/_related_branches.html.haml        |  4 +-
 app/views/projects/jobs/_header.html.haml     |  2 +-
 app/views/projects/tags/_tag.html.haml        |  2 +-
 locale/gitlab.pot                             |  6 ++
 spec/features/commits_spec.rb                 |  2 +-
 spec/features/dashboard/projects_spec.rb      |  4 +-
 .../ci/common/pipelines_table_spec.js         |  2 +-
 spec/helpers/ci/status_helper_spec.rb         | 86 +++++++++--------
 spec/views/ci/status/_badge.html.haml_spec.rb | 92 +++++++++++++++++++
 .../commits/_commit.html.haml_spec.rb         |  6 +-
 19 files changed, 228 insertions(+), 110 deletions(-)
 create mode 100644 app/views/ci/status/_badge.html.haml
 create mode 100644 spec/views/ci/status/_badge.html.haml_spec.rb

diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
index e6dadbebe8accf..e229abcbe128d8 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
@@ -94,7 +94,10 @@ export default {
 </script>
 <template>
   <div class="dropdown">
-    <div class="gl-display-flex gl-flex-wrap gl-gap-2 js-pipeline-info" data-testid="pipeline-info">
+    <div
+      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-2 js-pipeline-info"
+      data-testid="pipeline-info"
+    >
       <gl-sprintf :message="pipelineInfo">
         <template #bold="{ content }">
           <span class="gl-display-flex gl-font-weight-bold">{{ content }}</span>
@@ -125,7 +128,7 @@ export default {
         <template #ref>
           <gl-link
             :href="pipeline.ref.path"
-            class="link-commit ref-name gl-mt-1"
+            class="link-commit ref-name"
             data-testid="source-ref-link"
             >{{ pipeline.ref.name }}</gl-link
           ><clipboard-button
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
index 4355906b9beb72..3dcbcf260dc8bd 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     trackClick() {
-      this.track('click_ci_icon', { label: TRACKING_CATEGORIES.table });
+      this.track('click_ci_status_badge', { label: TRACKING_CATEGORIES.table });
     },
   },
 };
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 601985712daa7b..9f4cfa6f690e0d 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -148,7 +148,7 @@ export default {
         },
       ]"
     >
-      <gl-icon :name="icon" :size="16" :aria-label="status.icon" /> </span
+      <gl-icon :name="icon" :aria-label="status.icon" /> </span
     ><span
       v-if="showStatusText"
       class="gl-mx-2 gl-white-space-nowrap"
diff --git a/app/helpers/ci/status_helper.rb b/app/helpers/ci/status_helper.rb
index 8bce1ccd7782c8..c1e61e9d67244a 100644
--- a/app/helpers/ci/status_helper.rb
+++ b/app/helpers/ci/status_helper.rb
@@ -16,41 +16,41 @@ def ci_status_for_statuseable(subject)
 
     # rubocop:disable Metrics/CyclomaticComplexity
     def ci_icon_for_status(status, size: 16)
+      if detailed_status?(status)
+        return sprite_icon(status.icon, size: size)
+      end
+
       icon_name =
-        if detailed_status?(status)
-          status.icon
+        case status
+        when 'success'
+          'status_success'
+        when 'success-with-warnings'
+          'status_warning'
+        when 'failed'
+          'status_failed'
+        when 'pending'
+          'status_pending'
+        when 'waiting_for_resource'
+          'status_pending'
+        when 'preparing'
+          'status_preparing'
+        when 'running'
+          'status_running'
+        when 'play'
+          'play'
+        when 'created'
+          'status_created'
+        when 'skipped'
+          'status_skipped'
+        when 'manual'
+          'status_manual'
+        when 'scheduled'
+          'status_scheduled'
         else
-          case status
-          when 'success'
-            'status_success'
-          when 'success-with-warnings'
-            'status_warning'
-          when 'failed'
-            'status_failed'
-          when 'pending'
-            'status_pending'
-          when 'waiting-for-resource'
-            'status_pending'
-          when 'preparing'
-            'status_preparing'
-          when 'running'
-            'status_running'
-          when 'play'
-            'play'
-          when 'created'
-            'status_created'
-          when 'skipped'
-            'status_skipped'
-          when 'manual'
-            'status_manual'
-          when 'scheduled'
-            'status_scheduled'
-          else
-            'status_canceled'
-          end
+          'status_canceled'
         end
 
-      sprite_icon(icon_name, size: size, css_class: 'gl-icon')
+      sprite_icon(icon_name, size: size)
     end
     # rubocop:enable Metrics/CyclomaticComplexity
 
@@ -68,34 +68,23 @@ def render_commit_status(commit, status, ref: nil, tooltip_placement: 'left')
       project = commit.project
       path = pipelines_project_commit_path(project, commit, ref: ref)
 
-      render_ci_icon(
+      render_status_with_link(
         status,
         path,
         tooltip_placement: tooltip_placement,
-        option_css_classes: 'gl-ml-3'
-      )
+        icon_size: 16)
     end
 
-    def render_ci_icon(
-      status,
-      path = nil,
-      tooltip_placement: 'left',
-      option_css_classes: '',
-      container: 'body',
-      show_status_text: false
-    )
+    def render_status_with_link(status, path = nil, type: _('pipeline'), tooltip_placement: 'left', cssclass: '', container: 'body', icon_size: 16)
       variant = badge_variant(status)
-      klass = "js-ci-status-badge-legacy ci-status-icon #{ci_icon_class_for_status(status)} gl-rounded-full gl-justify-content-center gl-line-height-0"
-      title = "#{_('Pipeline')}: #{ci_label_for_status(status)}"
-      data = { toggle: 'tooltip', placement: tooltip_placement, container: container, testid: 'ci-icon' }
-      badge_classes = "ci-icon gl-p-2 #{option_css_classes}"
+      klass = "js-ci-status-badge-legacy #{ci_icon_class_for_status(status)} d-inline-flex gl-line-height-1 #{cssclass}"
+      title = "#{type.titleize}: #{ci_label_for_status(status)}"
+      data = { toggle: 'tooltip', placement: tooltip_placement, container: container, testid: 'ci-status-badge-legacy' }
+      badge_classes = 'gl-px-2 gl-ml-3'
 
       gl_badge_tag(variant: variant, size: :md, href: path, class: badge_classes, title: title, data: data) do
-        if show_status_text
-          content_tag(:span, ci_icon_for_status(status), { class: klass }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-white-space-nowrap' })
-        else
-          content_tag(:span, ci_icon_for_status(status), { class: klass })
-        end
+        content_tag :span, ci_icon_for_status(status, size: icon_size),
+          class: klass
       end
     end
 
diff --git a/app/views/ci/status/_badge.html.haml b/app/views/ci/status/_badge.html.haml
new file mode 100644
index 00000000000000..e3b409dea762e8
--- /dev/null
+++ b/app/views/ci/status/_badge.html.haml
@@ -0,0 +1,13 @@
+- status = local_assigns.fetch(:status)
+- link   = local_assigns.fetch(:link, true)
+- title  = local_assigns.fetch(:title, nil)
+- css_classes = "gl-display-inline-flex gl-align-items-center gl-gap-2 gl-line-height-0 gl-px-3 gl-py-2 gl-rounded-base ci-status ci-#{status.group} #{'has-tooltip' if title.present?}"
+
+- if link && status.has_details?
+  = link_to status.details_path, class: css_classes, title: title, data: { html: title.present? } do
+    = sprite_icon(status.icon)
+    = status.text
+- else
+  %span{ class: css_classes, title: title, data: { html: title.present? } }
+    = sprite_icon(status.icon)
+    = status.text
diff --git a/app/views/ci/status/_icon.html.haml b/app/views/ci/status/_icon.html.haml
index bcb83874bfb79e..48e4472c117671 100644
--- a/app/views/ci/status/_icon.html.haml
+++ b/app/views/ci/status/_icon.html.haml
@@ -1,7 +1,10 @@
 - status             = local_assigns.fetch(:status)
-- path               = local_assigns.fetch(:path, status.has_details? ? status.details_path : nil)
 - tooltip_placement  = local_assigns.fetch(:tooltip_placement, "left")
-- option_css_classes = local_assigns.fetch(:option_css_classes, nil)
-- show_status_text   = local_assigns.fetch(:show_status_text, false)
+- path               = local_assigns.fetch(:path, status.has_details? ? status.details_path : nil)
+- option_css_classes = local_assigns.fetch(:option_css_classes, '')
+- css_classes        = "gl-px-2 #{option_css_classes}"
+- ci_css_classes     = "ci-status-icon ci-status-icon-#{status.group} gl-line-height-1"
+- title              = s_("PipelineStatusTooltip|Pipeline: %{ci_status}") % {ci_status: status.label}
 
-= render_ci_icon(status, path, tooltip_placement: tooltip_placement, option_css_classes: option_css_classes, show_status_text: show_status_text)
+= gl_badge_tag(variant: badge_variant(status), size: :md, href: path, class: css_classes, title: title, data: { toggle: 'tooltip', placement: tooltip_placement, testid: "ci-status-badge" }) do
+  = content_tag :span, sprite_icon(status.icon, size: 16), class: ci_css_classes
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 360e38afb5d16c..61961172eb28a8 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -28,7 +28,7 @@
 
   .pipeline-status.d-none.d-md-block<
     - if commit_status
-      = render 'ci/status/icon', status: commit_status
+      = render 'ci/status/icon', size: 16, status: commit_status
     - elsif show_commit_status
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-3
         %svg.s16
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index a622895b4de158..4017db459a9bf6 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -14,7 +14,7 @@
   %td.status
     -# Sending 'status' prevents calling the user relation inside the presenter, generating N+1,
     -# see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68743
-    = render "ci/status/icon", status: status, show_status_text: true
+    = render "ci/status/badge", status: status, title: job.status_title(status)
 
   %td
     - if can?(current_user, :read_build, job)
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index e766536f12bf73..a3569d41714ad2 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -7,7 +7,7 @@
 
 %tr.generic-commit-status{ class: ('retried' if retried) }
   %td.status
-    = render 'ci/status/icon', status: generic_commit_status.detailed_status(current_user), show_status_text: true
+    = render 'ci/status/badge', status: generic_commit_status.detailed_status(current_user)
 
   %td
     = generic_commit_status.name
diff --git a/app/views/projects/issues/_related_branches.html.haml b/app/views/projects/issues/_related_branches.html.haml
index 4fa5ad05c2b8e1..ba5c41be7c665f 100644
--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -18,8 +18,8 @@
                   .item-contents.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-flex-grow-1.gl-min-h-7
                     .item-title.gl-display-flex.mb-xl-0.gl-min-w-0.gl-align-items-center
                       - if branch[:pipeline_status].present?
-                        %span.related-branch-ci-status.gl-mt-n2.gl-mb-n2.gl-mr-3
-                          = render 'ci/status/icon', status: branch[:pipeline_status]
+                        %span.related-branch-ci-status
+                          = render 'ci/status/icon', status: branch[:pipeline_status], option_css_classes: 'gl-display-block gl-mr-3'
                       %span.related-branch-info
                         %strong
                           = link_to branch[:name], branch[:link], class: "ref-name"
diff --git a/app/views/projects/jobs/_header.html.haml b/app/views/projects/jobs/_header.html.haml
index a77e8f2d0b471e..018ff09347593b 100644
--- a/app/views/projects/jobs/_header.html.haml
+++ b/app/views/projects/jobs/_header.html.haml
@@ -2,7 +2,7 @@
 
 .content-block.build-header.top-area.page-content-header
   .header-content
-    = render 'ci/status/icon', status: @build.detailed_status(current_user), show_status_text: true
+    = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false, title: @build.status_title
     %strong
       Job
       = link_to "##{@build.id}", project_job_path(@project, @build), class: 'js-build-id'
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index f04d6ab341fad8..cc49ff9e293699 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -30,7 +30,7 @@
         = render partial: 'projects/commit/signature', object: tag.signature
 
     - if commit_status
-      = render 'ci/status/icon', status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
+      = render 'ci/status/icon', size: 24, status: commit_status, option_css_classes: 'gl-display-inline-flex gl-vertical-align-middle gl-mr-5'
     - elsif @tag_pipeline_statuses && @tag_pipeline_statuses.any?
       .gl-display-inline-flex.gl-vertical-align-middle.gl-mr-5
         %svg.s24
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0e28b52f02e8cf..4ba49ace5c768d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34701,6 +34701,9 @@ msgstr ""
 msgid "PipelineStatusTooltip|Pipeline: %{ciStatus}"
 msgstr ""
 
+msgid "PipelineStatusTooltip|Pipeline: %{ci_status}"
+msgstr ""
+
 msgid "PipelineWizardDefaultCommitMessage|Add %{filename}"
 msgstr ""
 
@@ -57284,6 +57287,9 @@ msgstr ""
 msgid "personal access tokens"
 msgstr ""
 
+msgid "pipeline"
+msgstr ""
+
 msgid "pipelineEditorWalkthrough|Let's do this!"
 msgstr ""
 
diff --git a/spec/features/commits_spec.rb b/spec/features/commits_spec.rb
index 1df1b7373d911f..5f880af37dc383 100644
--- a/spec/features/commits_spec.rb
+++ b/spec/features/commits_spec.rb
@@ -81,7 +81,7 @@
 
           it 'shows correct build status from default branch' do
             page.within("//li[@id='commit-#{pipeline.short_sha}']") do
-              expect(page).to have_css("[data-testid='ci-icon']")
+              expect(page).to have_css("[data-testid='ci-status-badge-legacy']")
               expect(page).to have_css('.ci-status-icon-success')
             end
           end
diff --git a/spec/features/dashboard/projects_spec.rb b/spec/features/dashboard/projects_spec.rb
index 65436b35cd7708..90ad6fcea25400 100644
--- a/spec/features/dashboard/projects_spec.rb
+++ b/spec/features/dashboard/projects_spec.rb
@@ -153,7 +153,7 @@
 
       page.within('[data-testid="project_controls"]') do
         expect(page).to have_xpath("//a[@href='#{pipelines_project_commit_path(project, project.commit, ref: pipeline.ref)}']")
-        expect(page).to have_css("[data-testid='ci-icon']")
+        expect(page).to have_css("[data-testid='ci-status-badge']")
         expect(page).to have_css('.ci-status-icon-success')
         expect(page).to have_link('Pipeline: passed')
       end
@@ -165,7 +165,7 @@
 
         page.within('[data-testid="project_controls"]') do
           expect(page).not_to have_xpath("//a[@href='#{pipelines_project_commit_path(project, project.commit, ref: pipeline.ref)}']")
-          expect(page).not_to have_css("[data-testid='ci-icon']")
+          expect(page).not_to have_css("[data-testid='ci-status-badge']")
           expect(page).not_to have_css('.ci-status-icon-success')
           expect(page).not_to have_link('Pipeline: passed')
         end
diff --git a/spec/frontend/ci/common/pipelines_table_spec.js b/spec/frontend/ci/common/pipelines_table_spec.js
index f1f90e240e8a2c..f6d3121109fdf0 100644
--- a/spec/frontend/ci/common/pipelines_table_spec.js
+++ b/spec/frontend/ci/common/pipelines_table_spec.js
@@ -267,7 +267,7 @@ describe('Pipelines Table', () => {
     it('tracks status badge click', () => {
       findCiIcon().vm.$emit('ciStatusBadgeClick');
 
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_ci_icon', {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_ci_status_badge', {
         label: TRACKING_CATEGORIES.table,
       });
     });
diff --git a/spec/helpers/ci/status_helper_spec.rb b/spec/helpers/ci/status_helper_spec.rb
index 18983c832625bf..dc56ec96e3b487 100644
--- a/spec/helpers/ci/status_helper_spec.rb
+++ b/spec/helpers/ci/status_helper_spec.rb
@@ -8,6 +8,18 @@
   let(:success_commit) { double("Ci::Pipeline", status: 'success') }
   let(:failed_commit) { double("Ci::Pipeline", status: 'failed') }
 
+  describe '#ci_icon_for_status' do
+    it 'renders to correct svg on success' do
+      expect(helper.ci_icon_for_status('success').to_s)
+        .to include 'status_success'
+    end
+
+    it 'renders the correct svg on failure' do
+      expect(helper.ci_icon_for_status('failed').to_s)
+        .to include 'status_failed'
+    end
+  end
+
   describe "#pipeline_status_cache_key" do
     it "builds a cache key for pipeline status" do
       pipeline_status = Gitlab::Cache::Ci::ProjectPipelineStatus.new(
@@ -21,8 +33,12 @@
     end
   end
 
-  describe "#render_ci_icon" do
-    subject { helper.render_ci_icon("success") }
+  describe "#render_status_with_link" do
+    subject { helper.render_status_with_link("success") }
+
+    it "renders a passed status icon" do
+      is_expected.to include("<span class=\"js-ci-status-badge-legacy ci-status-icon-success d-inline-flex")
+    end
 
     it "has 'Pipeline' as the status type in the title" do
       is_expected.to include("title=\"Pipeline: passed\"")
@@ -33,7 +49,7 @@
     end
 
     context "when pipeline has commit path" do
-      subject { helper.render_ci_icon("success", "/commit-path") }
+      subject { helper.render_status_with_link("success", "/commit-path") }
 
       it "links to commit" do
         is_expected.to include("href=\"/commit-path\"")
@@ -48,24 +64,49 @@
       end
     end
 
+    context "when different type than pipeline is provided" do
+      subject { helper.render_status_with_link("success", type: "commit") }
+
+      it "has the provided type in the title" do
+        is_expected.to include("title=\"Commit: passed\"")
+      end
+    end
+
     context "when tooltip_placement is provided" do
-      subject { helper.render_ci_icon("success", tooltip_placement: "right") }
+      subject { helper.render_status_with_link("success", tooltip_placement: "right") }
 
       it "has the provided tooltip placement" do
         is_expected.to include("data-placement=\"right\"")
       end
     end
 
+    context "when additional CSS classes are provided" do
+      subject { helper.render_status_with_link("success", cssclass: "extra-class") }
+
+      it "has appended extra class to icon classes" do
+        is_expected.to include('class="js-ci-status-badge-legacy ci-status-icon-success d-inline-flex ' \
+                               'gl-line-height-1 extra-class"')
+      end
+    end
+
     context "when container is provided" do
-      subject { helper.render_ci_icon("success", container: "my-container") }
+      subject { helper.render_status_with_link("success", container: "my-container") }
 
       it "has the provided container in data" do
         is_expected.to include("data-container=\"my-container\"")
       end
     end
 
+    context "when icon_size is provided" do
+      subject { helper.render_status_with_link("success", icon_size: 24) }
+
+      it "has the svg class to change size" do
+        is_expected.to include("<svg class=\"s24\"")
+      end
+    end
+
     context "when status is success-with-warnings" do
-      subject { helper.render_ci_icon("success-with-warnings") }
+      subject { helper.render_status_with_link("success-with-warnings") }
 
       it "renders warning variant of gl-badge" do
         is_expected.to include('gl-badge badge badge-pill badge-warning')
@@ -73,7 +114,7 @@
     end
 
     context "when status is manual" do
-      subject { helper.render_ci_icon("manual") }
+      subject { helper.render_status_with_link("manual") }
 
       it "renders neutral variant of gl-badge" do
         is_expected.to include('gl-badge badge badge-pill badge-neutral')
@@ -96,40 +137,11 @@
     end
 
     with_them do
-      subject { helper.render_ci_icon(status) }
+      subject { helper.render_status_with_link(status) }
 
       it 'uses the correct badge variant classes for gl-badge' do
         is_expected.to include("gl-badge badge badge-pill #{expected_badge_variant_class}")
       end
     end
   end
-
-  describe '#ci_icon_for_status' do
-    using RSpec::Parameterized::TableSyntax
-
-    where(:status, :icon_variant) do
-      'success'               | 'status_success'
-      'success-with-warnings' | 'status_warning'
-      'preparing'             | 'status_preparing'
-      'pending'               | 'status_pending'
-      'waiting-for-resource'  | 'status_pending'
-      'failed'                | 'status_failed'
-      'running'               | 'status_running'
-      'canceled'              | 'status_canceled'
-      'created'               | 'status_created'
-      'scheduled'             | 'status_scheduled'
-      'play'                  | 'play'
-      'skipped'               | 'status_skipped'
-      'manual'                | 'status_manual'
-    end
-
-    with_them do
-      subject { helper.render_ci_icon(status).to_s }
-
-      it 'uses the correct icon variant for status' do
-        is_expected.to include("ci-status-icon-#{status}")
-        is_expected.to include(icon_variant)
-      end
-    end
-  end
 end
diff --git a/spec/views/ci/status/_badge.html.haml_spec.rb b/spec/views/ci/status/_badge.html.haml_spec.rb
new file mode 100644
index 00000000000000..65497de1608081
--- /dev/null
+++ b/spec/views/ci/status/_badge.html.haml_spec.rb
@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'ci/status/_badge' do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :private) }
+  let(:pipeline) { create(:ci_pipeline, project: project) }
+
+  context 'when rendering status for build' do
+    let(:build) do
+      create(:ci_build, :success, pipeline: pipeline)
+    end
+
+    context 'when user has ability to see details' do
+      before do
+        project.add_developer(user)
+      end
+
+      it 'has link to build details page' do
+        details_path = project_job_path(project, build)
+
+        render_status(build)
+
+        expect(rendered).to have_link 'Passed', href: details_path
+      end
+    end
+
+    context 'when user do not have ability to see build details' do
+      before do
+        render_status(build)
+      end
+
+      it 'contains build status text' do
+        expect(rendered).to have_content 'Passed'
+      end
+
+      it 'does not contain links' do
+        expect(rendered).not_to have_link 'Passed'
+      end
+    end
+  end
+
+  context 'when rendering status for external job' do
+    context 'when user has ability to see commit status details' do
+      before do
+        project.add_developer(user)
+      end
+
+      context 'status has external target url' do
+        before do
+          external_job = create(
+            :generic_commit_status,
+            status: :running,
+            pipeline: pipeline,
+            target_url: 'http://gitlab.com'
+          )
+
+          render_status(external_job)
+        end
+
+        it 'contains valid commit status text' do
+          expect(rendered).to have_content 'Running'
+        end
+
+        it 'has link to external status page' do
+          expect(rendered).to have_link 'Running', href: 'http://gitlab.com'
+        end
+      end
+
+      context 'status do not have external target url' do
+        before do
+          external_job = create(:generic_commit_status, status: :canceled)
+
+          render_status(external_job)
+        end
+
+        it 'contains valid commit status text' do
+          expect(rendered).to have_content 'Canceled'
+        end
+
+        it 'has link to external status page' do
+          expect(rendered).not_to have_link 'Canceled'
+        end
+      end
+    end
+  end
+
+  def render_status(resource)
+    render 'ci/status/badge', status: resource.detailed_status(user)
+  end
+end
diff --git a/spec/views/projects/commits/_commit.html.haml_spec.rb b/spec/views/projects/commits/_commit.html.haml_spec.rb
index cc73418ea1e255..d45f1da86e8be8 100644
--- a/spec/views/projects/commits/_commit.html.haml_spec.rb
+++ b/spec/views/projects/commits/_commit.html.haml_spec.rb
@@ -74,7 +74,7 @@
           commit: commit
         }
 
-        expect(rendered).not_to have_css("[data-testid='ci-icon']")
+        expect(rendered).not_to have_css("[data-testid='ci-status-badge-legacy']")
       end
     end
 
@@ -91,7 +91,7 @@
             commit: commit
           }
 
-          expect(rendered).to have_css("[data-testid='ci-icon']")
+          expect(rendered).to have_css("[data-testid='ci-status-badge-legacy']")
         end
       end
 
@@ -103,7 +103,7 @@
             commit: commit
           }
 
-          expect(rendered).not_to have_css("[data-testid='ci-icon']")
+          expect(rendered).not_to have_css("[data-testid='ci-status-badge-legacy']")
         end
       end
     end
-- 
GitLab