1 files changed, 10 insertions, 5 deletions
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 f5a1ff2f6fd..c377c16fb13 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
@@ -5,6 +5,7 @@ import { sprintf, __ } from '~/locale';
 import PipelineStage from '~/pipelines/components/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import PipelineLink from '~/vue_shared/components/ci_pipeline_link.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
 
@@ -16,6 +17,7 @@ export default {
     Icon,
     TooltipOnTruncate,
     GlLink,
+    PipelineLink,
     LinkedPipelinesMiniList: () =>
       import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
   },
@@ -94,8 +96,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="hasPipeline || hasCIError" class="ci-widget media js-ci-widget">
-    <template v-if="hasCIError">
+  <div class="ci-widget media js-ci-widget">
+    <template v-if="!hasPipeline || hasCIError">
       <div
         class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-default"
       >
@@ -112,9 +114,12 @@ export default {
           <div class="media-body">
             <div class="font-weight-bold js-pipeline-info-container">
               {{ s__('Pipeline|Pipeline') }}
-              <gl-link :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number"
-                >#{{ pipeline.id }}</gl-link
-              >
+              <pipeline-link
+                :href="pipeline.path"
+                :pipeline-id="pipeline.id"
+                :pipeline-iid="pipeline.iid"
+                class="pipeline-id pipeline-iid font-weight-normal"
+              />
               {{ pipeline.details.status.label }}
               <template v-if="hasCommitInfo">
                 {{ s__('Pipeline|for') }}