Merge branch '31053-pipeline-ux' into 'master'

Adds left connector class to the rendered graph

Closes #31053

See merge request !11179

3 files changed, 47 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index a84161ef5e7..1f1b99ff401 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -64,6 +64,24 @@
       capitalizeStageName(name) {
         return name.charAt(0).toUpperCase() + name.slice(1);
       },
+
+      isFirstColumn(index) {
+        return index === 0;
+      },
+
+      stageConnectorClass(index, stage) {
+        let className;
+
+        // If it's the first stage column and only has one job
+        if (index === 0 && stage.groups.length === 1) {
+          className = 'no-margin';
+        } else if (index > 0) {
+          // If it is not the first column
+          className = 'left-margin';
+        }
+
+        return className;
+      },
     },
   };
 </script>
@@ -82,10 +100,12 @@
         v-if="!isLoading"
         class="stage-column-list">
         <stage-column-component
-          v-for="stage in state.graph"
+          v-for="(stage, index) in state.graph"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
-          :key="stage.name"/>
+          :key="stage.name"
+          :stage-connector-class="stageConnectorClass(index, stage)"
+          :is-first-column="isFirstColumn(index)"/>
       </ul>
     </div>
   </div>
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 b7da185e280..9b1bbb0906f 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -13,6 +13,18 @@ export default {
       type: Array,
       required: true,
     },
+
+    isFirstColumn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    stageConnectorClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 
   components: {
@@ -28,20 +40,27 @@ export default {
     jobId(job) {
       return `ci-badge-${job.name}`;
     },
+
+    buildConnnectorClass(index) {
+      return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
+    },
   },
 };
 </script>
 <template>
-  <li class="stage-column">
+  <li
+    class="stage-column"
+    :class="stageConnectorClass">
     <div class="stage-name">
       {{title}}
     </div>
     <div class="builds-container">
       <ul>
         <li
-          v-for="job in jobs"
+          v-for="(job, index) in jobs"
           :key="job.id"
           class="build"
+          :class="buildConnnectorClass(index)"
           :id="jobId(job)">
 
           <div class="curve"></div>
diff --git a/app/assets/javascripts/vue_shared/ci_action_icons.js b/app/assets/javascripts/vue_shared/ci_action_icons.js
index 734b3c6c45e..ee41dc95beb 100644
--- a/app/assets/javascripts/vue_shared/ci_action_icons.js
+++ b/app/assets/javascripts/vue_shared/ci_action_icons.js
@@ -1,6 +1,7 @@
 import cancelSVG from 'icons/_icon_action_cancel.svg';
 import retrySVG from 'icons/_icon_action_retry.svg';
 import playSVG from 'icons/_icon_action_play.svg';
+import stopSVG from 'icons/_icon_action_stop.svg';
 
 export default function getActionIcon(action) {
   let icon;
@@ -14,6 +15,9 @@ export default function getActionIcon(action) {
     case 'icon_action_play':
       icon = playSVG;
       break;
+    case 'icon_action_stop':
+      icon = stopSVG;
+      break;
     default:
       icon = '';
   }