diff options
Diffstat (limited to 'app/assets/javascripts/ci/ci_lint/components/ci_lint.vue')
-rw-r--r-- | app/assets/javascripts/ci/ci_lint/components/ci_lint.vue | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue b/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue new file mode 100644 index 00000000000..49a314e067c --- /dev/null +++ b/app/assets/javascripts/ci/ci_lint/components/ci_lint.vue @@ -0,0 +1,131 @@ +<script> +import { GlButton, GlFormCheckbox, GlIcon, GlLink, GlAlert } from '@gitlab/ui'; +import CiLintResults from '~/ci/pipeline_editor/components/lint/ci_lint_results.vue'; +import lintCiMutation from '~/ci/pipeline_editor/graphql/mutations/client/lint_ci.mutation.graphql'; +import SourceEditor from '~/vue_shared/components/source_editor.vue'; + +export default { + components: { + GlButton, + GlFormCheckbox, + GlIcon, + GlLink, + GlAlert, + CiLintResults, + SourceEditor, + }, + props: { + endpoint: { + type: String, + required: true, + }, + lintHelpPagePath: { + type: String, + required: true, + }, + pipelineSimulationHelpPagePath: { + type: String, + required: true, + }, + }, + data() { + return { + content: '', + loading: false, + isValid: false, + errors: null, + warnings: null, + jobs: [], + dryRun: false, + showingResults: false, + apiError: null, + isErrorDismissed: false, + }; + }, + computed: { + shouldShowError() { + return this.apiError && !this.isErrorDismissed; + }, + }, + methods: { + async lint() { + this.loading = true; + try { + const { + data: { + lintCI: { valid, errors, warnings, jobs }, + }, + } = await this.$apollo.mutate({ + mutation: lintCiMutation, + variables: { endpoint: this.endpoint, content: this.content, dry: this.dryRun }, + }); + + this.showingResults = true; + this.isValid = valid; + this.errors = errors; + this.warnings = warnings; + this.jobs = jobs; + } catch (error) { + this.apiError = error; + this.isErrorDismissed = false; + } finally { + this.loading = false; + } + }, + clear() { + this.content = ''; + }, + }, +}; +</script> + +<template> + <div class="row"> + <div class="col-sm-12"> + <gl-alert + v-if="shouldShowError" + class="gl-mb-3" + variant="danger" + @dismiss="isErrorDismissed = true" + >{{ apiError }}</gl-alert + > + <div class="file-holder gl-mb-3"> + <div class="js-file-title file-title clearfix"> + {{ __('Contents of .gitlab-ci.yml') }} + </div> + <source-editor v-model="content" file-name="*.yml" /> + </div> + </div> + + <div class="col-sm-12 gl-display-flex gl-justify-content-space-between"> + <div class="gl-display-flex gl-align-items-center"> + <gl-button + class="gl-mr-4" + :loading="loading" + category="primary" + variant="confirm" + data-testid="ci-lint-validate" + @click="lint" + >{{ __('Validate') }}</gl-button + > + <gl-form-checkbox v-model="dryRun" + >{{ __('Simulate a pipeline created for the default branch') }} + <gl-link :href="pipelineSimulationHelpPagePath" target="_blank" + ><gl-icon class="gl-text-blue-600" name="question-o" /></gl-link + ></gl-form-checkbox> + </div> + <gl-button data-testid="ci-lint-clear" @click="clear">{{ __('Clear') }}</gl-button> + </div> + + <ci-lint-results + v-if="showingResults" + class="col-sm-12 gl-mt-5" + :is-valid="isValid" + :jobs="jobs" + :errors="errors" + :warnings="warnings" + :dry-run="dryRun" + :lint-help-page-path="lintHelpPagePath" + /> + </div> +</template> |