Update linting message to exlain it lint includes too

When a user lint the content of their gitlab-ci.yml,
we now tell them explicitly that we are also linting
their includes listed in the file and adding a link
to the documentation where we explain that.

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,
     },
@@ -106,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>
@@ -120,6 +124,7 @@ export default {
       :errors="errors"
       :warnings="warnings"
       :dry-run="dryRun"
+      :lint-help-page-path="lintHelpPagePath"
     />
   </div>
 </template>

app/assets/javascripts/ci_lint/components/ci_lint_results.vue

 <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"

app/assets/javascripts/ci_lint/index.js

@@ -12,7 +12,7 @@ const apolloProvider = new VueApollo({
 
 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,
@@ -21,7 +21,8 @@ export default (containerId = '#js-ci-lint') => {
       return createElement(CiLint, {
         props: {
           endpoint,
-          helpPagePath,
+          lintHelpPagePath,
+          pipelineSimulationHelpPagePath,
         },
       });
     },

app/views/projects/ci/lints/show.html.haml

@@ -3,4 +3,4 @@
 
 %h2.pt-3.pb-3= _("Validate your GitLab CI configuration")
 
-#js-ci-lint{ data: { endpoint: project_ci_lint_path(@project), help_page_path: help_page_path('ci/lint', anchor: 'pipeline-simulation') } }
+#js-ci-lint{ data: { endpoint: project_ci_lint_path(@project), pipeline_simulation_help_page_path: help_page_path('ci/lint', anchor: 'pipeline-simulation') , lint_help_page_path: help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax') } }

changelogs/unreleased/273434-add-message-in-ci-linter-that-it-was-validated-with-all-the-includ.yml

+---
+title: Add message in CI linter that it was validated with all the includes
+merge_request: 46713
+author:
+type: changed

doc/ci/lint.md

@@ -17,7 +17,8 @@ in your project and click **CI lint**.
 ## Validate basic logic and syntax
 
 By default, the CI lint checks the syntax of your CI YAML configuration and also runs
-some basic logical validations.
+some basic logical validations. Configuration added with the [`includes` keyword](yaml/README.md#include),
+is also validated.
 
 To use the CI lint, paste a complete CI configuration (`.gitlab-ci.yml` for example)
 into the text box and click **Validate**:

locale/gitlab.pot

@@ -4720,6 +4720,9 @@ msgstr ""
 msgid "CI Lint"
 msgstr ""
 
+msgid "CI configuration validated, including all configuration added with the %{codeStart}includes%{codeEnd} keyword. %{link}"
+msgstr ""
+
 msgid "CI settings"
 msgstr ""
 
@@ -32782,10 +32785,10 @@ msgstr ""
 msgid "suggestPipeline|We’re adding a GitLab CI configuration file to add a pipeline to the project. You could create it manually, but we recommend that you start with a GitLab template that works out of the box."
 msgstr ""
 
-msgid "syntax is correct"
+msgid "syntax is correct."
 msgstr ""
 
-msgid "syntax is incorrect"
+msgid "syntax is incorrect."
 msgstr ""
 
 msgid "tag name"

spec/frontend/ci_lint/components/ci_lint_results_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import { GlTable } from '@gitlab/ui';
+import { GlTable, GlLink } from '@gitlab/ui';
 import CiLintResults from '~/ci_lint/components/ci_lint_results.vue';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { mockJobs, mockErrors, mockWarnings } from '../mock_data';
 
 describe('CI Lint Results', () => {
   let wrapper;
+  const defaultProps = {
+    valid: true,
+    jobs: mockJobs,
+    errors: [],
+    warnings: [],
+    dryRun: false,
+    lintHelpPagePath: '/help',
+  };
 
   const createComponent = (props = {}, mountFn = shallowMount) => {
     wrapper = mountFn(CiLintResults, {
       propsData: {
-        valid: true,
-        jobs: mockJobs,
-        errors: [],
-        warnings: [],
-        dryRun: false,
+        ...defaultProps,
         ...props,
       },
     });
@@ -23,6 +27,7 @@ describe('CI Lint Results', () => {
   const findTable = () => wrapper.find(GlTable);
   const findByTestId = selector => () => wrapper.find(`[data-testid="ci-lint-${selector}"]`);
   const findAllByTestId = selector => () => wrapper.findAll(`[data-testid="ci-lint-${selector}"]`);
+  const findLinkToDoc = () => wrapper.find(GlLink);
   const findErrors = findByTestId('errors');
   const findWarnings = findByTestId('warnings');
   const findStatus = findByTestId('status');
@@ -48,10 +53,15 @@ describe('CI Lint Results', () => {
     });
 
     it('displays the invalid status', () => {
-      expect(findStatus().text()).toBe(`Status: ${wrapper.vm.$options.incorrect.text}`);
+      expect(findStatus().text()).toContain(`Status: ${wrapper.vm.$options.incorrect.text}`);
       expect(findStatus().props('variant')).toBe(wrapper.vm.$options.incorrect.variant);
     });
 
+    it('contains the link to documentation', () => {
+      expect(findLinkToDoc().text()).toBe('More information');
+      expect(findLinkToDoc().attributes('href')).toBe(defaultProps.lintHelpPagePath);
+    });
+
     it('displays the error message', () => {
       const [expectedError] = mockErrors;
 
@@ -66,9 +76,9 @@ describe('CI Lint Results', () => {
     });
   });
 
-  describe('Valid results', () => {
+  describe('Valid results with dry run', () => {
     beforeEach(() => {
-      createComponent();
+      createComponent({ dryRun: true }, mount);
     });
 
     it('displays table', () => {
@@ -76,13 +86,18 @@ describe('CI Lint Results', () => {
     });
 
     it('displays the valid status', () => {
-      expect(findStatus().text()).toBe(wrapper.vm.$options.correct.text);
+      expect(findStatus().text()).toContain(wrapper.vm.$options.correct.text);
       expect(findStatus().props('variant')).toBe(wrapper.vm.$options.correct.variant);
     });
 
     it('does not display only/expect values with dry run', () => {
       expect(findOnlyExcept().exists()).toBe(false);
     });
+
+    it('contains the link to documentation', () => {
+      expect(findLinkToDoc().text()).toBe('More information');
+      expect(findLinkToDoc().attributes('href')).toBe(defaultProps.lintHelpPagePath);
+    });
   });
 
   describe('Lint results', () => {

spec/frontend/ci_lint/components/ci_lint_spec.js

@@ -24,7 +24,8 @@ describe('CI Lint', () => {
       },
       propsData: {
         endpoint,
-        helpPagePath: '/help/ci/lint#pipeline-simulation',
+        pipelineSimulationHelpPagePath: '/help/ci/lint#pipeline-simulation',
+        lintHelpPagePath: '/help/ci/lint#anchor',
       },
       mocks: {
         $apollo: {