1 files changed, 108 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue
new file mode 100644
index 00000000000..258b6bf6b6d
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue
@@ -0,0 +1,108 @@
+<script>
+import { isEmpty, escape } from 'lodash';
+import stageColumnMixin from '../../mixins/stage_column_mixin';
+import JobItem from './job_item.vue';
+import JobGroupDropdown from './job_group_dropdown.vue';
+import ActionComponent from './action_component.vue';
+
+export default {
+  components: {
+    JobItem,
+    JobGroupDropdown,
+    ActionComponent,
+  },
+  mixins: [stageColumnMixin],
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    groups: {
+      type: Array,
+      required: true,
+    },
+    isFirstColumn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    stageConnectorClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    action: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    jobHovered: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    pipelineExpanded: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    hasAction() {
+      return !isEmpty(this.action);
+    },
+  },
+  methods: {
+    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" data-testid="stage-column-title">
+      {{ 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>
+</template>