diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/editor')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue | 100 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue | 52 |
2 files changed, 152 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> diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue new file mode 100644 index 00000000000..872da88d3e6 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue @@ -0,0 +1,52 @@ +<script> +import { EDITOR_READY_EVENT } from '~/editor/constants'; +import { CiSchemaExtension } from '~/editor/extensions/editor_ci_schema_ext'; +import EditorLite from '~/vue_shared/components/editor_lite.vue'; +import getCommitSha from '../../graphql/queries/client/commit_sha.graphql'; + +export default { + components: { + EditorLite, + }, + inject: ['ciConfigPath', 'projectPath', 'projectNamespace'], + inheritAttrs: false, + data() { + return { + commitSha: '', + }; + }, + apollo: { + commitSha: { + query: getCommitSha, + }, + }, + methods: { + onCiConfigUpdate(content) { + this.$emit('updateCiConfig', content); + }, + registerCiSchema() { + const editorInstance = this.$refs.editor.getEditor(); + + editorInstance.use(new CiSchemaExtension()); + editorInstance.registerCiSchema({ + projectPath: this.projectPath, + projectNamespace: this.projectNamespace, + ref: this.commitSha, + }); + }, + }, + readyEvent: EDITOR_READY_EVENT, +}; +</script> +<template> + <div class="gl-border-solid gl-border-gray-100 gl-border-1"> + <editor-lite + ref="editor" + :file-name="ciConfigPath" + v-bind="$attrs" + @[$options.readyEvent]="registerCiSchema" + @input="onCiConfigUpdate" + v-on="$listeners" + /> + </div> +</template> |