Merge branch '276949-right-slide' into 'master'

Pipeline Graph Structural Update: Slidey Bugfix

See merge request gitlab-org/gitlab!53255

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

@@ -28,7 +28,6 @@ export default {
     return {
       currentPipeline: null,
       loadingPipelineId: null,
-      minWidth: 0,
       pipelineExpanded: false,
     };
   },
@@ -40,6 +39,7 @@ export default {
     'gl-pl-3',
     'gl-mb-5',
   ],
+  minWidth: `${ONE_COL_WIDTH}px`,
   computed: {
     columnClass() {
       const positionValues = {
@@ -48,12 +48,6 @@ export default {
       };
       return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`;
     },
-    graphPosition() {
-      return this.isUpstream ? 'left' : 'right';
-    },
-    isUpstream() {
-      return this.type === UPSTREAM;
-    },
     computedTitleClasses() {
       const positionalClasses = this.isUpstream
         ? ['gl-w-full', 'gl-text-right', 'gl-linked-pipeline-padding']
@@ -61,6 +55,12 @@ export default {
 
       return [...this.$options.titleClasses, ...positionalClasses];
     },
+    graphPosition() {
+      return this.isUpstream ? 'left' : 'right';
+    },
+    isUpstream() {
+      return this.type === UPSTREAM;
+    },
   },
   methods: {
     getPipelineData(pipeline) {
@@ -105,7 +105,6 @@ export default {
       if (this.currentPipeline?.id === pipeline.id) {
         this.pipelineExpanded = false;
         this.currentPipeline = null;
-        this.minWidth = 0;
         return;
       }
 
@@ -120,11 +119,6 @@ export default {
       */
       this.pipelineExpanded = true;
 
-      /*
-        Min-width is set manually for timing reasons.
-      */
-      this.minWidth = `${ONE_COL_WIDTH}px`;
-
       this.getPipelineData(pipeline);
     },
     onDownstreamHovered(jobName) {
@@ -138,6 +132,9 @@ export default {
 
       this.$emit('pipelineExpandToggle', jobName, expanded);
     },
+    showDownstreamContainer(id) {
+      return !this.isUpstream && (this.isExpanded(id) || this.isLoadingPipeline(id));
+    },
   },
 };
 </script>
@@ -167,12 +164,12 @@ export default {
             @pipelineExpandToggle="onPipelineExpandToggle"
           />
           <div
-            v-if="isExpanded(pipeline.id) && !isUpstream"
-            :style="{ minWidth }"
+            v-if="showDownstreamContainer(pipeline.id)"
+            :style="{ minWidth: $options.minWidth }"
             class="gl-display-inline-block"
           >
             <pipeline-graph
-              v-if="currentPipeline"
+              v-if="isExpanded(pipeline.id)"
               :type="type"
               class="d-inline-block gl-mt-n2"
               :pipeline="currentPipeline"