Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

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,
         },
       });
     },