1 files changed, 12 insertions, 24 deletions
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
index 1cdf26b76b7..4505dd1f85c 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
@@ -2,11 +2,11 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
 import {
   getQueryHeaders,
   toggleQueryPollingByVisibility,
 } from '~/pipelines/components/graph/utils';
+import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
 import { formatStages } from '../utils';
 import getLinkedPipelinesQuery from '../graphql/queries/get_linked_pipelines.query.graphql';
 import getPipelineStagesQuery from '../graphql/queries/get_pipeline_stages.query.graphql';
@@ -21,8 +21,6 @@ export default {
   components: {
     GlLoadingIcon,
     PipelineMiniGraph,
-    LinkedPipelinesMiniList: () =>
-      import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
   },
   inject: {
     fullPath: {
@@ -92,12 +90,12 @@ export default {
     };
   },
   computed: {
-    hasDownstream() {
-      return this.pipeline?.downstream?.nodes.length > 0;
-    },
     downstreamPipelines() {
       return this.pipeline?.downstream?.nodes;
     },
+    pipelinePath() {
+      return this.pipeline?.path ?? '';
+    },
     upstreamPipeline() {
       return this.pipeline?.upstream;
     },
@@ -128,23 +126,13 @@ export default {
 <template>
   <div class="gl-pt-2">
     <gl-loading-icon v-if="$apollo.queries.pipeline.loading" />
-    <div v-else class="gl-align-items-center gl-display-flex">
-      <linked-pipelines-mini-list
-        v-if="upstreamPipeline"
-        :triggered-by="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
-          upstreamPipeline,
-        ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
-        data-testid="commit-box-mini-graph-upstream"
-      />
-
-      <pipeline-mini-graph :stages="formattedStages" data-testid="commit-box-mini-graph" />
-
-      <linked-pipelines-mini-list
-        v-if="hasDownstream"
-        :triggered="downstreamPipelines"
-        :pipeline-path="pipeline.path"
-        data-testid="commit-box-mini-graph-downstream"
-      />
-    </div>
+    <pipeline-mini-graph
+      v-else
+      data-testid="commit-box-pipeline-mini-graph"
+      :downstream-pipelines="downstreamPipelines"
+      :pipeline-path="pipelinePath"
+      :stages="formattedStages"
+      :upstream-pipeline="upstreamPipeline"
+    />
   </div>
 </template>