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

Adds left connector class to the rendered graph

Closes #31053

See merge request !11179

2 files changed, 67 insertions, 0 deletions

diff --git a/spec/javascripts/pipelines/graph/graph_component_spec.js b/spec/javascripts/pipelines/graph/graph_component_spec.js
index 4acf71d8b4b..024426acf05 100644
--- a/spec/javascripts/pipelines/graph/graph_component_spec.js
+++ b/spec/javascripts/pipelines/graph/graph_component_spec.js
@@ -66,6 +66,56 @@ describe('graph component', () => {
                 },
               },
             }],
+          },
+          {
+            name: 'test_1',
+            title: 'test_1: passed',
+            status: {
+              icon: 'icon_status_success',
+              text: 'passed',
+              label: 'passed',
+              details_path: '/root/ci-mock/pipelines/123#test',
+            },
+            path: '/root/ci-mock/pipelines/123#test',
+            groups: [{
+              name: 'test',
+              size: 1,
+              jobs: [{
+                id: 4153,
+                name: 'test',
+                status: {
+                  icon: 'icon_status_success',
+                  text: 'passed',
+                  label: 'passed',
+                  details_path: '/root/ci-mock/builds/4153',
+                  action: {
+                    icon: 'icon_action_retry',
+                    title: 'Retry',
+                    path: '/root/ci-mock/builds/4153/retry',
+                    method: 'post',
+                  },
+                },
+              }],
+            }, {
+              name: 'test',
+              size: 1,
+              jobs: [{
+                id: 4153,
+                name: 'test',
+                status: {
+                  icon: 'icon_status_success',
+                  text: 'passed',
+                  label: 'passed',
+                  details_path: '/root/ci-mock/builds/4153',
+                  action: {
+                    icon: 'icon_action_retry',
+                    title: 'Retry',
+                    path: '/root/ci-mock/builds/4153/retry',
+                    method: 'post',
+                  },
+                },
+              }],
+            }],
           }],
         }],
       },
@@ -91,6 +141,18 @@ describe('graph component', () => {
       setTimeout(() => {
         expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
 
+        expect(
+          component.$el.querySelector('.stage-column:first-child').classList.contains('no-margin'),
+        ).toEqual(true);
+
+        expect(
+          component.$el.querySelector('.stage-column:nth-child(2)').classList.contains('left-margin'),
+        ).toEqual(true);
+
+        expect(
+          component.$el.querySelector('.stage-column:nth-child(2) .build:nth-child(1)').classList.contains('left-connector'),
+        ).toEqual(true);
+
         expect(component.$el.querySelector('loading-icon')).toBe(null);
 
         expect(component.$el.querySelector('.stage-column-list')).toBeDefined();
diff --git a/spec/javascripts/vue_shared/ci_action_icons_spec.js b/spec/javascripts/vue_shared/ci_action_icons_spec.js
index 2e89a07e76e..3d53a5ab24d 100644
--- a/spec/javascripts/vue_shared/ci_action_icons_spec.js
+++ b/spec/javascripts/vue_shared/ci_action_icons_spec.js
@@ -2,6 +2,7 @@ import getActionIcon from '~/vue_shared/ci_action_icons';
 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';
 
 describe('getActionIcon', () => {
   it('should return an empty string', () => {
@@ -19,4 +20,8 @@ describe('getActionIcon', () => {
   it('should return play svg', () => {
     expect(getActionIcon('icon_action_play')).toEqual(playSVG);
   });
+
+  it('should render stop svg', () => {
+    expect(getActionIcon('icon_action_stop')).toEqual(stopSVG);
+  });
 });