Tweak drawing algo to support same stage needs

app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js

@@ -60,8 +60,16 @@ export const generateLinksData = ({ links }, containerID, modifier = '') => {
       paddingTop +
       sourceNodeCoordinates.height / 2;
 
-    // Start point
-    path.moveTo(sourceNodeX, sourceNodeY);
+    const sourceNodeLeftX = sourceNodeCoordinates.left - containerCoordinates.x - paddingLeft;
+
+    // If the source and target X values are the same,
+    // it means the nodes are in the same column so we
+    // want to start the line on the left of the pill
+    // instead of the right to have a nice curve.
+    const firstPointCoordinateX = sourceNodeLeftX === targetNodeX ? sourceNodeLeftX : sourceNodeX;
+
+    // First point
+    path.moveTo(firstPointCoordinateX, sourceNodeY);
 
     // Make cross-stages lines a straight line all the way
     // until we can safely draw the bezier to look nice.

spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap

@@ -21,3 +21,10 @@ exports[`Links Inner component with one need matches snapshot and has expected p
     <path d=\\"M202,118L42,118C72,118,72,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
   </svg> </div>"
 `;
+
+exports[`Links Inner component with same stage needs matches snapshot and has expected path 1`] = `
+"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
+    <path d=\\"M192,108L22,108C52,108,52,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+    <path d=\\"M202,118L32,118C62,118,62,128,92,128\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
+  </svg> </div>"
+`;

spec/frontend/pipelines/graph_shared/links_inner_spec.js

@@ -10,6 +10,7 @@ import {
   pipelineData,
   pipelineDataWithNoNeeds,
   rootRect,
+  sameStageNeeds,
 } from '../pipeline_graph/mock_data';
 
 describe('Links Inner component', () => {
@@ -40,7 +41,7 @@ describe('Links Inner component', () => {
 
   // We create fixture so that each job has an empty div that represent
   // the JobPill in the DOM. Each `JobPill` would have different coordinates,
-  // so we increment their coordinates on each iteration to simulat different positions.
+  // so we increment their coordinates on each iteration to simulate different positions.
   const setFixtures = ({ stages }) => {
     const jobs = createJobsHash(stages);
     const arrayOfJobs = Object.keys(jobs);
@@ -81,7 +82,6 @@ describe('Links Inner component', () => {
   afterEach(() => {
     jest.restoreAllMocks();
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('basic SVG creation', () => {
@@ -160,6 +160,25 @@ describe('Links Inner component', () => {
     });
   });
 
+  describe('with same stage needs', () => {
+    beforeEach(() => {
+      setFixtures(sameStageNeeds);
+      createComponent({ pipelineData: sameStageNeeds.stages });
+    });
+
+    it('renders the correct number of links', () => {
+      expect(findAllLinksPath()).toHaveLength(2);
+    });
+
+    it('path does not contain NaN values', () => {
+      expect(wrapper.html()).not.toContain('NaN');
+    });
+
+    it('matches snapshot and has expected path', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
   describe('with a large number of needs', () => {
     beforeEach(() => {
       setFixtures(largePipelineData);

spec/frontend/pipelines/pipeline_graph/mock_data.js

@@ -162,6 +162,38 @@ export const parallelNeedData = {
   ],
 };
 
+export const sameStageNeeds = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build', name: 'build_1' }],
+        },
+      ],
+    },
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_2',
+          jobs: [{ script: 'yarn test', stage: 'build', needs: ['build_1'] }],
+        },
+      ],
+    },
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_3',
+          jobs: [{ script: 'yarn test', stage: 'build', needs: ['build_2'] }],
+        },
+      ],
+    },
+  ],
+};
+
 export const largePipelineData = {
   stages: [
     {