Merge branch 'fc-fix-yaml-viz-graph' into 'master'

Fix CI config visualization missing classes

See merge request gitlab-org/gitlab!46704

app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue

@@ -57,7 +57,7 @@ export default {
   <tooltip-on-truncate :title="jobName" truncate-target="child" placement="top">
     <div
       :id="jobId"
-      class="pipeline-job-pill gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-mb-3 gl-px-5 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
+      class="gl-w-15 gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-mb-3 gl-px-5 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
       :class="jobPillClasses"
       @mouseover="onMouseEnter"
       @mouseleave="onMouseLeave"

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -97,15 +97,20 @@ export default {
         this.reportFailure(DRAW_FAILURE);
       }
     },
-    getStageBackgroundClass(index) {
+    getStageBackgroundClasses(index) {
       const { length } = this.pipelineData.stages;
-
+      // It's possible for a graph to have only one stage, in which
+      // case we concatenate both the left and right rounding classes
       if (length === 1) {
-        return 'stage-rounded';
-      } else if (index === 0) {
-        return 'stage-left-rounded';
-      } else if (index === length - 1) {
-        return 'stage-right-rounded';
+        return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6 gl-rounded-bottom-right-6 gl-rounded-top-right-6';
+      }
+
+      if (index === 0) {
+        return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6';
+      }
+
+      if (index === length - 1) {
+        return 'gl-rounded-bottom-right-6 gl-rounded-top-right-6';
       }
 
       return '';
@@ -190,7 +195,8 @@ export default {
       >
         <div
           class="gl-display-flex gl-align-items-center gl-bg-white gl-w-full gl-px-8 gl-py-4 gl-mb-5"
-          :class="getStageBackgroundClass(index)"
+          :class="getStageBackgroundClasses(index)"
+          data-testid="stage-background"
         >
           <stage-pill :stage-name="stage.name" :is-empty="stage.groups.length === 0" />
         </div>

app/assets/javascripts/pipelines/components/pipeline_graph/stage_pill.vue

@@ -26,7 +26,7 @@ export default {
 <template>
   <tooltip-on-truncate :title="stageName" truncate-target="child" placement="top">
     <div
-      class="gl-px-5 gl-py-2 gl-text-white gl-text-center gl-text-truncate gl-rounded-pill pipeline-stage-pill"
+      class="gl-px-5 gl-py-2 gl-text-white gl-text-center gl-text-truncate gl-rounded-pill gl-w-20"
       :class="emptyClass"
     >
       {{ stageName }}

app/assets/stylesheets/page_bundles/pipeline.scss

@@ -486,23 +486,3 @@
 .progress-bar.bg-primary {
   background-color: $blue-500 !important;
 }
-
-.pipeline-stage-pill {
-  width: 10rem;
-}
-
-.pipeline-job-pill {
-  width: 8rem;
-}
-
-.stage-rounded {
-  border-radius: 2rem;
-}
-
-.stage-left-rounded {
-  border-radius: 2rem 0 0 2rem;
-}
-
-.stage-right-rounded {
-  border-radius: 0 2rem 2rem 0;
-}

spec/frontend/pipelines/pipeline_graph/mock_data.js

@@ -91,3 +91,18 @@ export const pipelineData = {
     [jobId4]: {},
   },
 };
+
+export const singleStageData = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+          id: jobId1,
+        },
+      ],
+    },
+  ],
+};

spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { pipelineData } from './mock_data';
+import { pipelineData, singleStageData } from './mock_data';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue';
 import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
@@ -18,6 +18,8 @@ describe('pipeline graph component', () => {
   };
 
   const findAllStagePills = () => wrapper.findAll(StagePill);
+  const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]');
+  const findStageBackgroundElementAt = index => findAllStageBackgroundElements().at(index);
   const findAllJobPills = () => wrapper.findAll(JobPill);
 
   afterEach(() => {
@@ -41,12 +43,43 @@ describe('pipeline graph component', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });
+
     it('renders the right number of stage pills', () => {
       const expectedStagesLength = pipelineData.stages.length;
 
       expect(findAllStagePills()).toHaveLength(expectedStagesLength);
     });
 
+    it.each`
+      cssClass                       | expectedState
+      ${'gl-rounded-bottom-left-6'}  | ${true}
+      ${'gl-rounded-top-left-6'}     | ${true}
+      ${'gl-rounded-top-right-6'}    | ${false}
+      ${'gl-rounded-bottom-right-6'} | ${false}
+    `(
+      'rounds corner: $class should be $expectedState on the first element',
+      ({ cssClass, expectedState }) => {
+        const classes = findStageBackgroundElementAt(0).classes();
+
+        expect(classes.includes(cssClass)).toBe(expectedState);
+      },
+    );
+
+    it.each`
+      cssClass                       | expectedState
+      ${'gl-rounded-bottom-left-6'}  | ${false}
+      ${'gl-rounded-top-left-6'}     | ${false}
+      ${'gl-rounded-top-right-6'}    | ${true}
+      ${'gl-rounded-bottom-right-6'} | ${true}
+    `(
+      'rounds corner: $class should be $expectedState on the last element',
+      ({ cssClass, expectedState }) => {
+        const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes();
+
+        expect(classes.includes(cssClass)).toBe(expectedState);
+      },
+    );
+
     it('renders the right number of job pills', () => {
       // We count the number of jobs in the mock data
       const expectedJobsLength = pipelineData.stages.reduce((acc, val) => {
@@ -56,4 +89,25 @@ describe('pipeline graph component', () => {
       expect(findAllJobPills()).toHaveLength(expectedJobsLength);
     });
   });
+
+  describe('with only one stage', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ pipelineData: singleStageData });
+    });
+
+    it.each`
+      cssClass                       | expectedState
+      ${'gl-rounded-bottom-left-6'}  | ${true}
+      ${'gl-rounded-top-left-6'}     | ${true}
+      ${'gl-rounded-top-right-6'}    | ${true}
+      ${'gl-rounded-bottom-right-6'} | ${true}
+    `(
+      'rounds corner: $class should be $expectedState on the only element',
+      ({ cssClass, expectedState }) => {
+        const classes = findStageBackgroundElementAt(0).classes();
+
+        expect(classes.includes(cssClass)).toBe(expectedState);
+      },
+    );
+  });
 });