diff options
Diffstat (limited to 'app/assets/javascripts/ci_lint')
-rw-r--r-- | app/assets/javascripts/ci_lint/components/ci_lint.vue | 14 | ||||
-rw-r--r-- | app/assets/javascripts/ci_lint/components/ci_lint_results.vue | 37 | ||||
-rw-r--r-- | app/assets/javascripts/ci_lint/graphql/resolvers.js | 34 | ||||
-rw-r--r-- | app/assets/javascripts/ci_lint/index.js | 37 |
4 files changed, 82 insertions, 40 deletions
diff --git a/app/assets/javascripts/ci_lint/components/ci_lint.vue b/app/assets/javascripts/ci_lint/components/ci_lint.vue index 2532f4b86d2..def45026b35 100644 --- a/app/assets/javascripts/ci_lint/components/ci_lint.vue +++ b/app/assets/javascripts/ci_lint/components/ci_lint.vue @@ -19,7 +19,11 @@ export default { type: String, required: true, }, - helpPagePath: { + lintHelpPagePath: { + type: String, + required: true, + }, + pipelineSimulationHelpPagePath: { type: String, required: true, }, @@ -27,6 +31,7 @@ export default { data() { return { content: '', + loading: false, valid: false, errors: null, warnings: null, @@ -44,6 +49,7 @@ export default { }, methods: { async lint() { + this.loading = true; try { const { data: { @@ -62,6 +68,8 @@ export default { } catch (error) { this.apiError = error; this.isErrorDismissed = false; + } finally { + this.loading = false; } }, clear() { @@ -93,6 +101,7 @@ export default { <div class="gl-display-flex gl-align-items-center"> <gl-button class="gl-mr-4" + :loading="loading" category="primary" variant="success" data-testid="ci-lint-validate" @@ -101,7 +110,7 @@ export default { > <gl-form-checkbox v-model="dryRun" >{{ __('Simulate a pipeline created for the default branch') }} - <gl-link :href="helpPagePath" target="_blank" + <gl-link :href="pipelineSimulationHelpPagePath" target="_blank" ><gl-icon class="gl-text-blue-600" name="question-o"/></gl-link ></gl-form-checkbox> </div> @@ -115,6 +124,7 @@ export default { :errors="errors" :warnings="warnings" :dry-run="dryRun" + :lint-help-page-path="lintHelpPagePath" /> </div> </template> diff --git a/app/assets/javascripts/ci_lint/components/ci_lint_results.vue b/app/assets/javascripts/ci_lint/components/ci_lint_results.vue index 28b2a028b29..8b37c94de19 100644 --- a/app/assets/javascripts/ci_lint/components/ci_lint_results.vue +++ b/app/assets/javascripts/ci_lint/components/ci_lint_results.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlTable } from '@gitlab/ui'; +import { GlAlert, GlLink, GlSprintf, GlTable } from '@gitlab/ui'; import CiLintWarnings from './ci_lint_warnings.vue'; import CiLintResultsValue from './ci_lint_results_value.vue'; import CiLintResultsParam from './ci_lint_results_param.vue'; @@ -8,8 +8,17 @@ import { __ } from '~/locale'; const thBorderColor = 'gl-border-gray-100!'; export default { - correct: { variant: 'success', text: __('syntax is correct') }, - incorrect: { variant: 'danger', text: __('syntax is incorrect') }, + correct: { + variant: 'success', + text: __('syntax is correct.'), + }, + incorrect: { + variant: 'danger', + text: __('syntax is incorrect.'), + }, + includesText: __( + 'CI configuration validated, including all configuration added with the %{codeStart}includes%{codeEnd} keyword. %{link}', + ), warningTitle: __('The form contains the following warning:'), fields: [ { @@ -25,6 +34,8 @@ export default { ], components: { GlAlert, + GlLink, + GlSprintf, GlTable, CiLintWarnings, CiLintResultsValue, @@ -51,6 +62,10 @@ export default { type: Boolean, required: true, }, + lintHelpPagePath: { + type: String, + required: true, + }, }, data() { return { @@ -82,8 +97,20 @@ export default { :title="__('Status:')" :dismissible="false" data-testid="ci-lint-status" - >{{ status.text }}</gl-alert - > + >{{ status.text }} + <gl-sprintf :message="$options.includesText"> + <template #code="{content}"> + <code> + {{ content }} + </code> + </template> + <template #link> + <gl-link :href="lintHelpPagePath" target="_blank"> + {{ __('More information') }} + </gl-link> + </template> + </gl-sprintf> + </gl-alert> <pre v-if="shouldShowError" diff --git a/app/assets/javascripts/ci_lint/graphql/resolvers.js b/app/assets/javascripts/ci_lint/graphql/resolvers.js new file mode 100644 index 00000000000..126b4c664b2 --- /dev/null +++ b/app/assets/javascripts/ci_lint/graphql/resolvers.js @@ -0,0 +1,34 @@ +import axios from '~/lib/utils/axios_utils'; + +const resolvers = { + Mutation: { + lintCI: (_, { endpoint, content, dry_run }) => { + return axios.post(endpoint, { content, dry_run }).then(({ data }) => ({ + valid: data.valid, + errors: data.errors, + warnings: data.warnings, + jobs: data.jobs.map(job => { + const only = job.only ? { refs: job.only.refs, __typename: 'CiLintJobOnlyPolicy' } : null; + + return { + name: job.name, + stage: job.stage, + beforeScript: job.before_script, + script: job.script, + afterScript: job.after_script, + tagList: job.tag_list, + environment: job.environment, + when: job.when, + allowFailure: job.allow_failure, + only, + except: job.except, + __typename: 'CiLintJob', + }; + }), + __typename: 'CiLintContent', + })); + }, + }, +}; + +export default resolvers; diff --git a/app/assets/javascripts/ci_lint/index.js b/app/assets/javascripts/ci_lint/index.js index c41e6d47d75..e4cda4cb369 100644 --- a/app/assets/javascripts/ci_lint/index.js +++ b/app/assets/javascripts/ci_lint/index.js @@ -1,48 +1,18 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import axios from '~/lib/utils/axios_utils'; import createDefaultClient from '~/lib/graphql'; import CiLint from './components/ci_lint.vue'; +import resolvers from './graphql/resolvers'; Vue.use(VueApollo); -const resolvers = { - Mutation: { - lintCI: (_, { endpoint, content, dry_run }) => { - return axios.post(endpoint, { content, dry_run }).then(({ data }) => ({ - valid: data.valid, - errors: data.errors, - warnings: data.warnings, - jobs: data.jobs.map(job => ({ - name: job.name, - stage: job.stage, - beforeScript: job.before_script, - script: job.script, - afterScript: job.after_script, - tagList: job.tag_list, - environment: job.environment, - when: job.when, - allowFailure: job.allow_failure, - only: { - refs: job.only.refs, - __typename: 'CiLintJobOnlyPolicy', - }, - except: job.except, - __typename: 'CiLintJob', - })), - __typename: 'CiLintContent', - })); - }, - }, -}; - const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(resolvers), }); export default (containerId = '#js-ci-lint') => { const containerEl = document.querySelector(containerId); - const { endpoint, helpPagePath } = containerEl.dataset; + const { endpoint, lintHelpPagePath, pipelineSimulationHelpPagePath } = containerEl.dataset; return new Vue({ el: containerEl, @@ -51,7 +21,8 @@ export default (containerId = '#js-ci-lint') => { return createElement(CiLint, { props: { endpoint, - helpPagePath, + lintHelpPagePath, + pipelineSimulationHelpPagePath, }, }); }, |