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,14 +182,9 @@ export default {
       class="pipeline-visualization pipeline-graph"
       :class="{ 'pipeline-tab-content': !isLinkedPipeline }"
     >
-      <div
-        :style="{
-          paddingLeft: `${graphLeftPadding}px`,
-          paddingRight: `${graphRightPadding}px`,
-        }"
-      >
+      <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"
@@ -267,4 +261,5 @@ export default {
         </div>
       </div>
     </div>
+  </div>
 </template>

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