Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

12 files changed, 74 insertions, 46 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 0ce94d4f02f..1df693704d4 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,9 +1,10 @@
 <script>
 import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
+import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { reportToSentry } from './utils';
 
 /**
@@ -62,7 +63,7 @@ export default {
      *
      */
     onClickAction() {
-      this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`);
+      this.$root.$emit(BV_HIDE_TOOLTIP, `js-ci-action-${this.link}`);
       this.isDisabled = true;
       this.isLoading = true;
 
diff --git a/app/assets/javascripts/pipelines/components/graph/constants.js b/app/assets/javascripts/pipelines/components/graph/constants.js
index 6f0deccfef6..caa269f5095 100644
--- a/app/assets/javascripts/pipelines/components/graph/constants.js
+++ b/app/assets/javascripts/pipelines/components/graph/constants.js
@@ -2,5 +2,11 @@ export const DOWNSTREAM = 'downstream';
 export const MAIN = 'main';
 export const UPSTREAM = 'upstream';
 
+/*
+  this value is based on the gl-pipeline-job-width class
+  plus some extra for the margins
+*/
+export const ONE_COL_WIDTH = 180;
+
 export const REST = 'rest';
 export const GRAPHQL = 'graphql';
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index cd403757fe6..93156d5d05b 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,9 +1,9 @@
 <script>
 import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinksLayer from '../graph_shared/links_layer.vue';
+import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH } from './constants';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
-import { DOWNSTREAM, MAIN, UPSTREAM } from './constants';
 import { reportToSentry } from './utils';
 
 export default {
@@ -86,11 +86,11 @@ export default {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
   mounted() {
-    this.measurements = this.getMeasurements();
+    this.getMeasurements();
   },
   methods: {
     getMeasurements() {
-      return {
+      this.measurements = {
         width: this.$refs[this.containerId].scrollWidth,
         height: this.$refs[this.containerId].scrollHeight,
       };
@@ -101,6 +101,13 @@ export default {
     setJob(jobName) {
       this.hoveredJobName = jobName;
     },
+    slidePipelineContainer() {
+      this.$refs.mainPipelineContainer.scrollBy({
+        left: ONE_COL_WIDTH,
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
     togglePipelineExpanded(jobName, expanded) {
       this.pipelineExpanded = {
         expanded,
@@ -116,8 +123,9 @@ export default {
 <template>
   <div class="js-pipeline-graph">
     <div
-      class="gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap"
-      :class="{ 'gl-pipeline-min-h gl-py-5': !isLinkedPipeline }"
+      ref="mainPipelineContainer"
+      class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap"
+      :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }"
     >
       <linked-graph-wrapper>
         <template #upstream>
@@ -153,6 +161,7 @@ export default {
                 :pipeline-id="pipeline.id"
                 @refreshPipelineGraph="$emit('refreshPipelineGraph')"
                 @jobHover="setJob"
+                @updateMeasurements="getMeasurements"
               />
             </links-layer>
           </div>
@@ -160,11 +169,13 @@ export default {
         <template #downstream>
           <linked-pipelines-column
             v-if="showDownstreamPipelines"
+            class="gl-mr-6"
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
             @downstreamHovered="setJob"
             @pipelineExpandToggle="togglePipelineExpanded"
+            @scrollContainer="slidePipelineContainer"
             @error="onError"
           />
         </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue
index 2164dbf4d55..abbf8df6eed 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue
@@ -1,10 +1,10 @@
 <script>
-import { escape, capitalize } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
-import StageColumnComponentLegacy from './stage_column_component_legacy.vue';
-import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue';
+import { escape, capitalize } from 'lodash';
 import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin';
 import { UPSTREAM, DOWNSTREAM, MAIN } from './constants';
+import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue';
+import StageColumnComponentLegacy from './stage_column_component_legacy.vue';
 import { reportToSentry } from './utils';
 
 export default {
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index 08d6162aeb8..f6aee8c5fcf 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -60,7 +60,7 @@ export default {
     >
       <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
         <span class="gl-display-flex gl-align-items-center gl-min-w-0">
-          <ci-icon :status="group.status" :size="24" />
+          <ci-icon :status="group.status" :size="24" class="gl-line-height-0" />
           <span class="gl-text-truncate mw-70p gl-pl-3">
             {{ group.name }}
           </span>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index 8262d728a24..46ef0457d40 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -1,11 +1,12 @@
 <script>
 import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import ActionComponent from './action_component.vue';
-import JobNameComponent from './job_name_component.vue';
-import { sprintf } from '~/locale';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
+import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
+import { sprintf } from '~/locale';
 import { accessValue } from './accessors';
+import ActionComponent from './action_component.vue';
 import { REST } from './constants';
+import JobNameComponent from './job_name_component.vue';
 import { reportToSentry } from './utils';
 
 /**
@@ -144,7 +145,7 @@ export default {
   },
   methods: {
     hideTooltips() {
-      this.$root.$emit('bv::hide::tooltip');
+      this.$root.$emit(BV_HIDE_TOOLTIP);
     },
     pipelineActionRequestComplete() {
       this.$emit('pipelineActionRequestComplete');
diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
index 23a38fc053e..fffd8e1818a 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <span class="ci-job-name-component mw-100 gl-display-flex gl-align-items-center">
-    <ci-icon :size="iconSize" :status="status" />
+    <ci-icon :size="iconSize" :status="status" class="gl-line-height-0" />
     <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block">
       {{ name }}
     </span>
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index d18e604f087..add7b3445f7 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
-import CiStatus from '~/vue_shared/components/ci_icon.vue';
+import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
+import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { accessValue } from './accessors';
 import { DOWNSTREAM, REST, UPSTREAM } from './constants';
 import { reportToSentry } from './utils';
@@ -126,7 +127,7 @@ export default {
       this.$emit('pipelineExpandToggle', this.sourceJobName, !this.expanded);
     },
     hideTooltips() {
-      this.$root.$emit('bv::hide::tooltip');
+      this.$root.$emit(BV_HIDE_TOOLTIP);
     },
     onDownstreamHovered() {
       this.$emit('downstreamHovered', this.sourceJobName);
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
index 40e6a01b88c..3ce77a1c60a 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
@@ -1,8 +1,8 @@
 <script>
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
-import LinkedPipeline from './linked_pipeline.vue';
 import { LOAD_FAILURE } from '../../constants';
-import { UPSTREAM } from './constants';
+import { ONE_COL_WIDTH, UPSTREAM } from './constants';
+import LinkedPipeline from './linked_pipeline.vue';
 import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 
 export default {
@@ -39,6 +39,7 @@ export default {
     'gl-pl-3',
     'gl-mb-5',
   ],
+  minWidth: `${ONE_COL_WIDTH}px`,
   computed: {
     columnClass() {
       const positionValues = {
@@ -47,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']
@@ -60,6 +55,15 @@ export default {
 
       return [...this.$options.titleClasses, ...positionalClasses];
     },
+    graphPosition() {
+      return this.isUpstream ? 'left' : 'right';
+    },
+    isUpstream() {
+      return this.type === UPSTREAM;
+    },
+    minWidth() {
+      return this.isUpstream ? 0 : this.$options.minWidth;
+    },
   },
   methods: {
     getPipelineData(pipeline) {
@@ -79,6 +83,7 @@ export default {
         },
         result() {
           this.loadingPipelineId = null;
+          this.$emit('scrollContainer');
         },
         error(err, _vm, _key, type) {
           this.$emit('error', LOAD_FAILURE);
@@ -130,6 +135,9 @@ export default {
 
       this.$emit('pipelineExpandToggle', jobName, expanded);
     },
+    showContainer(id) {
+      return this.isExpanded(id) || this.isLoadingPipeline(id);
+    },
   },
 };
 </script>
@@ -158,9 +166,13 @@ export default {
             @pipelineClicked="onPipelineClick(pipeline)"
             @pipelineExpandToggle="onPipelineExpandToggle"
           />
-          <div v-if="isExpanded(pipeline.id)" class="gl-display-inline-block">
+          <div
+            v-if="showContainer(pipeline.id)"
+            :style="{ 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"
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue
index 2f1390e07d1..0d1ff94c275 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue
@@ -1,6 +1,6 @@
 <script>
-import LinkedPipeline from './linked_pipeline.vue';
 import { UPSTREAM } from './constants';
+import LinkedPipeline from './linked_pipeline.vue';
 import { reportToSentry } from './utils';
 
 export default {
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 65f8c231885..0a762563114 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -1,11 +1,11 @@
 <script>
 import { capitalize, escape, isEmpty } from 'lodash';
 import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue';
-import JobItem from './job_item.vue';
-import JobGroupDropdown from './job_group_dropdown.vue';
+import { accessValue } from './accessors';
 import ActionComponent from './action_component.vue';
 import { GRAPHQL } from './constants';
-import { accessValue } from './accessors';
+import JobGroupDropdown from './job_group_dropdown.vue';
+import JobItem from './job_item.vue';
 import { reportToSentry } from './utils';
 
 export default {
@@ -67,6 +67,9 @@ export default {
   errorCaptured(err, _vm, info) {
     reportToSentry('stage_column_component', `error: ${err}, info: ${info}`);
   },
+  mounted() {
+    this.$emit('updateMeasurements');
+  },
   methods: {
     getGroupId(group) {
       return accessValue(GRAPHQL, 'groupId', group);
@@ -75,17 +78,13 @@ export default {
       return `ci-badge-${escape(group.name)}`;
     },
     isFadedOut(jobName) {
-      return (
-        this.jobHovered &&
-        this.highlightedJobs.length > 1 &&
-        !this.highlightedJobs.includes(jobName)
-      );
+      return this.highlightedJobs.length > 1 && !this.highlightedJobs.includes(jobName);
     },
   },
 };
 </script>
 <template>
-  <main-graph-wrapper class="gl-px-6">
+  <main-graph-wrapper class="gl-px-6" data-testid="stage-column">
     <template #stages>
       <div
         data-testid="stage-column-title"
@@ -123,12 +122,9 @@ export default {
           :class="{ 'gl-opacity-3': isFadedOut(group.name) }"
           @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
-        <job-group-dropdown
-          v-else
-          :group="group"
-          :pipeline-id="pipelineId"
-          :class="{ 'gl-opacity-3': isFadedOut(group.name) }"
-        />
+        <div v-else :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
+          <job-group-dropdown :group="group" :pipeline-id="pipelineId" />
+        </div>
       </div>
     </template>
   </main-graph-wrapper>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue
index 059e8f9f8db..2cee2fbbd8f 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue
@@ -1,9 +1,9 @@
 <script>
 import { isEmpty, escape } from 'lodash';
 import stageColumnMixin from '../../mixins/stage_column_mixin';
-import JobItem from './job_item.vue';
-import JobGroupDropdown from './job_group_dropdown.vue';
 import ActionComponent from './action_component.vue';
+import JobGroupDropdown from './job_group_dropdown.vue';
+import JobItem from './job_item.vue';
 import { reportToSentry } from './utils';
 
 export default {