Merge branch '239446-pipeline-graph-layout' into 'master'

Leverage CSS vs. JS for pipeline padding

See merge request gitlab-org/gitlab!46914

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

@@ -2,7 +2,6 @@
 import { escape, capitalize } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
 import StageColumnComponentLegacy from './stage_column_component_legacy.vue';
-import GraphWidthMixin from '../../mixins/graph_width_mixin';
 import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue';
 import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin';
 import { UPSTREAM, DOWNSTREAM, MAIN } from './constants';
@@ -14,7 +13,7 @@ export default {
     LinkedPipelinesColumnLegacy,
     StageColumnComponentLegacy,
   },
-  mixins: [GraphWidthMixin, GraphBundleMixin],
+  mixins: [GraphBundleMixin],
   props: {
     isLoading: {
       type: Boolean,
@@ -183,87 +182,83 @@ export default {
       class="pipeline-visualization pipeline-graph"
       :class="{ 'pipeline-tab-content': !isLinkedPipeline }"
     >
-      <div
-        :style="{
-          paddingLeft: `${graphLeftPadding}px`,
-          paddingRight: `${graphRightPadding}px`,
-        }"
-      >
-        <gl-loading-icon v-if="isLoading" class="m-auto" size="lg" />
-
-        <pipeline-graph-legacy
-          v-if="pipelineTypeUpstream"
-          :type="$options.upstream"
-          class="d-inline-block upstream-pipeline"
-          :class="`js-upstream-pipeline-${expandedUpstream.id}`"
-          :is-loading="false"
-          :pipeline="expandedUpstream"
-          :is-linked-pipeline="true"
-          :mediator="mediator"
-          @onClickUpstreamPipeline="clickUpstreamPipeline"
-          @refreshPipelineGraph="requestRefreshPipelineGraph"
-        />
+      <div class="gl-w-full">
+        <div class="container-fluid container-limited">
+          <gl-loading-icon v-if="isLoading" class="m-auto" size="lg" />
+          <pipeline-graph-legacy
+            v-if="pipelineTypeUpstream"
+            :type="$options.upstream"
+            class="d-inline-block upstream-pipeline"
+            :class="`js-upstream-pipeline-${expandedUpstream.id}`"
+            :is-loading="false"
+            :pipeline="expandedUpstream"
+            :is-linked-pipeline="true"
+            :mediator="mediator"
+            @onClickUpstreamPipeline="clickUpstreamPipeline"
+            @refreshPipelineGraph="requestRefreshPipelineGraph"
+          />
 
-        <linked-pipelines-column-legacy
-          v-if="hasUpstream"
-          :type="$options.upstream"
-          :linked-pipelines="upstreamPipelines"
-          :column-title="__('Upstream')"
-          :project-id="pipelineProjectId"
-          @linkedPipelineClick="$emit('onClickUpstreamPipeline', $event)"
-        />
+          <linked-pipelines-column-legacy
+            v-if="hasUpstream"
+            :type="$options.upstream"
+            :linked-pipelines="upstreamPipelines"
+            :column-title="__('Upstream')"
+            :project-id="pipelineProjectId"
+            @linkedPipelineClick="$emit('onClickUpstreamPipeline', $event)"
+          />
 
-        <ul
-          v-if="!isLoading"
-          :class="{
-            'inline js-has-linked-pipelines': hasDownstream || hasUpstream,
-          }"
-          class="stage-column-list align-top"
-        >
-          <stage-column-component-legacy
-            v-for="(stage, index) in graph"
-            :key="stage.name"
+          <ul
+            v-if="!isLoading"
             :class="{
-              'has-upstream gl-ml-11': hasUpstreamColumn(index),
-              'has-only-one-job': hasOnlyOneJob(stage),
-              'gl-mr-26': shouldAddRightMargin(index),
+              'inline js-has-linked-pipelines': hasDownstream || hasUpstream,
             }"
-            :title="capitalizeStageName(stage.name)"
-            :groups="stage.groups"
-            :stage-connector-class="stageConnectorClass(index, stage)"
-            :is-first-column="isFirstColumn(index)"
-            :has-upstream="hasUpstream"
-            :action="stage.status.action"
-            :job-hovered="jobName"
-            :pipeline-expanded="pipelineExpanded"
-            @refreshPipelineGraph="refreshPipelineGraph"
-          />
-        </ul>
+            class="stage-column-list align-top"
+          >
+            <stage-column-component-legacy
+              v-for="(stage, index) in graph"
+              :key="stage.name"
+              :class="{
+                'has-upstream gl-ml-11': hasUpstreamColumn(index),
+                'has-only-one-job': hasOnlyOneJob(stage),
+                'gl-mr-26': shouldAddRightMargin(index),
+              }"
+              :title="capitalizeStageName(stage.name)"
+              :groups="stage.groups"
+              :stage-connector-class="stageConnectorClass(index, stage)"
+              :is-first-column="isFirstColumn(index)"
+              :has-upstream="hasUpstream"
+              :action="stage.status.action"
+              :job-hovered="jobName"
+              :pipeline-expanded="pipelineExpanded"
+              @refreshPipelineGraph="refreshPipelineGraph"
+            />
+          </ul>
 
