Add latest changes from gitlab-org/gitlab@master

6 files changed, 41 insertions, 34 deletions

diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
index e33ce66ca66..44cf11acfe2 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
@@ -158,7 +158,7 @@ export default {
         <a :href="status.detailsPath" class="gl-mr-auto">
           <ci-badge-link
             :status="status"
-            badge-size="md"
+            size="md"
             :show-text="false"
             data-testid="pipeline-status-icon"
           />
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
index bbe0f1fbefc..34640d49b80 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
@@ -13,7 +13,7 @@
  */
 
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { createAlert } from '~/alert';
 import eventHub from '~/ci/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -33,7 +33,7 @@ export default {
     positionFixed: true,
   },
   components: {
-    CiIcon,
+    CiBadgeLink,
     GlLoadingIcon,
     GlDropdown,
     LegacyJobItem,
@@ -126,14 +126,13 @@ export default {
     @show="onShowDropdown"
   >
     <template #button-content>
-      <ci-icon
-        is-borderless
-        is-interactive
-        css-classes="gl-rounded-full"
-        :is-active="isDropdownOpen"
-        :size="24"
+      <ci-badge-link
         :status="stage.status"
-        class="gl-display-inline-flex gl-align-items-center gl-border gl-z-index-1"
+        size="md"
+        :show-text="false"
+        :show-tooltip="false"
+        :use-link="false"
+        class="gl-mb-0!"
       />
     </template>
     <div v-if="isLoading" class="gl--flex-center gl-p-2" data-testid="pipeline-stage-loading-state">
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
index 8567654a89e..cc703d29e23 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { accessValue } from './accessors/linked_pipelines_accessors';
 /**
  * Renders the upstream/downstream portions of the pipeline mini graph.
@@ -11,7 +11,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    CiIcon,
+    CiBadgeLink,
   },
   inject: {
     dataMethod: {
@@ -99,24 +99,18 @@ export default {
     }"
     class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
   >
-    <a
+    <ci-badge-link
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
       v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
-      :href="pipeline.path"
+      :status="pipelineStatus(pipeline)"
+      size="md"
+      :show-text="false"
+      :show-tooltip="false"
       :class="triggerButtonClass(pipeline)"
-      class="linked-pipeline-mini-item gl-display-inline-flex gl-mr-2 gl-my-2 gl-rounded-full gl-vertical-align-middle"
+      class="linked-pipeline-mini-item gl-mb-0!"
       data-testid="linked-pipeline-mini-item"
-    >
-      <ci-icon
-        is-borderless
-        is-interactive
-        css-classes="gl-rounded-full"
-        :size="24"
-        :status="pipelineStatus(pipeline)"
-        class="gl-align-items-center gl-border gl-display-inline-flex"
-      />
-    </a>
+    />
 
     <a
       v-if="shouldRenderCounter"
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
index 8072116e2f5..0feaf8db82b 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
@@ -67,7 +67,7 @@ export default {
       v-else
       :status="pipelineStatus"
       :details-path="pipelineStatus.detailsPath"
-      badge-size="md"
+      size="md"
       :show-text="false"
     />
   </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index bfcd4610379..8eec961f837 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
 import PipelineArtifacts from '~/ci/pipelines_page/components/pipelines_artifacts.vue';
 import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
@@ -21,7 +21,7 @@ import { MT_MERGE_STRATEGY } from '../constants';
 export default {
   name: 'MRWidgetPipeline',
   components: {
-    CiIcon,
+    CiBadgeLink,
     GlLink,
     GlLoadingIcon,
     GlIcon,
@@ -194,9 +194,13 @@ export default {
       </p>
     </template>
     <template v-else-if="hasPipeline">
-      <a :href="status.details_path" class="gl-align-self-start gl-mt-2 gl-mr-3">
-        <ci-icon :status="status" :size="24" class="gl-display-flex" />
-      </a>
+      <ci-badge-link
+        :status="status"
+        :href="status.details_path"
+        size="md"
+        :show-text="false"
+        class="gl-align-self-start gl-mt-2 gl-mr-3"
+      />
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">
           <div class="media-body">
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 036c03a9a1e..3cd00972e17 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -57,17 +57,27 @@ export default {
         return badgeSizeOptions[value] !== undefined;
       },
     },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    useLink: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
   },
   computed: {
     isNotLargeBadgeSize() {
-      return this.badgeSize !== badgeSizeOptions.lg;
+      return this.size !== badgeSizeOptions.lg;
     },
     title() {
-      return !this.showText ? this.status?.text : '';
+      return this.showTooltip && !this.showText ? this.status?.text : '';
     },
     detailsPath() {
       // For now, this can either come from graphQL with camelCase or REST API in snake_case
-      return this.status.detailsPath || this.status.details_path;
+      return this.useLink && (this.status.detailsPath || this.status.details_path);
     },
     badgeStyles() {
       switch (this.status.icon) {