1 files changed, 38 insertions, 2 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 924cdeebba1..0f5a8cb8fbf 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,7 +1,7 @@
 <script>
+import { escape, capitalize } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
 import StageColumnComponent from './stage_column_component.vue';
-import GraphMixin from '../../mixins/graph_component_mixin';
 import GraphWidthMixin from '../../mixins/graph_width_mixin';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin';
@@ -13,7 +13,7 @@ export default {
     GlLoadingIcon,
     LinkedPipelinesColumn,
   },
-  mixins: [GraphMixin, GraphWidthMixin, GraphBundleMixin],
+  mixins: [GraphWidthMixin, GraphBundleMixin],
   props: {
     isLoading: {
       type: Boolean,
@@ -51,6 +51,9 @@ export default {
     };
   },
   computed: {
+    graph() {
+      return this.pipeline.details?.stages;
+    },
     hasTriggeredBy() {
       return (
         this.type !== this.$options.downstream &&
@@ -92,6 +95,39 @@ export default {
     },
   },
   methods: {
+    capitalizeStageName(name) {
+      const escapedName = escape(name);
+      return capitalize(escapedName);
+    },
+    isFirstColumn(index) {
+      return index === 0;
+    },
+    stageConnectorClass(index, stage) {
+      let className;
+
+      // If it's the first stage column and only has one job
+      if (this.isFirstColumn(index) && stage.groups.length === 1) {
+        className = 'no-margin';
+      } else if (index > 0) {
+        // If it is not the first column
+        className = 'left-margin';
+      }
+
+      return className;
+    },
+    refreshPipelineGraph() {
+      this.$emit('refreshPipelineGraph');
+    },
+    /**
+     * CSS class is applied:
+     *  - if pipeline graph contains only one stage column component
+     *
+     * @param {number} index
+     * @returns {boolean}
+     */
+    shouldAddRightMargin(index) {
+      return !(index === this.graph.length - 1);
+    },
     handleClickedDownstream(pipeline, clickedIndex, downstreamNode) {
       /**
        * Calculates the margin top of the clicked downstream pipeline by