From 51758a6e7216dbc3dd3ff3b67f9e8a5536695059 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 22 Sep 2023 20:49:07 +0200
Subject: [PATCH 1/2] Pipeline: Redesign Pipeline Graph

Changelog: changed
---
 .../common/private/job_action_component.vue   | 14 ++++++--
 .../ci/common/private/job_links_layer.vue     |  2 +-
 .../graph/components/graph_component.vue      |  5 +--
 .../graph/components/graph_view_selector.vue  |  6 ++--
 .../graph/components/linked_graph_wrapper.vue |  2 +-
 .../graph/components/linked_pipeline.vue      |  2 +-
 .../components/linked_pipelines_column.vue    | 13 +++----
 .../graph/components/root_graph_layout.vue    | 23 ++++++++-----
 .../components/stage_column_component.vue     | 23 +++++++------
 .../stylesheets/framework/variables.scss      |  2 +-
 .../stylesheets/page_bundles/pipeline.scss    | 34 ++++++++++++++++---
 11 files changed, 84 insertions(+), 42 deletions(-)

diff --git a/app/assets/javascripts/ci/common/private/job_action_component.vue b/app/assets/javascripts/ci/common/private/job_action_component.vue
index b0fa724d4506cc..c266e061513c49 100644
--- a/app/assets/javascripts/ci/common/private/job_action_component.vue
+++ b/app/assets/javascripts/ci/common/private/job_action_component.vue
@@ -119,6 +119,7 @@ export default {
     ref="button"
     :class="cssClass"
     :disabled="isDisabled"
+    size="small"
     class="js-ci-action gl-ci-action-icon-container ci-action-icon-container ci-action-icon-wrapper gl-display-flex gl-align-items-center gl-justify-content-center"
     data-testid="ci-action-button"
     @click.stop="onClickAction"
@@ -129,8 +130,17 @@ export default {
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-h-full"
       data-testid="ci-action-icon-tooltip-wrapper"
     >
-      <gl-loading-icon v-if="isLoading" size="sm" class="js-action-icon-loading" />
-      <gl-icon v-else :name="actionIcon" class="gl-mr-0!" :aria-label="actionIcon" />
+      <gl-loading-icon
+        v-if="isLoading"
+        size="sm"
+        class="gl-button-icon gl-m-2 js-action-icon-loading"
+      />
+      <gl-icon
+        v-else
+        :name="actionIcon"
+        class="gl-button-icon gl-p-1 gl-mr-0!"
+        :aria-label="actionIcon"
+      />
     </div>
   </gl-button>
 </template>
diff --git a/app/assets/javascripts/ci/common/private/job_links_layer.vue b/app/assets/javascripts/ci/common/private/job_links_layer.vue
index 59260ca3f81678..d805b1efbeac13 100644
--- a/app/assets/javascripts/ci/common/private/job_links_layer.vue
+++ b/app/assets/javascripts/ci/common/private/job_links_layer.vue
@@ -68,7 +68,7 @@ export default {
     <slot></slot>
   </links-inner>
   <div v-else>
-    <div class="gl-display-flex gl-relative">
+    <div class="gl-display-flex gl-relative gl-flex-wrap gl-sm-flex-nowrap">
       <slot></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
index f098d790736f4e..8875dce1456bb8 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
@@ -178,9 +178,10 @@ export default {
   <div class="js-pipeline-graph">
     <div
       ref="mainPipelineContainer"
-      class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap"
+      class="gl-display-flex gl-position-relative gl-white-space-nowrap gl-rounded-lg"
       :class="{
-        'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline,
+        'gl-bg-gray-10 gl-pipeline-min-h gl-align-items-flex-start gl-pt-3 gl-pb-8 gl-mt-3 gl-overflow-auto': !isLinkedPipeline,
+        'gl-bg-gray-50 gl-mt-5 gl-sm-mt-0 gl-sm-ml-5': isLinkedPipeline,
       }"
     >
       <linked-graph-wrapper>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
index fb7dcb300f1179..165629c50cb237 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
@@ -138,7 +138,9 @@ export default {
 
 <template>
   <div>
-    <div class="gl-relative gl-display-flex gl-align-items-center gl-w-max-content gl-my-4">
+    <div
+      class="gl-relative gl-display-flex gl-align-items-center gl-flex-wrap gl-sm-flex-nowrap gl-my-4"
+    >
       <gl-loading-icon
         v-if="isSwitcherLoading"
         data-testid="switcher-loading-state"
@@ -161,7 +163,7 @@ export default {
         <gl-toggle
           v-model="showLinksActive"
           data-testid="show-links-toggle"
-          class="gl-mx-4"
+          class="gl-sm-ml-4 gl-mt-4 gl-sm-mt-0"
           :label="$options.i18n.linksLabelText"
           :is-loading="isToggleLoading"
           label-position="left"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
index fb2280d971abf1..5e851fe3e452b8 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="gl-display-flex">
+  <div class="gl-display-flex gl-flex-wrap">
     <slot name="upstream"></slot>
     <slot name="main"></slot>
     <slot name="downstream"></slot>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index 5960eea5b4f4dd..c886b10e41159c 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -231,7 +231,7 @@ export default {
 <template>
   <div
     ref="linkedPipeline"
-    class="gl-h-full gl-display-flex! gl-px-2"
+    class="gl-h-full gl-display-flex! gl-w-full gl-sm-w-auto"
     :class="flexDirection"
     data-testid="linked-pipeline-container"
     @mouseover="onDownstreamHovered"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
index 2de7e43c9b1eb4..590154380ccb1c 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
@@ -63,15 +63,13 @@ export default {
     'gl-pipeline-job-width',
     'gl-text-truncate',
     'gl-line-height-36',
-    'gl-pl-3',
-    'gl-mb-5',
   ],
   minWidth: `${ONE_COL_WIDTH}px`,
   computed: {
     columnClass() {
       const positionValues = {
-        right: 'gl-ml-6',
-        left: 'gl-mx-6',
+        right: 'gl-ml-4',
+        left: 'gl-mx-4 gl-flex-basis-full',
       };
 
       return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`;
@@ -197,7 +195,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex">
+  <div class="gl-display-flex gl-w-full">
     <div :class="columnClass" class="linked-pipelines-column">
       <div data-testid="linked-column-title" :class="computedTitleClasses">
         {{ columnTitle }}
@@ -206,8 +204,7 @@ export default {
         <li
           v-for="pipeline in linkedPipelines"
           :key="pipeline.id"
-          class="gl-display-flex gl-mb-3"
-          :class="{ 'gl-flex-direction-row-reverse': isUpstream }"
+          class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-mb-6"
         >
           <linked-pipeline
             class="gl-display-inline-block"
@@ -229,7 +226,7 @@ export default {
             <pipeline-graph
               v-if="isExpanded(pipeline.id)"
               :type="type"
-              class="gl-inline-block gl-mt-n2"
+              class="gl-inline-block"
               :config-paths="configPaths"
               :pipeline="currentPipeline"
               :computed-pipeline-info="getPipelineLayers(pipeline.id)"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
index bcd7705669ee6d..db2924fb670991 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlCard } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlCard,
+  },
   props: {
     stageClasses: {
       type: String,
@@ -16,14 +21,16 @@ export default {
 </script>
 <template>
   <div>
-    <div class="gl-display-flex gl-align-items-center gl-w-full gl-mb-5" :class="stageClasses">
-      <slot name="stages"> </slot>
-    </div>
-    <div
-      class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full"
-      :class="jobClasses"
+    <gl-card
+      class="gl-rounded-lg"
+      header-class="gl-rounded-lg gl-px-0 gl-py-0 gl-bg-white gl-border-b-0"
+      body-class="gl-p-2"
     >
-      <slot name="jobs"> </slot>
-    </div>
+      <template #header>
+        <slot name="stages"></slot>
+      </template>
+
+      <slot name="jobs"></slot>
+    </gl-card>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
index 6030adc96ad9ba..4f3a35c39dac6f 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
@@ -70,31 +70,28 @@ export default {
   },
   jobClasses: [
     'gl-p-3',
-    'gl-border-gray-100',
-    'gl-border-solid',
-    'gl-border-1',
-    'gl-bg-white',
-    'gl-rounded-7',
+    'gl-border-0',
+    'gl-bg-transparent',
+    'gl-rounded-base',
     'gl-hover-bg-gray-50',
     'gl-focus-bg-gray-50',
     'gl-hover-text-gray-900',
     'gl-focus-text-gray-900',
-    'gl-hover-border-gray-200',
-    'gl-focus-border-gray-200',
   ],
   titleClasses: [
     'gl-font-weight-bold',
     'gl-pipeline-job-width',
     'gl-text-truncate',
     'gl-line-height-36',
-    'gl-pl-3',
+    'gl-pl-4',
+    'gl-mb-n2',
   ],
   computed: {
     canUpdatePipeline() {
       return this.userPermissions.updatePipeline;
     },
     columnSpacingClass() {
-      return this.isStageView ? 'gl-px-6' : 'gl-px-9';
+      return this.isStageView ? 'is-stage-view gl-m-5' : 'gl-my-4 gl-mx-7';
     },
     hasAction() {
       return !isEmpty(this.action);
@@ -135,7 +132,11 @@ export default {
 };
 </script>
 <template>
-  <root-graph-layout :class="columnSpacingClass" data-testid="stage-column">
+  <root-graph-layout
+    :class="columnSpacingClass"
+    class="stage-column gl-relative gl-flex-basis-full"
+    data-testid="stage-column"
+  >
     <template #stages>
       <div
         data-testid="stage-column-title"
@@ -161,7 +162,7 @@ export default {
         :id="groupId(group)"
         :key="getGroupId(group)"
         data-testid="stage-column-group"
-        class="gl-relative gl-mb-3 gl-white-space-normal gl-pipeline-job-width"
+        class="gl-relative gl-white-space-normal gl-pipeline-job-width"
         @mouseenter="$emit('jobHover', group.name)"
         @mouseleave="$emit('jobHover', '')"
       >
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 31d45ad3a28559..9a1faf271438d0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -811,7 +811,7 @@ $ci-action-icon-size: 22px;
 $ci-action-icon-size-lg: 24px;
 $pipeline-dropdown-line-height: 20px;
 $ci-action-dropdown-button-size: 24px;
-$ci-action-dropdown-svg-size: 12px;
+$ci-action-dropdown-svg-size: 16px;
 
 /*
 CI variable lists
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 98e9e2b3c27f57..e8c27158c057d8 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -125,17 +125,15 @@
 // They are here to still access a variable or because they use magic values.
 // scoped to the graph. Do not add other styles.
 .gl-pipeline-min-h {
-  min-height: $dropdown-max-height-lg;
+  min-height: calc(#{$dropdown-max-height-lg} + #{$gl-spacing-scale-6});
 }
 
 .gl-pipeline-job-width {
   width: 100%;
-  max-width: 400px;
 }
 
 .gl-pipeline-job-width\! {
   width: 100% !important;
-  max-width: 400px !important;
 }
 
 .gl-downstream-pipeline-job-width {
@@ -154,8 +152,8 @@
 
   // Action Icons in big pipeline-graph nodes
   &.ci-action-icon-wrapper {
-    height: 30px;
-    width: 30px;
+    height: 24px;
+    width: 24px;
     border-radius: 100%;
     display: block;
     padding: 0;
@@ -242,3 +240,29 @@
     }
   }
 }
+
+.stage-column.is-stage-view:not(:last-of-type)::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: $gl-spacing-scale-6;
+  width: 2px;
+  height: $gl-spacing-scale-5 * 2;
+  background-color: $gray-200;
+
+  @media (min-width: $breakpoint-sm) {
+    top: 1.25rem;
+    left: 100%;
+    width: $gl-spacing-scale-5 * 2;
+    height: 2px;
+  }
+}
+
+.stage-column,
+.stage-column.is-stage-view {
+  @media (min-width: $breakpoint-sm) {
+    &:first-of-type {
+      margin-left: $gl-spacing-scale-6;
+    }
+  }
+}
-- 
GitLab


From a2fd1ff5348cebd72529268e04f1c875351f4b04 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 2 Oct 2023 15:01:17 +0200
Subject: [PATCH 2/2] Add feature flag :new_pipeline_graph

Changelog: changed
---
 .../ci/common/private/job_links_layer.vue     | 10 +-
 .../graph/components/graph_component.vue      | 20 +++-
 .../graph/components/graph_view_selector.vue  | 18 +++-
 .../graph/components/linked_graph_wrapper.vue | 14 ++-
 .../graph/components/linked_pipeline.vue      | 20 ++--
 .../components/linked_pipelines_column.vue    | 34 +++++--
 .../graph/components/root_graph_layout.vue    | 21 ++++-
 .../components/stage_column_component.vue     | 51 ++++++++++-
 .../stylesheets/page_bundles/pipeline.scss    | 83 +++++++++++++----
 .../development/new_pipeline_graph.yml        |  8 ++
 .../ee/projects/pipelines_controller.rb       |  1 +
 .../graph/components/graph_component_spec.js  | 91 ++++++++++++++++++-
 12 files changed, 321 insertions(+), 50 deletions(-)
 create mode 100644 config/feature_flags/development/new_pipeline_graph.yml

diff --git a/app/assets/javascripts/ci/common/private/job_links_layer.vue b/app/assets/javascripts/ci/common/private/job_links_layer.vue
index d805b1efbeac13..9b3647e9c559b1 100644
--- a/app/assets/javascripts/ci/common/private/job_links_layer.vue
+++ b/app/assets/javascripts/ci/common/private/job_links_layer.vue
@@ -1,5 +1,6 @@
 <script>
 import { memoize } from 'lodash';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { reportToSentry } from '~/ci/utils';
 import { parseData } from '~/ci/pipeline_details/utils/parsing_utils';
 import LinksInner from '~/ci/pipeline_details/graph/components/links_inner.vue';
@@ -16,6 +17,7 @@ export default {
   components: {
     LinksInner,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     containerMeasurements: {
       type: Object,
@@ -50,6 +52,9 @@ export default {
     showLinkedLayers() {
       return this.showLinks && !this.containerZero;
     },
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
@@ -68,7 +73,10 @@ export default {
     <slot></slot>
   </links-inner>
   <div v-else>
-    <div class="gl-display-flex gl-relative gl-flex-wrap gl-sm-flex-nowrap">
+    <div
+      class="gl-display-flex gl-relative"
+      :class="{ 'gl-flex-wrap gl-sm-flex-nowrap': isNewPipelineGraph }"
+    >
       <slot></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
index 8875dce1456bb8..fce7aabf0cf261 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue
@@ -4,6 +4,7 @@ import {
   generateColumnsFromLayersListMemoized,
   keepLatestDownstreamPipelines,
 } from '~/ci/pipeline_details/utils/parsing_utils';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LinksLayer from '../../../common/private/job_links_layer.vue';
 import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from '../constants';
 import { validateConfigPaths } from '../utils';
@@ -19,6 +20,7 @@ export default {
     LinkedPipelinesColumn,
     StageColumnComponent,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     configPaths: {
       type: Object,
@@ -132,6 +134,9 @@ export default {
     upstreamPipelines() {
       return this.hasUpstreamPipelines ? this.pipeline.upstream : [];
     },
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
@@ -178,11 +183,15 @@ export default {
   <div class="js-pipeline-graph">
     <div
       ref="mainPipelineContainer"
-      class="gl-display-flex gl-position-relative gl-white-space-nowrap gl-rounded-lg"
+      class="pipeline-graph gl-display-flex gl-position-relative gl-white-space-nowrap gl-rounded-lg"
       :class="{
-        'gl-bg-gray-10 gl-pipeline-min-h gl-align-items-flex-start gl-pt-3 gl-pb-8 gl-mt-3 gl-overflow-auto': !isLinkedPipeline,
-        'gl-bg-gray-50 gl-mt-5 gl-sm-mt-0 gl-sm-ml-5': isLinkedPipeline,
+        'gl-bg-gray-10': !isNewPipelineGraph,
+        'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isNewPipelineGraph && !isLinkedPipeline,
+        'pipeline-graph-container gl-bg-gray-10 gl-pipeline-min-h gl-align-items-flex-start gl-pt-3 gl-pb-8 gl-mt-3 gl-overflow-auto':
+          isNewPipelineGraph && !isLinkedPipeline,
+        'gl-bg-gray-50 gl-sm-ml-5': isNewPipelineGraph && isLinkedPipeline,
       }"
+      data-testid="pipeline-container"
     >
       <linked-graph-wrapper>
         <template #upstream>
@@ -200,7 +209,7 @@ export default {
           />
         </template>
         <template #main>
-          <div :id="containerId" :ref="containerId">
+          <div :id="containerId" :ref="containerId" class="pipeline-links-container">
             <links-layer
               :pipeline-data="layout"
               :pipeline-id="pipeline.id"
@@ -239,7 +248,8 @@ export default {
         <template #downstream>
           <linked-pipelines-column
             v-if="showDownstreamPipelines"
-            class="gl-mr-6"
+            class="gl-mr-5"
+            :class="{ 'gl-sm-ml-3': isNewPipelineGraph }"
             :config-paths="configPaths"
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
index 165629c50cb237..114b224fbe76ac 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue
@@ -1,11 +1,11 @@
 <script>
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon, GlToggle } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __, s__ } from '~/locale';
 import { STAGE_VIEW, LAYER_VIEW } from '../constants';
 
 export default {
   name: 'GraphViewSelector',
-
   components: {
     GlAlert,
     GlButton,
@@ -13,7 +13,7 @@ export default {
     GlLoadingIcon,
     GlToggle,
   },
-
+  mixins: [glFeatureFlagMixin()],
   props: {
     showLinks: {
       type: Boolean,
@@ -77,6 +77,9 @@ export default {
         };
       });
     },
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
   },
   watch: {
     /*
@@ -139,7 +142,11 @@ export default {
 <template>
   <div>
     <div
-      class="gl-relative gl-display-flex gl-align-items-center gl-flex-wrap gl-sm-flex-nowrap gl-my-4"
+      class="gl-relative gl-display-flex gl-align-items-center gl-my-4"
+      :class="{
+        'gl-w-max-content': !isNewPipelineGraph,
+        'gl-flex-wrap gl-sm-flex-nowrap': isNewPipelineGraph,
+      }"
     >
       <gl-loading-icon
         v-if="isSwitcherLoading"
@@ -163,7 +170,10 @@ export default {
         <gl-toggle
           v-model="showLinksActive"
           data-testid="show-links-toggle"
-          class="gl-sm-ml-4 gl-mt-4 gl-sm-mt-0"
+          :class="{
+            'gl-mx-4': !isNewPipelineGraph,
+            'gl-sm-ml-4 gl-mt-4 gl-sm-mt-0': isNewPipelineGraph,
+          }"
           :label="$options.i18n.linksLabelText"
           :is-loading="isToggleLoading"
           label-position="left"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
index 5e851fe3e452b8..9bd0ec6d793336 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue
@@ -1,5 +1,17 @@
+<script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
+export default {
+  mixins: [glFeatureFlagMixin()],
+  computed: {
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
+  },
+};
+</script>
 <template>
-  <div class="gl-display-flex gl-flex-wrap">
+  <div class="gl-display-flex" :class="{ 'gl-flex-wrap gl-w-full': isNewPipelineGraph }">
     <slot name="upstream"></slot>
     <slot name="main"></slot>
     <slot name="downstream"></slot>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index c886b10e41159c..6a42f4a7b91a98 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -7,6 +7,7 @@ import {
   GlTooltip,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { TYPENAME_CI_PIPELINE } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
@@ -29,6 +30,7 @@ export default {
     GlLoadingIcon,
     GlTooltip,
   },
+  mixins: [glFeatureFlagMixin()],
   styles: {
     actionSizeClasses: ['gl-h-7 gl-w-7'],
     flatLeftBorder: ['gl-rounded-bottom-left-none!', 'gl-rounded-top-left-none!'],
@@ -115,9 +117,6 @@ export default {
     downstreamTitle() {
       return this.childPipeline ? this.sourceJobName : this.pipeline.project.name;
     },
-    flexDirection() {
-      return this.isUpstream ? 'gl-flex-direction-row-reverse' : 'gl-flex-direction-row';
-    },
     graphqlPipelineId() {
       return convertToGraphQLId(TYPENAME_CI_PIPELINE, this.pipeline.id);
     },
@@ -176,6 +175,9 @@ export default {
       return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label} -
       ${this.sourceJobInfo}`;
     },
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry('linked_pipeline', `error: ${err}, info: ${info}`);
@@ -231,9 +233,15 @@ export default {
 <template>
   <div
     ref="linkedPipeline"
-    class="gl-h-full gl-display-flex! gl-w-full gl-sm-w-auto"
-    :class="flexDirection"
+    class="linked-pipeline-container gl-h-full gl-display-flex!"
+    :class="{
+      'gl-flex-direction-row-reverse': isUpstream,
+      'gl-flex-direction-row': !isUpstream,
+      'gl-px-2': !isNewPipelineGraph,
+      'gl-w-full gl-sm-w-auto': isNewPipelineGraph,
+    }"
     data-testid="linked-pipeline-container"
+    :aria-expanded="expanded"
     @mouseover="onDownstreamHovered"
     @mouseleave="onDownstreamHoverLeave"
   >
@@ -252,7 +260,7 @@ export default {
         />
         <div v-else class="gl-pr-3"><gl-loading-icon size="sm" inline /></div>
         <div
-          class="gl-display-flex gl-downstream-pipeline-job-width gl-flex-direction-column gl-line-height-normal"
+          class="gl-display-flex gl-flex-direction-column gl-line-height-normal gl-downstream-pipeline-job-width"
         >
           <span class="gl-text-truncate" data-testid="downstream-title-content">
             {{ downstreamTitle }}
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
index 590154380ccb1c..67918ea8d1ab3a 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
@@ -1,4 +1,5 @@
 <script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { reportToSentry } from '~/ci/utils';
 import { LOAD_FAILURE } from '../../constants';
@@ -18,6 +19,7 @@ export default {
     LinkedPipeline,
     PipelineGraph: () => import('./graph_component.vue'),
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     columnTitle: {
       type: String,
@@ -67,17 +69,26 @@ export default {
   minWidth: `${ONE_COL_WIDTH}px`,
   computed: {
     columnClass() {
+      const positionValuesOld = {
+        right: 'gl-ml-6',
+        left: 'gl-mx-6',
+      };
       const positionValues = {
-        right: 'gl-ml-4',
+        right: 'gl-ml-5',
         left: 'gl-mx-4 gl-flex-basis-full',
       };
+      const usePositionValues = this.isNewPipelineGraph ? positionValues : positionValuesOld;
 
-      return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`;
+      return `graph-position-${this.graphPosition} ${usePositionValues[this.graphPosition]}`;
     },
     computedTitleClasses() {
       const positionalClasses = this.isUpstream ? ['gl-w-full', 'gl-linked-pipeline-padding'] : [];
 
-      return [...this.$options.titleClasses, ...positionalClasses];
+      return [
+        ...this.$options.titleClasses,
+        !this.isNewPipelineGraph ?? ['gl-pl-3', 'gl-mb-5'],
+        ...positionalClasses,
+      ];
     },
     graphPosition() {
       return this.isUpstream ? 'left' : 'right';
@@ -91,6 +102,9 @@ export default {
     minWidth() {
       return this.isUpstream ? 0 : this.$options.minWidth;
     },
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
   },
   methods: {
     getPipelineData(pipeline) {
@@ -195,7 +209,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-w-full">
+  <div class="gl-display-flex" :class="{ 'gl-w-full': isNewPipelineGraph }">
     <div :class="columnClass" class="linked-pipelines-column">
       <div data-testid="linked-column-title" :class="computedTitleClasses">
         {{ columnTitle }}
@@ -204,7 +218,12 @@ export default {
         <li
           v-for="pipeline in linkedPipelines"
           :key="pipeline.id"
-          class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-mb-6"
+          class="gl-display-flex"
+          :class="{
+            'gl-mb-3': !isNewPipelineGraph,
+            'gl-flex-wrap gl-sm-flex-nowrap gl-mb-6': isNewPipelineGraph,
+            'gl-flex-direction-row-reverse': !isNewPipelineGraph && isUpstream,
+          }"
         >
           <linked-pipeline
             class="gl-display-inline-block"
@@ -221,12 +240,15 @@ export default {
           <div
             v-if="showContainer(pipeline.id)"
             :style="{ minWidth }"
-            class="gl-display-inline-block"
+            class="gl-display-inline-block pipeline-show-container"
           >
             <pipeline-graph
               v-if="isExpanded(pipeline.id)"
               :type="type"
               class="gl-inline-block"
+              :class="{
+                'gl-mt-n2': !isNewPipelineGraph,
+              }"
               :config-paths="configPaths"
               :pipeline="currentPipeline"
               :computed-pipeline-info="getPipelineLayers(pipeline.id)"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
index db2924fb670991..7c07591d0de81a 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue
@@ -1,10 +1,12 @@
 <script>
 import { GlCard } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
     GlCard,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     stageClasses: {
       type: String,
@@ -17,14 +19,20 @@ export default {
       default: '',
     },
   },
+  computed: {
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
+  },
 };
 </script>
 <template>
   <div>
     <gl-card
+      v-if="isNewPipelineGraph"
       class="gl-rounded-lg"
       header-class="gl-rounded-lg gl-px-0 gl-py-0 gl-bg-white gl-border-b-0"
-      body-class="gl-p-2"
+      body-class="gl-pt-2 gl-pb-0 gl-px-2"
     >
       <template #header>
         <slot name="stages"></slot>
@@ -32,5 +40,16 @@ export default {
 
       <slot name="jobs"></slot>
     </gl-card>
+    <template v-else>
+      <div class="gl-display-flex gl-align-items-center gl-w-full" :class="stageClasses">
+        <slot name="stages"> </slot>
+      </div>
+      <div
+        class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full"
+        :class="jobClasses"
+      >
+        <slot name="jobs"> </slot>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
index 4f3a35c39dac6f..e144b9aab0cbad 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
@@ -68,6 +68,20 @@ export default {
       required: true,
     },
   },
+  legacyJobClasses: [
+    'gl-p-3',
+    'gl-border-gray-100',
+    'gl-border-solid',
+    'gl-border-1',
+    'gl-bg-white',
+    'gl-rounded-7',
+    'gl-hover-bg-gray-50',
+    'gl-focus-bg-gray-50',
+    'gl-hover-text-gray-900',
+    'gl-focus-text-gray-900',
+    'gl-hover-border-gray-200',
+    'gl-focus-border-gray-200',
+  ],
   jobClasses: [
     'gl-p-3',
     'gl-border-0',
@@ -78,6 +92,13 @@ export default {
     'gl-hover-text-gray-900',
     'gl-focus-text-gray-900',
   ],
+  legacyTitleClasses: [
+    'gl-font-weight-bold',
+    'gl-pipeline-job-width',
+    'gl-text-truncate',
+    'gl-line-height-36',
+    'gl-pl-3',
+  ],
   titleClasses: [
     'gl-font-weight-bold',
     'gl-pipeline-job-width',
@@ -91,7 +112,14 @@ export default {
       return this.userPermissions.updatePipeline;
     },
     columnSpacingClass() {
-      return this.isStageView ? 'is-stage-view gl-m-5' : 'gl-my-4 gl-mx-7';
+      if (this.isNewPipelineGraph) {
+        const baseClasses = 'stage-column gl-relative gl-flex-basis-full';
+        return this.isStageView
+          ? `${baseClasses} is-stage-view gl-m-5`
+          : `${baseClasses} gl-my-5 gl-mx-7`;
+      }
+
+      return this.isStageView ? 'gl-px-6' : 'gl-px-9';
     },
     hasAction() {
       return !isEmpty(this.action);
@@ -99,6 +127,17 @@ export default {
     showStageName() {
       return !this.isStageView;
     },
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
+    jobClasses() {
+      return this.isNewPipelineGraph ? this.$options.jobClasses : this.$options.legacyJobClasses;
+    },
+    titleClasses() {
+      return this.isNewPipelineGraph
+        ? this.$options.titleClasses
+        : this.$options.legacyTitleClasses;
+    },
   },
   errorCaptured(err, _vm, info) {
     reportToSentry('stage_column_component', `error: ${err}, info: ${info}`);
@@ -141,7 +180,7 @@ export default {
       <div
         data-testid="stage-column-title"
         class="gl-display-flex gl-justify-content-space-between gl-relative"
-        :class="$options.titleClasses"
+        :class="titleClasses"
       >
         <span :title="name" class="gl-text-truncate gl-pr-3 gl-w-85p">
           {{ name }}
@@ -163,6 +202,10 @@ export default {
         :key="getGroupId(group)"
         data-testid="stage-column-group"
         class="gl-relative gl-white-space-normal gl-pipeline-job-width"
+        :class="{
+          'gl-mb-3': !isNewPipelineGraph,
+          'gl-mb-2': isNewPipelineGraph,
+        }"
         @mouseenter="$emit('jobHover', group.name)"
         @mouseleave="$emit('jobHover', '')"
       >
@@ -175,7 +218,7 @@ export default {
           :pipeline-expanded="pipelineExpanded"
           :pipeline-id="pipelineId"
           :stage-name="showStageName ? group.stageName : ''"
-          :css-class-job-name="$options.jobClasses"
+          :css-class-job-name="jobClasses"
           :class="[
             { 'gl-opacity-3': isFadedOut(group.name) },
             'gl-transition-duration-slow gl-transition-timing-function-ease',
@@ -189,7 +232,7 @@ export default {
             :group="group"
             :stage-name="showStageName ? group.stageName : ''"
             :pipeline-id="pipelineId"
-            :css-class-job-name="$options.jobClasses"
+            :css-class-job-name="jobClasses"
           />
         </div>
       </div>
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index e8c27158c057d8..dcd8f90ab1c91d 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -138,6 +138,14 @@
 
 .gl-downstream-pipeline-job-width {
   width: 8rem;
+
+  .pipeline-graph-container & {
+    width: 100%;
+
+    @media (min-width: $breakpoint-sm) {
+      width: 8rem;
+    }
+  }
 }
 
 .gl-linked-pipeline-padding {
@@ -241,28 +249,63 @@
   }
 }
 
-.stage-column.is-stage-view:not(:last-of-type)::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: $gl-spacing-scale-6;
-  width: 2px;
-  height: $gl-spacing-scale-5 * 2;
-  background-color: $gray-200;
-
-  @media (min-width: $breakpoint-sm) {
-    top: 1.25rem;
-    left: 100%;
-    width: $gl-spacing-scale-5 * 2;
-    height: 2px;
+.pipeline-graph-container {
+  .stage-column.is-stage-view:not(:last-of-type)::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: $gl-spacing-scale-6;
+    width: 2px;
+    height: $gl-spacing-scale-5 * 2;
+    background-color: $gray-200;
+
+    @media (min-width: $breakpoint-sm) {
+      top: 1.25rem;
+      left: 100%;
+      width: $gl-spacing-scale-5 * 2;
+      height: 2px;
+    }
+  }
+
+  .stage-column,
+  .stage-column.is-stage-view {
+    @media (min-width: $breakpoint-sm) {
+      &:first-of-type {
+        margin-left: $gl-spacing-scale-6;
+      }
+    }
   }
-}
 
-.stage-column,
-.stage-column.is-stage-view {
-  @media (min-width: $breakpoint-sm) {
-    &:first-of-type {
-      margin-left: $gl-spacing-scale-6;
+  .linked-pipeline-container[aria-expanded=true] {
+    @media (max-width: $breakpoint-sm) {
+      width: 100%;
+
+      > div {
+        border-bottom-left-radius: 0;
+      }
+
+      > div > button {
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+  }
+
+  .linked-pipelines-column,
+  .pipeline-show-container,
+  .pipeline-links-container {
+    @media (max-width: $breakpoint-sm) {
+      width: 100%;
+    }
+  }
+
+  .pipeline-graph {
+    @media (max-width: $breakpoint-sm) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
   }
+
+  .pipeline-graph .pipeline-graph {
+    background-color: $gray-100;
+  }
 }
diff --git a/config/feature_flags/development/new_pipeline_graph.yml b/config/feature_flags/development/new_pipeline_graph.yml
new file mode 100644
index 00000000000000..d3570980f63a35
--- /dev/null
+++ b/config/feature_flags/development/new_pipeline_graph.yml
@@ -0,0 +1,8 @@
+---
+name: new_pipeline_graph
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/132462
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/426902
+milestone: '16.5'
+type: development
+group: group::ux paper cuts
+default_enabled: false
diff --git a/ee/app/controllers/ee/projects/pipelines_controller.rb b/ee/app/controllers/ee/projects/pipelines_controller.rb
index ee996f4de65b2a..c0c8df82fffebf 100644
--- a/ee/app/controllers/ee/projects/pipelines_controller.rb
+++ b/ee/app/controllers/ee/projects/pipelines_controller.rb
@@ -14,6 +14,7 @@ module PipelinesController
           push_frontend_feature_flag(:pipeline_security_dashboard_graphql, project, type: :development)
           push_frontend_feature_flag(:dora_charts_forecast, project.namespace)
           push_frontend_feature_flag(:use_holt_winters_forecast_for_deployment_frequency, project)
+          push_frontend_feature_flag(:new_pipeline_graph, project, type: :development)
         end
 
         feature_category :software_composition_analysis, [:licenses]
diff --git a/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js b/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js
index a98e79c69fe123..c3f22749978c66 100644
--- a/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js
+++ b/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js
@@ -19,6 +19,10 @@ describe('graph component', () => {
   const findLinksLayer = () => wrapper.findComponent(LinksLayer);
   const findStageColumns = () => wrapper.findAllComponents(StageColumnComponent);
   const findStageNameInJob = () => wrapper.findByTestId('stage-name-in-job');
+  const findPipelineContainer = () => wrapper.findByTestId('pipeline-container');
+  const findRootGraphLayout = () => wrapper.findByTestId('stage-column');
+  const findStageColumnTitle = () => wrapper.findByTestId('stage-column-title');
+  const findJobItem = () => wrapper.findComponent(JobItem);
 
   const defaultProps = {
     pipeline: generateResponse(mockPipelineResponse, 'root/fungi-xoxo'),
@@ -42,6 +46,9 @@ describe('graph component', () => {
     mountFn = shallowMount,
     props = {},
     stubOverride = {},
+    glFeatures = {
+      newPipelineGraph: false,
+    },
   } = {}) => {
     wrapper = mountFn(PipelineGraph, {
       propsData: {
@@ -61,6 +68,9 @@ describe('graph component', () => {
         'job-group-dropdown': true,
         ...stubOverride,
       },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
@@ -112,9 +122,8 @@ describe('graph component', () => {
       });
 
       it('dims unrelated jobs', () => {
-        const unrelatedJob = wrapper.findComponent(JobItem);
         expect(findLinksLayer().emitted().highlightedJobsChange).toHaveLength(1);
-        expect(unrelatedJob.classes('gl-opacity-3')).toBe(true);
+        expect(findJobItem().classes('gl-opacity-3')).toBe(true);
       });
     });
   });
@@ -179,4 +188,82 @@ describe('graph component', () => {
       expect(findDownstreamColumn().props().linkedPipelines).toHaveLength(1);
     });
   });
+
+  describe.each`
+    name          | value    | state
+    ${'disabled'} | ${false} | ${'should not'}
+    ${'enabled'}  | ${true}  | ${'should'}
+  `('With feature flag newPipelineGraph $name', ({ value, state }) => {
+    beforeEach(() => {
+      createComponent({
+        mountFn: mountExtended,
+        stubOverride: { 'job-item': false, StageColumnComponent },
+        glFeatures: {
+          newPipelineGraph: value,
+        },
+        stubs: {
+          StageColumnComponent,
+        },
+      });
+    });
+
+    it(`${state} add class pipeline-graph-container on wrapper`, () => {
+      expect(findPipelineContainer().classes('pipeline-graph-container')).toBe(value);
+    });
+
+    it(`${state} add class is-stage-view on rootGraphLayout`, () => {
+      expect(findRootGraphLayout().classes('is-stage-view')).toBe(value);
+    });
+
+    it(`${state} add titleClasses on stageColumnTitle`, () => {
+      const titleClasses = [
+        'gl-font-weight-bold',
+        'gl-pipeline-job-width',
+        'gl-text-truncate',
+        'gl-line-height-36',
+        'gl-pl-4',
+        'gl-mb-n2',
+      ];
+      const legacyTitleClasses = [
+        'gl-font-weight-bold',
+        'gl-pipeline-job-width',
+        'gl-text-truncate',
+        'gl-line-height-36',
+        'gl-pl-3',
+      ];
+      const checkClasses = value ? titleClasses : legacyTitleClasses;
+
+      expect(findStageColumnTitle().classes()).toEqual(expect.arrayContaining(checkClasses));
+    });
+
+    it(`${state} add jobClasses on findJobItem`, () => {
+      const jobClasses = [
+        'gl-p-3',
+        'gl-border-0',
+        'gl-bg-transparent',
+        'gl-rounded-base',
+        'gl-hover-bg-gray-50',
+        'gl-focus-bg-gray-50',
+        'gl-hover-text-gray-900',
+        'gl-focus-text-gray-900',
+      ];
+      const legacyJobClasses = [
+        'gl-p-3',
+        'gl-border-gray-100',
+        'gl-border-solid',
+        'gl-border-1',
+        'gl-bg-white',
+        'gl-rounded-7',
+        'gl-hover-bg-gray-50',
+        'gl-focus-bg-gray-50',
+        'gl-hover-text-gray-900',
+        'gl-focus-text-gray-900',
+        'gl-hover-border-gray-200',
+        'gl-focus-border-gray-200',
+      ];
+      const checkClasses = value ? jobClasses : legacyJobClasses;
+
+      expect(findJobItem().props('cssClassJobName')).toEqual(expect.arrayContaining(checkClasses));
+    });
+  });
 });
-- 
GitLab