Merge branch '263147-move-ci-lint-directory' into 'master'

Move lint components to pipeline editor

See merge request gitlab-org/gitlab!48150

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

 <script>
 import { GlButton, GlFormCheckbox, GlIcon, GlLink, GlAlert } from '@gitlab/ui';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
-import CiLintResults from './ci_lint_results.vue';
-import lintCIMutation from '../graphql/mutations/lint_ci.mutation.graphql';
+import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
+import lintCiMutation from '~/pipeline_editor/graphql/mutations/lint_ci.mutation.graphql';
 
 export default {
   components: {
@@ -56,7 +56,7 @@ export default {
             lintCI: { valid, errors, warnings, jobs },
           },
         } = await this.$apollo.mutate({
-          mutation: lintCIMutation,
+          mutation: lintCiMutation,
           variables: { endpoint: this.endpoint, content: this.content, dry: this.dryRun },
         });
 
@@ -119,6 +119,7 @@ export default {
 
     <ci-lint-results
       v-if="showingResults"
+      class="col-sm-12 gl-mt-5"
       :valid="valid"
       :jobs="jobs"
       :errors="errors"

app/assets/javascripts/ci_lint/graphql/resolvers.js

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

app/assets/javascripts/ci_lint/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { resolvers } from '~/pipeline_editor/graphql/resolvers';
+
 import CiLint from './components/ci_lint.vue';
-import resolvers from './graphql/resolvers';
 
 Vue.use(VueApollo);
 

app/assets/javascripts/ci_lint/components/ci_lint_results.vue → app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue

@@ -90,7 +90,7 @@ export default {
 </script>
 
 <template>
-  <div class="col-sm-12 gl-mt-5">
+  <div>
     <gl-alert
       class="gl-mb-5"
       :variant="status.variant"

app/assets/javascripts/pipeline_editor/graphql/resolvers.js

 import Api from '~/api';
+import axios from '~/lib/utils/axios_utils';
 
 export const resolvers = {
   Query: {
@@ -11,6 +12,32 @@ export 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;
 
-export default resolvers;
+          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',
+      }));
+    },
+  },
+};

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -6,8 +6,8 @@ import { redirectTo, mergeUrlParams, refreshCurrentPage } from '~/lib/utils/url_
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import CommitForm from './components/commit/commit_form.vue';
 import TextEditor from './components/text_editor.vue';
-import commitCiFileMutation from './graphql/mutations/commit_ci_file.mutation.graphql';
 
+import commitCiFileMutation from './graphql/mutations/commit_ci_file.mutation.graphql';
 import getBlobContent from './graphql/queries/blob_content.graphql';
 
 const MR_SOURCE_BRANCH = 'merge_request[source_branch]';

spec/frontend/ci_lint/components/ci_lint_spec.js

