Merge branch 'fix-dropdown-toggle' into 'master'

Fix dropdown toggle bug

See merge request gitlab-org/gitlab!59309

app/assets/javascripts/pipelines/components/graph/constants.js

@@ -15,4 +15,7 @@ export const STAGE_VIEW = 'stage';
 export const LAYER_VIEW = 'layer';
 export const VIEW_TYPE_KEY = 'pipeline_graph_view_type';
 
+export const SINGLE_JOB = 'single_job';
+export const JOB_DROPDOWN = 'job_dropdown';
+
 export const IID_FAILURE = 'missing_iid';

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

 <script>
 import { reportToSentry } from '../../utils';
+import { JOB_DROPDOWN, SINGLE_JOB } from './constants';
 import JobItem from './job_item.vue';
 
 /**
@@ -28,6 +29,10 @@ export default {
       default: '',
     },
   },
+  jobItemTypes: {
+    jobDropdown: JOB_DROPDOWN,
+    singleJob: SINGLE_JOB,
+  },
   computed: {
     computedJobId() {
       return this.pipelineId > -1 ? `${this.group.name}-${this.pipelineId}` : '';
@@ -57,11 +62,10 @@ export default {
     >
       <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
         <job-item
-          :dropdown-length="group.size"
+          :type="$options.jobItemTypes.jobDropdown"
           :group-tooltip="tooltipText"
           :job="group"
           :stage-name="stageName"
-          @pipelineActionRequestComplete="pipelineActionRequestComplete"
         />
 
         <div class="gl-font-weight-100 gl-font-size-lg gl-ml-n4">{{ group.size }}</div>
@@ -75,6 +79,7 @@ export default {
             <job-item
               :dropdown-length="group.size"
               :job="job"
+              :type="$options.jobItemTypes.singleJob"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
               @pipelineActionRequestComplete="pipelineActionRequestComplete"
             />

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

@@ -8,7 +8,7 @@ import { reportToSentry } from '../../utils';
 import ActionComponent from '../jobs_shared/action_component.vue';
 import JobNameComponent from '../jobs_shared/job_name_component.vue';
 import { accessValue } from './accessors';
-import { REST } from './constants';
+import { REST, SINGLE_JOB } from './constants';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -97,6 +97,11 @@ export default {
       required: false,
       default: '',
     },
+    type: {
+      type: String,
+      required: false,
+      default: SINGLE_JOB,
+    },
   },
   computed: {
     boundary() {
@@ -111,6 +116,9 @@ export default {
     hasDetails() {
       return accessValue(this.dataMethod, 'hasDetails', this.status);
     },
+    isSingleItem() {
+      return this.type === SINGLE_JOB;
+    },
     nameComponent() {
       return this.hasDetails ? 'gl-link' : 'div';
     },
@@ -177,6 +185,17 @@ export default {
     hideTooltips() {
       this.$root.$emit(BV_HIDE_TOOLTIP);
     },
+    jobItemClick(evt) {
+      if (this.isSingleItem) {
+        /*
+          This is so the jobDropdown still toggles. Issue to refactor:
+          https://gitlab.com/gitlab-org/gitlab/-/issues/267117 
+        */
+        evt.stopPropagation();
+      }
+
+      this.hideTooltips();
+    },
     pipelineActionRequestComplete() {
       this.$emit('pipelineActionRequestComplete');
     },
@@ -201,7 +220,7 @@ export default {
       :href="detailsPath"
       class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none gl-w-full"
       :data-testid="testId"
-      @click.stop="hideTooltips"
+      @click="jobItemClick"
       @mouseout="hideTooltips"
     >
       <div class="ci-job-name-component gl-display-flex gl-align-items-center">