1 files changed, 12 insertions, 18 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 1e1a2049414..fe69e96bd87 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
@@ -9,11 +9,10 @@ import {
   GlTooltipDirective,
   GlSafeHtmlDirective,
 } from '@gitlab/ui';
-import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
 import { s__, n__ } from '~/locale';
-import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
-import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
+import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { MT_MERGE_STRATEGY } from '../constants';
@@ -31,14 +30,11 @@ export default {
     PipelineMiniGraph,
     TimeAgoTooltip,
     TooltipOnTruncate,
-    LinkedPipelinesMiniList: () =>
-      import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
     SafeHtml: GlSafeHtmlDirective,
   },
-  mixins: [mrWidgetPipelineMixin],
   props: {
     pipeline: {
       type: Object,
@@ -172,7 +168,7 @@ export default {
       </p>
     </template>
     <template v-else-if="!hasPipeline">
-      <gl-loading-icon size="lg" />
+      <gl-loading-icon size="md" />
       <p
         class="gl-flex-grow-1 gl-display-flex gl-ml-3 gl-mb-0"
         data-testid="monitoring-pipeline-message"
@@ -276,17 +272,15 @@ export default {
           </div>
         </div>
         <div>
-          <span class="gl-align-items-center gl-display-inline-flex mr-widget-pipeline-graph">
-            <span class="gl-align-items-center gl-display-inline-flex gl-flex-wrap stage-cell">
-              <linked-pipelines-mini-list v-if="triggeredBy.length" :triggered-by="triggeredBy" />
-              <pipeline-mini-graph
-                v-if="hasStages"
-                stages-class="mr-widget-pipeline-stages"
-                :stages="pipeline.details.stages"
-                :is-merge-train="isMergeTrain"
-              />
-            </span>
-            <linked-pipelines-mini-list v-if="triggered.length" :triggered="triggered" />
+          <span class="gl-align-items-center gl-display-inline-flex">
+            <pipeline-mini-graph
+              v-if="pipeline.details.stages"
+              :downstream-pipelines="pipeline.triggered"
+              :is-merge-train="isMergeTrain"
+              :stages="pipeline.details.stages"
+              :upstream-pipeline="pipeline.triggered_by"
+              stages-class="mr-widget-pipeline-stages"
+            />
             <pipeline-artifacts :pipeline-id="pipeline.id" :artifacts="artifacts" class="gl-ml-3" />
           </span>
         </div>