diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-07 00:10:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-07 00:10:18 +0300 |
commit | 096c38a822bc60f9e0ff9a5266d5bae95f187cc3 (patch) | |
tree | eec39bb52267105e38ee8f5266aca41148c1e3af /app/assets/javascripts/pipeline_editor | |
parent | 653048c5eeb8351344155d5e03a7d5a6138ba6ec (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
3 files changed, 96 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/info/validation_segment.vue b/app/assets/javascripts/pipeline_editor/components/info/validation_segment.vue new file mode 100644 index 00000000000..22f378c571a --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/info/validation_segment.vue @@ -0,0 +1,84 @@ +<script> +import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { __, s__, sprintf } from '~/locale'; +import { CI_CONFIG_STATUS_VALID } from '../../constants'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; + +export const i18n = { + learnMore: __('Learn more'), + loading: s__('Pipelines|Validating GitLab CI configuration…'), + invalid: s__('Pipelines|This GitLab CI configuration is invalid.'), + invalidWithReason: s__('Pipelines|This GitLab CI configuration is invalid: %{reason}.'), + valid: s__('Pipelines|This GitLab CI configuration is valid.'), +}; + +export default { + i18n, + components: { + GlIcon, + GlLink, + GlLoadingIcon, + TooltipOnTruncate, + }, + inject: { + ymlHelpPagePath: { + default: '', + }, + }, + props: { + ciConfig: { + type: Object, + required: false, + default: () => ({}), + }, + loading: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + isValid() { + return this.ciConfig?.status === CI_CONFIG_STATUS_VALID; + }, + icon() { + if (this.isValid) { + return 'check'; + } + return 'warning-solid'; + }, + message() { + if (this.isValid) { + return this.$options.i18n.valid; + } + + // Only display first error as a reason + const [reason] = this.ciConfig?.errors || []; + if (reason) { + return sprintf(this.$options.i18n.invalidWithReason, { reason }, false); + } + return this.$options.i18n.invalid; + }, + }, +}; +</script> + +<template> + <div> + <template v-if="loading"> + <gl-loading-icon inline /> + {{ $options.i18n.loading }} + </template> + + <span v-else class="gl-display-inline-flex gl-white-space-nowrap gl-max-w-full"> + <tooltip-on-truncate :title="message" class="gl-text-truncate"> + <gl-icon :name="icon" /> <span data-testid="validationMsg">{{ message }}</span> + </tooltip-on-truncate> + <span class="gl-flex-shrink-0 gl-pl-2"> + <gl-link data-testid="learnMoreLink" :href="ymlHelpPagePath"> + {{ $options.i18n.learnMore }} + </gl-link> + </span> + </span> + </div> +</template> diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index 1ce6af95195..df093be9b92 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -21,6 +21,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { newMergeRequestPath, lintHelpPagePath, projectPath, + ymlHelpPagePath, } = el?.dataset; Vue.use(VueApollo); @@ -34,6 +35,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { apolloProvider, provide: { lintHelpPagePath, + ymlHelpPagePath, }, render(h) { return h(PipelineEditorApp, { diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index c1414a861db..87327a46f17 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -9,6 +9,7 @@ import CiLint from './components/lint/ci_lint.vue'; import CommitForm from './components/commit/commit_form.vue'; import EditorTab from './components/ui/editor_tab.vue'; import TextEditor from './components/text_editor.vue'; +import ValidationSegment from './components/info/validation_segment.vue'; import commitCiFileMutation from './graphql/mutations/commit_ci_file.mutation.graphql'; import getBlobContent from './graphql/queries/blob_content.graphql'; @@ -35,6 +36,7 @@ export default { GlTabs, PipelineGraph, TextEditor, + ValidationSegment, }, mixins: [glFeatureFlagsMixin()], props: { @@ -302,6 +304,14 @@ export default { <div class="gl-mt-4"> <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" /> <div v-else class="file-editor gl-mb-3"> + <div class="info-well gl-display-none gl-display-sm-block"> + <validation-segment + class="well-segment" + :loading="isCiConfigDataLoading" + :ci-config="ciConfigData" + /> + </div> + <gl-tabs> <editor-tab :lazy="true" :title="$options.i18n.tabEdit"> <text-editor |