Fix pipeline viz missing classes

Due to some migration of scss from the pipelines bundle,
some classes were no longer applied and it broke
the visualization style. This uses new gitlab utilities
to re-apply those styles and avoid having scss bundle.

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);
+      },
+    );
+  });
 });