1 files changed, 44 insertions, 3 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
index ab41c0170e9..7a35e31e9ce 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
@@ -1,13 +1,40 @@
 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import PipelineStatus from './pipeline_status.vue';
 import ValidationSegment from './validation_segment.vue';
 
+const baseClasses = ['gl-p-5', 'gl-bg-gray-10', 'gl-border-solid', 'gl-border-gray-100'];
+
+const pipelineStatusClasses = [
+  ...baseClasses,
+  'gl-border-1',
+  'gl-border-b-0!',
+  'gl-rounded-top-base',
+];
+
+const validationSegmentClasses = [...baseClasses, 'gl-border-1', 'gl-rounded-base'];
+
+const validationSegmentWithPipelineStatusClasses = [
+  ...baseClasses,
+  'gl-border-1',
+  'gl-rounded-bottom-left-base',
+  'gl-rounded-bottom-right-base',
+];
+
 export default {
-  validationSegmentClasses:
-    'gl-p-5 gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base',
+  pipelineStatusClasses,
+  validationSegmentClasses,
+  validationSegmentWithPipelineStatusClasses,
   components: {
+    PipelineStatus,
     ValidationSegment,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
+    ciFileContent: {
+      type: String,
+      required: true,
+    },
     ciConfigData: {
       type: Object,
       required: true,
@@ -17,13 +44,27 @@ export default {
       required: true,
     },
   },
+  computed: {
+    showPipelineStatus() {
+      return this.glFeatures.pipelineStatusForPipelineEditor;
+    },
+    // make sure corners are rounded correctly depending on if
+    // pipeline status is rendered
+    validationStyling() {
+      return this.showPipelineStatus
+        ? this.$options.validationSegmentWithPipelineStatusClasses
+        : this.$options.validationSegmentClasses;
+    },
+  },
 };
 </script>
 <template>
   <div class="gl-mb-5">
+    <pipeline-status v-if="showPipelineStatus" :class="$options.pipelineStatusClasses" />
     <validation-segment
-      :class="$options.validationSegmentClasses"
+      :class="validationStyling"
       :loading="isCiConfigDataLoading"
+      :ci-file-content="ciFileContent"
       :ci-config="ciConfigData"
     />
   </div>