1 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
new file mode 100644
index 00000000000..ec6ee52b6b2
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
@@ -0,0 +1,70 @@
+<script>
+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 {
+  pipelineStatusClasses,
+  validationSegmentClasses,
+  validationSegmentWithPipelineStatusClasses,
+  components: {
+    PipelineStatus,
+    ValidationSegment,
+  },
+  props: {
+    ciConfigData: {
+      type: Object,
+      required: true,
+    },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isNewCiConfigFile: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    showPipelineStatus() {
+      return !this.isNewCiConfigFile;
+    },
+    // 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"
+      :commit-sha="commitSha"
+      :class="$options.pipelineStatusClasses"
+      v-on="$listeners"
+    />
+    <validation-segment :class="validationStyling" :ci-config="ciConfigData" />
+  </div>
+</template>