1 files changed, 56 insertions, 11 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index 0a762563114..fa2f381c8a4 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -1,12 +1,13 @@
 <script>
 import { capitalize, escape, isEmpty } from 'lodash';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { reportToSentry } from '../../utils';
 import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue';
+import ActionComponent from '../jobs_shared/action_component.vue';
 import { accessValue } from './accessors';
-import ActionComponent from './action_component.vue';
 import { GRAPHQL } from './constants';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import JobItem from './job_item.vue';
-import { reportToSentry } from './utils';
 
 export default {
   components: {
@@ -15,17 +16,18 @@ export default {
     JobItem,
     MainGraphWrapper,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     groups: {
       type: Array,
       required: true,
     },
-    pipelineId: {
-      type: Number,
+    name: {
+      type: String,
       required: true,
     },
-    title: {
-      type: String,
+    pipelineId: {
+      type: Number,
       required: true,
     },
     action: {
@@ -48,6 +50,16 @@ export default {
       required: false,
       default: () => ({}),
     },
+    showStageName: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    sourceJobHovered: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   titleClasses: [
     'gl-font-weight-bold',
@@ -57,8 +69,23 @@ export default {
     'gl-pl-3',
   ],
   computed: {
+    /*
+      currentGroups and filteredGroups are part of
+      a test to hunt down a bug
+      (see: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57142).
+
+      They should be removed when the bug is rectified.
+    */
+    currentGroups() {
+      return this.glFeatures.pipelineFilterJobs ? this.filteredGroups : this.groups;
+    },
+    filteredGroups() {
+      return this.groups.map((group) => {
+        return { ...group, jobs: group.jobs.filter(Boolean) };
+      });
+    },
     formattedTitle() {
-      return capitalize(escape(this.title));
+      return capitalize(escape(this.name));
     },
     hasAction() {
       return !isEmpty(this.action);
@@ -80,6 +107,18 @@ 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) {
+        reportToSentry('stage_column_component', 'undefined_job_hunt');
+      }
+
+      return group.size === 1 && firstJobDefined;
+    },
   },
 };
 </script>
@@ -104,7 +143,7 @@ export default {
     </template>
     <template #jobs>
       <div
-        v-for="group in groups"
+        v-for="group in currentGroups"
         :id="groupId(group)"
         :key="getGroupId(group)"
         data-testid="stage-column-group"
@@ -113,17 +152,23 @@ export default {
         @mouseleave="$emit('jobHover', '')"
       >
         <job-item
-          v-if="group.size === 1"
+          v-if="singleJobExists(group)"
           :job="group.jobs[0]"
           :job-hovered="jobHovered"
+          :source-job-hovered="sourceJobHovered"
           :pipeline-expanded="pipelineExpanded"
           :pipeline-id="pipelineId"
+          :stage-name="showStageName ? group.stageName : ''"
           css-class-job-name="gl-build-content"
           :class="{ 'gl-opacity-3': isFadedOut(group.name) }"
           @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
-        <div v-else :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
-          <job-group-dropdown :group="group" :pipeline-id="pipelineId" />
+        <div v-else-if="isParallel(group)" :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
+          <job-group-dropdown
+            :group="group"
+            :stage-name="showStageName ? group.stageName : ''"
+            :pipeline-id="pipelineId"
+          />
         </div>
       </div>
     </template>