1 files changed, 100 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
new file mode 100644
index 00000000000..007faa4ed0d
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue
@@ -0,0 +1,100 @@
+<script>
+import { GlAlert, GlIcon } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+import { __, s__ } from '~/locale';
+import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import { DEFAULT, INVALID_CI_CONFIG } from '~/pipelines/constants';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
+
+export default {
+  i18n: {
+    viewOnlyMessage: s__('Pipelines|Merged YAML is view only'),
+  },
+  errorTexts: {
+    [INVALID_CI_CONFIG]: __('Your CI configuration file is invalid.'),
+    [DEFAULT]: __('An unknown error occurred.'),
+  },
+  components: {
+    EditorLite,
+    GlAlert,
+    GlIcon,
+  },
+  inject: ['ciConfigPath'],
+  props: {
+    ciConfigData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      failureType: null,
+    };
+  },
+  computed: {
+    failure() {
+      switch (this.failureType) {
+        case INVALID_CI_CONFIG:
+          return this.$options.errorTexts[INVALID_CI_CONFIG];
+        default:
+          return this.$options.errorTexts[DEFAULT];
+      }
+    },
+    fileGlobalId() {
+      return `${this.ciConfigPath}-${uniqueId()}`;
+    },
+    hasError() {
+      return this.failureType;
+    },
+    isInvalidConfiguration() {
+      return this.ciConfigData.status === CI_CONFIG_STATUS_INVALID;
+    },
+    mergedYaml() {
+      return this.ciConfigData.mergedYaml;
+    },
+  },
+  watch: {
+    ciConfigData: {
+      immediate: true,
+      handler() {
+        if (this.isInvalidConfiguration) {
+          this.reportFailure(INVALID_CI_CONFIG);
+        } else if (this.hasError) {
+          this.resetFailure();
+        }
+      },
+    },
+  },
+  methods: {
+    reportFailure(errorType) {
+      this.failureType = errorType;
+    },
+    resetFailure() {
+      this.failureType = null;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="hasError" variant="danger" :dismissible="false">
+      {{ failure }}
+    </gl-alert>
+    <div v-else>
+      <div class="gl-display-flex gl-align-items-center">
+        <gl-icon :size="18" name="lock" class="gl-text-gray-500 gl-mr-3" />
+        {{ $options.i18n.viewOnlyMessage }}
+      </div>
+      <div class="gl-mt-3 gl-border-solid gl-border-gray-100 gl-border-1">
+        <editor-lite
+          ref="editor"
+          :value="mergedYaml"
+          :file-name="ciConfigPath"
+          :file-global-id="fileGlobalId"
+          :editor-options="{ readOnly: true }"
+          v-on="$listeners"
+        />
+      </div>
+    </div>
+  </div>
+</template>