Add CI config fields to lint tab

This change adds a few fields from the CI config that are now available
in the GraphQL API such as `script` and `allow_failure`.

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

 <script>
+import { flatten } from 'lodash';
 import { CI_CONFIG_STATUS_VALID } from '../../constants';
 import CiLintResults from './ci_lint_results.vue';
 
@@ -25,14 +26,18 @@ export default {
       return this.ciConfig?.stages || [];
     },
     jobs() {
-      return this.stages.reduce((acc, { groups, name: stageName }) => {
+      const groupedJobs = this.stages.reduce((acc, { groups, name: stageName }) => {
         return acc.concat(
-          groups.map(({ name: groupName }) => ({
-            stage: stageName,
-            name: groupName,
-          })),
+          groups.map(({ jobs }) => {
+            return jobs.map((job) => ({
+              stage: stageName,
+              ...job,
+            }));
+          }),
         );
       }, []);
+
+      return flatten(groupedJobs);
     },
   },
 };

app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results_value.vue

@@ -14,7 +14,7 @@ export default {
   },
   computed: {
     tagList() {
-      return this.item.tagList?.join(', ');
+      return this.item.tags?.join(', ');
     },
     onlyPolicy() {
       return this.item.only ? this.item.only.refs.join(', ') : this.item.only;

app/assets/javascripts/pipeline_editor/graphql/mutations/lint_ci.mutation.graphql

@@ -15,7 +15,7 @@ mutation lintCI($endpoint: String, $content: String, $dry: Boolean) {
       }
       afterScript
       stage
-      tagList
+      tags
       when
     }
   }

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

@@ -27,7 +27,7 @@ export const resolvers = {
             beforeScript: job.before_script,
             script: job.script,
             afterScript: job.after_script,
-            tagList: job.tag_list,
+            tags: job.tag_list,
             environment: job.environment,
             when: job.when,
             allowFailure: job.allow_failure,

app/assets/javascripts/pipelines/graphql/fragments/pipeline_stages_connection.fragment.graphql

@@ -8,6 +8,19 @@ fragment PipelineStagesConnection on CiConfigStageConnection {
         jobs {
           nodes {
             name
+            script
+            beforeScript
+            afterScript
+            environment
+            allowFailure
+            tags
+            when
+            only {
+              refs
+            }
+            except {
+              refs
+            }
             needs {
               nodes {
                 name

spec/frontend/pipeline_editor/components/lint/ci_lint_spec.js

@@ -23,6 +23,7 @@ describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
   const findAlert = () => wrapper.find(GlAlert);
   const findLintParameters = () => findAllByTestId('ci-lint-parameter');
   const findLintParameterAt = (i) => findLintParameters().at(i);
+  const findLintValueAt = (i) => findAllByTestId('ci-lint-value').at(i);
 
   afterEach(() => {
     wrapper.destroy();
@@ -50,6 +51,20 @@ describe('~/pipeline_editor/components/lint/ci_lint.vue', () => {
       expect(findLintParameterAt(2).text()).toBe('Build Job - job_build');
     });
 
+    it('displays jobs details', () => {
+      expect(findLintParameters()).toHaveLength(3);
+
+      expect(findLintValueAt(0).text()).toMatchInterpolatedText(
+        'echo "test 1" Only policy: branches, tags When: on_success',
+      );
+      expect(findLintValueAt(1).text()).toMatchInterpolatedText(
+        'echo "test 2" Only policy: branches, tags When: on_success',
+      );
+      expect(findLintValueAt(2).text()).toMatchInterpolatedText(
+        'echo "build" Only policy: branches, tags When: on_success',
+      );
+    });
+
     it('displays invalid results', () => {
       createComponent(
         {

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

@@ -27,7 +27,7 @@ Object {
         "echo 'script 1'",
       ],
       "stage": "test",
-      "tagList": Array [
+      "tags": Array [
         "tag 1",
       ],
       "when": "on_success",
@@ -61,7 +61,7 @@ Object {
         "echo 'script 2'",
       ],
       "stage": "test",
-      "tagList": Array [
+      "tags": Array [
         "tag 2",
       ],
       "when": "on_success",

spec/frontend/pipeline_editor/mock_data.js

@@ -35,6 +35,21 @@ job_build:
   needs: ["job_test_2"]
 `;
 
+const mockJobFields = {
+  beforeScript: [],
+  afterScript: [],
+  environment: null,
+  allowFailure: false,
+  tags: [],
+  when: 'on_success',
+  only: { refs: ['branches', 'tags'], __typename: 'CiJobLimitType' },
+  except: null,
+  needs: { nodes: [], __typename: 'CiConfigNeedConnection' },
+  __typename: 'CiConfigJob',
+};
+
+// Mock result of the graphql query at:
+// app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.graphql
 export const mockCiConfigQueryResponse = {
   data: {
     ciConfig: {
@@ -54,8 +69,8 @@ export const mockCiConfigQueryResponse = {
                     nodes: [
                       {
                         name: 'job_test_1',
-                        needs: { nodes: [], __typename: 'CiConfigNeedConnection' },
-                        __typename: 'CiConfigJob',
+                        script: ['echo "test 1"'],
+                        ...mockJobFields,
                       },
                     ],
                     __typename: 'CiConfigJobConnection',
@@ -69,9 +84,8 @@ export const mockCiConfigQueryResponse = {
                     nodes: [
                       {
                         name: 'job_test_2',
-
-                        needs: { nodes: [], __typename: 'CiConfigNeedConnection' },
-                        __typename: 'CiConfigJob',
+                        script: ['echo "test 2"'],
+                        ...mockJobFields,
                       },
                     ],
                     __typename: 'CiConfigJobConnection',
@@ -94,11 +108,8 @@ export const mockCiConfigQueryResponse = {
                     nodes: [
                       {
                         name: 'job_build',
-                        needs: {
-                          nodes: [{ name: 'job_test_2', __typename: 'CiConfigNeed' }],
-                          __typename: 'CiConfigNeedConnection',
-                        },
-                        __typename: 'CiConfigJob',
+                        script: ['echo "build"'],
+                        ...mockJobFields,
                       },
                     ],
                     __typename: 'CiConfigJobConnection',