Fix expand up and downstream pipelines

In the pipeline graph, we can now
expand pipelines without the graph
collapsing

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

@@ -99,7 +99,17 @@ export default {
         downstreamNode.classList.contains('child-pipeline') ? 15 : 30,
       );
 
-      this.$emit('onClickTriggered', this.pipeline, pipeline);
+      /**
+       * If the expanded trigger is defined and the id is different than the
+       * pipeline we clicked, then it means we clicked on a sibling downstream link
+       * and we want to reset the pipeline store. Triggering the reset without
+       * this condition would mean not allowing downstreams of downstreams to expand
+       */
+      if (this.expandedTriggered?.id !== pipeline.id) {
+        this.$emit('onResetTriggered', this.pipeline, pipeline);
+      }
+
+      this.$emit('onClickTriggered', pipeline);
     },
     calculateMarginTop(downstreamNode, pixelDiff) {
       return `${downstreamNode.offsetTop - downstreamNode.offsetParent.offsetTop - pixelDiff}px`;
@@ -136,9 +146,7 @@ export default {
           :pipeline="expandedTriggeredBy"
           :is-linked-pipeline="true"
           :mediator="mediator"
-          @onClickTriggeredBy="
-            (parentPipeline, pipeline) => clickTriggeredByPipeline(parentPipeline, pipeline)
-          "
+          @onClickTriggeredBy="clickTriggeredByPipeline"
           @refreshPipelineGraph="requestRefreshPipelineGraph"
         />
 
@@ -148,9 +156,7 @@ export default {
           :column-title="__('Upstream')"
           :project-id="pipelineProjectId"
           graph-position="left"
-          @linkedPipelineClick="
-            linkedPipeline => $emit('onClickTriggeredBy', pipeline, linkedPipeline)
-          "
+          @linkedPipelineClick="$emit('onClickTriggeredBy', $event)"
         />
 
         <ul
@@ -197,9 +203,7 @@ export default {
           :is-linked-pipeline="true"
           :style="{ 'margin-top': downstreamMarginTop }"
           :mediator="mediator"
-          @onClickTriggered="
-            (parentPipeline, pipeline) => clickTriggeredPipeline(parentPipeline, pipeline)
-          "
+          @onClickTriggered="clickTriggeredPipeline"
           @refreshPipelineGraph="requestRefreshPipelineGraph"
         />
       </div>

app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js

@@ -27,9 +27,9 @@ export default {
      * @param {String} resetStoreKey Store key for the visible pipeline that will need to be reset
      * @param {Object} pipeline The clicked pipeline
      */
-    clickPipeline(parentPipeline, pipeline, openMethod, closeMethod) {
+    clickPipeline(pipeline, openMethod, closeMethod) {
       if (!pipeline.isExpanded) {
-        this.mediator.store[openMethod](parentPipeline, pipeline);
+        this.mediator.store[openMethod](pipeline);
         this.mediator.store.toggleLoading(pipeline);
         this.mediator.poll.stop();
 
@@ -41,21 +41,14 @@ export default {
         this.mediator.poll.enable({ data: this.mediator.getExpandedParameters() });
       }
     },
-    clickTriggeredByPipeline(parentPipeline, pipeline) {
-      this.clickPipeline(
-        parentPipeline,
-        pipeline,
-        'openTriggeredByPipeline',
-        'closeTriggeredByPipeline',
-      );
+    resetTriggeredPipelines(parentPipeline, pipeline) {
+      this.mediator.store.resetTriggeredPipelines(parentPipeline, pipeline);
     },
-    clickTriggeredPipeline(parentPipeline, pipeline) {
-      this.clickPipeline(
-        parentPipeline,
-        pipeline,
-        'openTriggeredPipeline',
-        'closeTriggeredPipeline',
-      );
+    clickTriggeredByPipeline(pipeline) {
+      this.clickPipeline(pipeline, 'openPipeline', 'closePipeline');
+    },
+    clickTriggeredPipeline(pipeline) {
+      this.clickPipeline(pipeline, 'openPipeline', 'closePipeline');
     },
     requestRefreshPipelineGraph() {
       // When an action is clicked

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -42,10 +42,10 @@ export default () => {
         },
         on: {
           refreshPipelineGraph: this.requestRefreshPipelineGraph,
-          onClickTriggeredBy: (parentPipeline, pipeline) =>
-            this.clickTriggeredByPipeline(parentPipeline, pipeline),
-          onClickTriggered: (parentPipeline, pipeline) =>
-            this.clickTriggeredPipeline(parentPipeline, pipeline),
+          onResetTriggered: (parentPipeline, pipeline) =>
+            this.resetTriggeredPipelines(parentPipeline, pipeline),
+          onClickTriggeredBy: pipeline => this.clickTriggeredByPipeline(pipeline),
+          onClickTriggered: pipeline => this.clickTriggeredPipeline(pipeline),
         },
       });
     },

app/assets/javascripts/pipelines/stores/pipeline_store.js

@@ -54,16 +54,24 @@ export default class PipelineStore {
    */
   parseTriggeredByPipelines(oldPipeline = {}, newPipeline) {
     // keep old value in case it's opened because we're polling
-
     Vue.set(newPipeline, 'isExpanded', oldPipeline.isExpanded || false);
     // add isLoading property
     Vue.set(newPipeline, 'isLoading', false);
 
+    // Because there can only ever be one `triggered_by` for any given pipeline,
+    // the API returns an object for the value instead of an Array. However,
+    // it's easier to deal with an array in the FE so we convert it.
     if (newPipeline.triggered_by) {
       if (!Array.isArray(newPipeline.triggered_by)) {
         Object.assign(newPipeline, { triggered_by: [newPipeline.triggered_by] });
       }
-      this.parseTriggeredByPipelines(oldPipeline, newPipeline.triggered_by[0]);
+
+      if (newPipeline.triggered_by?.length > 0) {
+        newPipeline.triggered_by.forEach(el => {
+          const oldTriggeredBy = oldPipeline.triggered_by?.find(element => element.id === el.id);
+          this.parseTriggeredPipelines(oldTriggeredBy, el);
+        });
+      }
     }
   }
 

changelogs/unreleased/119017-unable-to-expand-multiple-downstream-pipelines.yml

+---
+title: Resolve Unable to expand multiple downstream pipelines.
+merge_request: 27029
+author:
+type: fixed

spec/javascripts/pipelines/graph/graph_component_spec.js

@@ -159,7 +159,6 @@ describe('graph component', () => {
 
             expect(component.$emit).toHaveBeenCalledWith(
               'onClickTriggeredBy',
-              component.pipeline,
               component.pipeline.triggered_by[0],
             );
           });
@@ -196,7 +195,6 @@ describe('graph component', () => {
 
             expect(component.$emit).toHaveBeenCalledWith(
               'onClickTriggered',
-              component.pipeline,
               component.pipeline.triggered[0],
             );
           });