Add latest changes from gitlab-org/gitlab@16-6-stable-eev16.6.0-rc42

1 files changed, 34 insertions, 8 deletions

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 bcd7705669e..7c07591d0de 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,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,
@@ -12,18 +19,37 @@ export default {
       default: '',
     },
   },
+  computed: {
+    isNewPipelineGraph() {
+      return this.glFeatures.newPipelineGraph;
+    },
+  },
 };
 </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
+      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-pt-2 gl-pb-0 gl-px-2"
     >
-      <slot name="jobs"> </slot>
-    </div>
+      <template #header>
+        <slot name="stages"></slot>
+      </template>
+
+      <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>