1 files changed, 58 insertions, 60 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index a75ec585b95..b9bddc94ce4 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -1,17 +1,19 @@
 <script>
-import { isEmpty, escape } from 'lodash';
-import stageColumnMixin from '../../mixins/stage_column_mixin';
+import { capitalize, escape, isEmpty } from 'lodash';
+import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue';
 import JobItem from './job_item.vue';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import ActionComponent from './action_component.vue';
+import { GRAPHQL } from './constants';
+import { accessValue } from './accessors';
 
 export default {
   components: {
-    JobItem,
-    JobGroupDropdown,
     ActionComponent,
+    JobGroupDropdown,
+    JobItem,
+    MainGraphWrapper,
   },
-  mixins: [stageColumnMixin],
   props: {
     title: {
       type: String,
@@ -21,16 +23,6 @@ export default {
       type: Array,
       required: true,
     },
-    isFirstColumn: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    stageConnectorClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     action: {
       type: Object,
       required: false,
@@ -47,62 +39,68 @@ export default {
       default: () => ({}),
     },
   },
+  titleClasses: [
+    'gl-font-weight-bold',
+    'gl-pipeline-job-width',
+    'gl-text-truncate',
+    'gl-line-height-36',
+    'gl-pl-3',
+  ],
   computed: {
+    formattedTitle() {
+      return capitalize(escape(this.title));
+    },
     hasAction() {
       return !isEmpty(this.action);
     },
   },
   methods: {
+    getGroupId(group) {
+      return accessValue(GRAPHQL, 'groupId', group);
+    },
     groupId(group) {
       return `ci-badge-${escape(group.name)}`;
     },
-    pipelineActionRequestComplete() {
-      this.$emit('refreshPipelineGraph');
-    },
   },
 };
 </script>
 <template>
-  <li :class="stageConnectorClass" class="stage-column">
-    <div class="stage-name position-relative">
-      {{ title }}
-      <action-component
-        v-if="hasAction"
-        :action-icon="action.icon"
-        :tooltip-text="action.title"
-        :link="action.path"
-        class="js-stage-action stage-action rounded"
-        @pipelineActionRequestComplete="pipelineActionRequestComplete"
-      />
-    </div>
-
-    <div class="builds-container">
-      <ul>
-        <li
-          v-for="(group, index) in groups"
-          :id="groupId(group)"
-          :key="group.id"
-          :class="buildConnnectorClass(index)"
-          class="build"
-        >
-          <div class="curve"></div>
-
-          <job-item
-            v-if="group.size === 1"
-            :job="group.jobs[0]"
-            :job-hovered="jobHovered"
-            :pipeline-expanded="pipelineExpanded"
-            css-class-job-name="build-content"
-            @pipelineActionRequestComplete="pipelineActionRequestComplete"
-          />
-
-          <job-group-dropdown
-            v-if="group.size > 1"
-            :group="group"
-            @pipelineActionRequestComplete="pipelineActionRequestComplete"
-          />
-        </li>
-      </ul>
-    </div>
-  </li>
+  <main-graph-wrapper>
+    <template #stages>
+      <div
+        data-testid="stage-column-title"
+        class="gl-display-flex gl-justify-content-space-between gl-relative"
+        :class="$options.titleClasses"
+      >
+        <div>{{ formattedTitle }}</div>
+        <action-component
+          v-if="hasAction"
+          :action-icon="action.icon"
+          :tooltip-text="action.title"
+          :link="action.path"
+          class="js-stage-action stage-action rounded"
+          @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
+        />
+      </div>
+    </template>
+    <template #jobs>
+      <div
+        v-for="group in groups"
+        :id="groupId(group)"
+        :key="getGroupId(group)"
+        data-testid="stage-column-group"
+        class="gl-relative gl-mb-3 gl-white-space-normal gl-pipeline-job-width"
+      >
+        <job-item
+          v-if="group.size === 1"
+          :job="group.jobs[0]"
+          :job-hovered="jobHovered"
+          :pipeline-expanded="pipelineExpanded"
+          css-class-job-name="gl-build-content"
+          @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
+        />
+        <job-group-dropdown v-else :group="group" />
+      </div>
+    </template>
+  </main-graph-wrapper>
 </template>