@@ -3,8 +3,8 @@ import { shallowMount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
 import CiLint from '~/ci_lint/components/ci_lint.vue';
-import CiLintResults from '~/ci_lint/components/ci_lint_results.vue';
-import lintCIMutation from '~/ci_lint/graphql/mutations/lint_ci.mutation.graphql';
+import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
+import lintCIMutation from '~/pipeline_editor/graphql/mutations/lint_ci.mutation.graphql';
 import { mockLintDataValid } from '../mock_data';
 
 describe('CI Lint', () => {

spec/frontend/ci_lint/graphql/resolvers_spec.js

-import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import httpStatus from '~/lib/utils/http_status';
-
-import resolvers from '~/ci_lint/graphql/resolvers';
-import { mockLintResponse } from '../mock_data';
-
-describe('~/ci_lint/graphql/resolvers', () => {
-  let mock;
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    mock.restore();
-  });
-
-  describe('Mutation', () => {
-    describe('lintCI', () => {
-      const endpoint = '/ci/lint';
-
-      beforeEach(() => {
-        mock.onPost(endpoint).reply(httpStatus.OK, mockLintResponse);
-      });
-
-      it('resolves lint data with type names', async () => {
-        const result = resolvers.Mutation.lintCI(null, {
-          endpoint,
-          content: 'content',
-          dry_run: true,
-        });
-
-        await expect(result).resolves.toMatchSnapshot();
-      });
-    });
-  });
-});

spec/frontend/ci_lint/mock_data.js

-export const mockLintResponse = {
-  valid: true,
-  errors: [],
-  warnings: [],
-  jobs: [
-    {
-      name: 'job_1',
-      stage: 'test',
-      before_script: ["echo 'before script 1'"],
-      script: ["echo 'script 1'"],
-      after_script: ["echo 'after script 1"],
-      tag_list: ['tag 1'],
-      environment: 'prd',
-      when: 'on_success',
-      allow_failure: false,
-      only: null,
-      except: { refs: ['master@gitlab-org/gitlab', '/^release/.*$/@gitlab-org/gitlab'] },
-    },
-    {
-      name: 'job_2',
-      stage: 'test',
-      before_script: ["echo 'before script 2'"],
-      script: ["echo 'script 2'"],
-      after_script: ["echo 'after script 2"],
-      tag_list: ['tag 2'],
-      environment: 'stg',
-      when: 'on_success',
-      allow_failure: true,
-      only: { refs: ['web', 'chat', 'pushes'] },
-      except: { refs: ['master@gitlab-org/gitlab', '/^release/.*$/@gitlab-org/gitlab'] },
-    },
-  ],
-};
-
-export const mockJobs = [
-  {
-    name: 'job_1',
-    stage: 'build',
-    beforeScript: [],
-    script: ["echo 'Building'"],
-    afterScript: [],
-    tagList: [],
-    environment: null,
-    when: 'on_success',
-    allowFailure: true,
-    only: { refs: ['web', 'chat', 'pushes'] },
-    except: null,
-  },
-  {
-    name: 'multi_project_job',
-    stage: 'test',
-    beforeScript: [],
-    script: [],
-    afterScript: [],
-    tagList: [],
-    environment: null,
-    when: 'on_success',
-    allowFailure: false,
-    only: { refs: ['branches', 'tags'] },
-    except: null,
-  },
-  {
-    name: 'job_2',
-    stage: 'test',
-    beforeScript: ["echo 'before script'"],
-    script: ["echo 'script'"],
-    afterScript: ["echo 'after script"],
-    tagList: [],
-    environment: null,
-    when: 'on_success',
-    allowFailure: false,
-    only: { refs: ['branches@gitlab-org/gitlab'] },
-    except: { refs: ['master@gitlab-org/gitlab', '/^release/.*$/@gitlab-org/gitlab'] },
-  },
-];
-
-export const mockErrors = [
-  '"job_1 job: chosen stage does not exist; available stages are .pre, build, test, deploy, .post"',
-];
-
-export const mockWarnings = [
-  '"jobs:multi_project_job may allow multiple pipelines to run for a single action due to `rules:when` clause with no `workflow:rules` - read more: https://docs.gitlab.com/ee/ci/troubleshooting.html#pipeline-warnings"',
-];
+import { mockJobs } from 'jest/pipeline_editor/mock_data';
 
 export const mockLintDataValid = {
   data: {

spec/frontend/ci_lint/components/ci_lint_results_spec.js → spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import { GlTable, GlLink } from '@gitlab/ui';
-import CiLintResults from '~/ci_lint/components/ci_lint_results.vue';
+import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-import { mockJobs, mockErrors, mockWarnings } from '../mock_data';
+import { mockJobs, mockErrors, mockWarnings } from '../../mock_data';
 
 describe('CI Lint Results', () => {
   let wrapper;

spec/frontend/ci_lint/components/ci_lint_warnings_spec.js → spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js

 import { mount } from '@vue/test-utils';
 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
-import CiLintWarnings from '~/ci_lint/components/ci_lint_warnings.vue';
+import CiLintWarnings from '~/pipeline_editor/components/lint/ci_lint_warnings.vue';
 
 const warnings = ['warning 1', 'warning 2', 'warning 3'];
 

spec/frontend/ci_lint/graphql/__snapshots__/resolvers_spec.js.snap → spec/frontend/pipeline_editor/graphql/__snapshots__/resolvers_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`~/ci_lint/graphql/resolvers Mutation lintCI resolves lint data with type names 1`] = `
+exports[`~/pipeline_editor/graphql/resolvers Mutation lintCI lint data is as expected 1`] = `
 Object {
   "__typename": "CiLintContent",
   "errors": Array [],

spec/frontend/pipeline_editor/graphql/resolvers_spec.js

+import MockAdapter from 'axios-mock-adapter';
 import Api from '~/api';
-import { mockProjectPath, mockDefaultBranch, mockCiConfigPath, mockCiYml } from '../mock_data';
-
+import {
+  mockCiConfigPath,
+  mockCiYml,
+  mockDefaultBranch,
+  mockLintResponse,
+  mockProjectPath,
+} from '../mock_data';
+import httpStatus from '~/lib/utils/http_status';
+import axios from '~/lib/utils/axios_utils';
 import { resolvers } from '~/pipeline_editor/graphql/resolvers';
 
 jest.mock('~/api', () => {
@@ -39,4 +47,43 @@ describe('~/pipeline_editor/graphql/resolvers', () => {
       });
     });
   });
+
+  describe('Mutation', () => {
+    describe('lintCI', () => {
+      let mock;
+      let result;
+
+      const endpoint = '/ci/lint';
+
+      beforeEach(async () => {
+        mock = new MockAdapter(axios);
+        mock.onPost(endpoint).reply(httpStatus.OK, mockLintResponse);
+
+        result = await resolvers.Mutation.lintCI(null, {
+          endpoint,
+          content: 'content',
+          dry_run: true,
+        });
+      });
+
+      afterEach(() => {
+        mock.restore();
+      });
+
+      /* eslint-disable no-underscore-dangle */
+      it('lint data has correct type names', async () => {
+        expect(result.__typename).toBe('CiLintContent');
+
+        expect(result.jobs[0].__typename).toBe('CiLintJob');
+        expect(result.jobs[1].__typename).toBe('CiLintJob');
+
+        expect(result.jobs[1].only.__typename).toBe('CiLintJobOnlyPolicy');
+      });
+      /* eslint-enable no-underscore-dangle */
+
+      it('lint data is as expected', () => {
+        expect(result).toMatchSnapshot();
+      });
+    });
+  });
 });

spec/frontend/pipeline_editor/mock_data.js

@@ -11,3 +11,87 @@ job1:
   script: 
     - echo 'test'
 `;
+
+export const mockLintResponse = {
+  valid: true,
+  errors: [],
+  warnings: [],
+  jobs: [
+    {
+      name: 'job_1',
+      stage: 'test',
+      before_script: ["echo 'before script 1'"],
+      script: ["echo 'script 1'"],
+      after_script: ["echo 'after script 1"],
+      tag_list: ['tag 1'],
+      environment: 'prd',
+      when: 'on_success',
+      allow_failure: false,
+      only: null,
+      except: { refs: ['master@gitlab-org/gitlab', '/^release/.*$/@gitlab-org/gitlab'] },
+    },
+    {
+      name: 'job_2',
+      stage: 'test',
+      before_script: ["echo 'before script 2'"],
+      script: ["echo 'script 2'"],
+      after_script: ["echo 'after script 2"],
+      tag_list: ['tag 2'],
+      environment: 'stg',
+      when: 'on_success',
+      allow_failure: true,
+      only: { refs: ['web', 'chat', 'pushes'] },
+      except: { refs: ['master@gitlab-org/gitlab', '/^release/.*$/@gitlab-org/gitlab'] },
+    },
+  ],
+};
+
+export const mockJobs = [
+  {
+    name: 'job_1',
+    stage: 'build',
+    beforeScript: [],
+    script: ["echo 'Building'"],
+    afterScript: [],
+    tagList: [],
+    environment: null,
+    when: 'on_success',
+    allowFailure: true,
+    only: { refs: ['web', 'chat', 'pushes'] },
+    except: null,
+  },
+  {
+    name: 'multi_project_job',
+    stage: 'test',
+    beforeScript: [],
+    script: [],
+    afterScript: [],
+    tagList: [],
+    environment: null,
+    when: 'on_success',
+    allowFailure: false,
+    only: { refs: ['branches', 'tags'] },
+    except: null,
+  },
+  {
+    name: 'job_2',
+    stage: 'test',
+    beforeScript: ["echo 'before script'"],
+    script: ["echo 'script'"],
+    afterScript: ["echo 'after script"],
+    tagList: [],
+    environment: null,
+    when: 'on_success',
+    allowFailure: false,
+    only: { refs: ['branches@gitlab-org/gitlab'] },
+    except: { refs: ['master@gitlab-org/gitlab', '/^release/.*$/@gitlab-org/gitlab'] },
+  },
+];
+
+export const mockErrors = [
+  '"job_1 job: chosen stage does not exist; available stages are .pre, build, test, deploy, .post"',
+];
+
+export const mockWarnings = [
+  '"jobs:multi_project_job may allow multiple pipelines to run for a single action due to `rules:when` clause with no `workflow:rules` - read more: https://docs.gitlab.com/ee/ci/troubleshooting.html#pipeline-warnings"',
+];