-        <linked-pipelines-column-legacy
-          v-if="hasDownstream"
-          :type="$options.downstream"
-          :linked-pipelines="downstreamPipelines"
-          :column-title="__('Downstream')"
-          :project-id="pipelineProjectId"
-          @linkedPipelineClick="handleClickedDownstream"
-          @downstreamHovered="setJob"
-          @pipelineExpandToggle="setPipelineExpanded"
-        />
+          <linked-pipelines-column-legacy
+            v-if="hasDownstream"
+            :type="$options.downstream"
+            :linked-pipelines="downstreamPipelines"
+            :column-title="__('Downstream')"
+            :project-id="pipelineProjectId"
+            @linkedPipelineClick="handleClickedDownstream"
+            @downstreamHovered="setJob"
+            @pipelineExpandToggle="setPipelineExpanded"
+          />
 
-        <pipeline-graph-legacy
-          v-if="pipelineTypeDownstream"
-          :type="$options.downstream"
-          class="d-inline-block"
-          :class="`js-downstream-pipeline-${expandedDownstream.id}`"
-          :is-loading="false"
-          :pipeline="expandedDownstream"
-          :is-linked-pipeline="true"
-          :style="{ 'margin-top': downstreamMarginTop }"
-          :mediator="mediator"
-          @onClickDownstreamPipeline="clickDownstreamPipeline"
-          @refreshPipelineGraph="requestRefreshPipelineGraph"
-        />
+          <pipeline-graph-legacy
+            v-if="pipelineTypeDownstream"
+            :type="$options.downstream"
+            class="d-inline-block"
+            :class="`js-downstream-pipeline-${expandedDownstream.id}`"
+            :is-loading="false"
+            :pipeline="expandedDownstream"
+            :is-linked-pipeline="true"
+            :style="{ 'margin-top': downstreamMarginTop }"
+            :mediator="mediator"
+            @onClickDownstreamPipeline="clickDownstreamPipeline"
+            @refreshPipelineGraph="requestRefreshPipelineGraph"
+          />
+        </div>
       </div>
     </div>
   </div>

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

-import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
-import { LAYOUT_CHANGE_DELAY } from '~/pipelines/constants';
-
-export default {
-  debouncedResize: null,
-  sidebarMutationObserver: null,
-  data() {
-    return {
-      graphLeftPadding: 0,
-      graphRightPadding: 0,
-    };
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.$options.debouncedResize);
-
-    if (this.$options.sidebarMutationObserver) {
-      this.$options.sidebarMutationObserver.disconnect();
-    }
-  },
-  created() {
-    this.$options.debouncedResize = debounceByAnimationFrame(this.setGraphPadding);
-    window.addEventListener('resize', this.$options.debouncedResize);
-  },
-  mounted() {
-    this.setGraphPadding();
-
-    this.$options.sidebarMutationObserver = new MutationObserver(this.handleLayoutChange);
-    this.$options.sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
-      attributes: true,
-      childList: false,
-      subtree: false,
-    });
-  },
-  methods: {
-    setGraphPadding() {
-      // only add padding to main graph (not inline upstream/downstream graphs)
-      if (this.type && this.type !== 'main') return;
-
-      const container = document.querySelector('.js-pipeline-container');
-      if (!container) return;
-
-      this.graphLeftPadding = container.offsetLeft;
-      this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth;
-    },
-    handleLayoutChange() {
-      // wait until animations finish, then recalculate padding
-      window.setTimeout(this.setGraphPadding, LAYOUT_CHANGE_DELAY);
-    },
-  },
-};

app/views/projects/pipelines/_with_tabs.html.haml

@@ -26,7 +26,7 @@
     = render_if_exists "projects/pipelines/tabs_holder", pipeline: @pipeline, project: @project
 
 .tab-content
-  #js-tab-pipeline.tab-pane.gl-absolute.gl-left-0.gl-w-full
+  #js-tab-pipeline.tab-pane.gl-w-full
     #js-pipeline-graph-vue
 
   #js-tab-builds.tab-pane