Add check and update tests that failed check

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -97,6 +97,23 @@ export default {
     isFadedOut(jobName) {
       return this.highlightedJobs.length > 1 && !this.highlightedJobs.includes(jobName);
     },
+    isParallel(group) {
+      return group.size > 1 && group.jobs.length > 1;
+    },
+    singleJobExists(group) {
+      const firstJobDefined = Boolean(group.jobs?.[0]);
+
+      if (!firstJobDefined) {
+        const currentGroup = this.groups.find((element) => element.name === group.name);
+        const serializedGroup = Object.entries(currentGroup).join(' ');
+        reportToSentry(
+          'stage_column_component',
+          `undefined_job_hunt, serialized group: ${serializedGroup}`,
+        );
+      }
+
+      return group.size === 1 && firstJobDefined;
+    },
   },
 };
 </script>
@@ -130,7 +147,7 @@ export default {
         @mouseleave="$emit('jobHover', '')"
       >
         <job-item
-          v-if="group.size === 1"
+          v-if="singleJobExists(group)"
           :job="group.jobs[0]"
           :job-hovered="jobHovered"
           :pipeline-expanded="pipelineExpanded"
@@ -139,7 +156,7 @@ export default {
           :class="{ 'gl-opacity-3': isFadedOut(group.name) }"
           @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
-        <div v-else :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
+        <div v-else-if="isParallel(group)" :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
           <job-group-dropdown :group="group" :pipeline-id="pipelineId" />
         </div>
       </div>

spec/frontend/pipelines/graph/stage_column_component_spec.js

@@ -24,7 +24,7 @@ const mockJob = {
 const mockGroups = Array(4)
   .fill(0)
   .map((item, idx) => {
-    return { ...mockJob, id: idx, name: `fish-${idx}` };
+    return { ...mockJob, jobs: [mockJob], id: idx, name: `fish-${idx}` };
   });
 
 const defaultProps = {
@@ -104,13 +104,19 @@ describe('stage column component', () => {
           props: {
             groups: [
               {
-                id: 4259,
+                ...mockJob,
                 name: '<img src=x onerror=alert(document.domain)>',
-                status: {
-                  icon: 'status_success',
-                  label: 'success',
-                  tooltip: '<img src=x onerror=alert(document.domain)>',
-                },
+                jobs: [
+                  {
+                    id: 4259,
+                    name: '<img src=x onerror=alert(document.domain)>',
+                    status: {
+                      icon: 'status_success',
+                      label: 'success',
+                      tooltip: '<img src=x onerror=alert(document.domain)>',
+                    },
+                  },
+                ],
               },
             ],
             title: 'test <img src=x onerror=alert(document.domain)>',
@@ -159,6 +165,7 @@ describe('stage column component', () => {
                 label: 'success',
                 tooltip: '<img src=x onerror=alert(document.domain)>',
               },
+              jobs: [mockJob],
             },
           ],
           title: 'test',
@@ -191,6 +198,7 @@ describe('stage column component', () => {
                 label: 'success',
                 tooltip: '<img src=x onerror=alert(document.domain)>',
               },
+              jobs: [mockJob],
             },
           ],
           title: 'test',