From 307def3c21b5e02c52fcfe92b19a6e4fc8af7e31 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Tue, 7 Sep 2021 15:38:31 -0600
Subject: [PATCH 1/4] Use GraphQL data in full code quality report

When graphql_code_quality_full_report feature flag is enabled
load pipeline code quality report data via GraphQL
update specs to test for feature flag set to true/false
update issue parser to handle all-caps issue severities
Add a skeleton loader to the pipeline code quality report
---
 .../components/codequality_issue_body.vue     |   9 +-
 .../store/utils/codequality_parser.js         |   9 +-
 .../codequality_report/codequality_report.vue |  40 +++-
 .../get_code_quality_violations.query.graphql |  23 +++
 .../codequality_report/store/actions.js       |  58 +++++-
 .../codequality_report/store/constants.js     |   2 +
 .../codequality_report/store/getters.js       |  10 +-
 .../store/mutation_types.js                   |   1 +
 .../codequality_report/store/mutations.js     |  19 +-
 .../codequality_report/store/state.js         |  14 +-
 .../codequality_report/store/utils.js         |   8 +
 .../pipelines/show/codequality_report.js      |  14 +-
 .../ee/projects/pipelines_controller.rb       |   1 +
 .../pipelines/_tabs_content.html.haml         |   6 +-
 .../graphql_code_quality_full_report.yml      |   8 +
 .../codequality_report_spec.js                |  49 ++++-
 .../frontend/codequality_report/mock_data.js  |  50 +++++
 .../codequality_report/store/actions_spec.js  | 175 ++++++++++++++++--
 .../store/mutations_spec.js                   |  16 +-
 .../components/codequality_issue_body_spec.js |   6 +
 .../store/utils/codequality_parser_spec.js    |  12 ++
 21 files changed, 476 insertions(+), 54 deletions(-)
 create mode 100644 ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql
 create mode 100644 ee/app/assets/javascripts/codequality_report/store/utils.js
 create mode 100644 ee/config/feature_flags/development/graphql_code_quality_full_report.yml

diff --git a/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue b/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
index 736c8668a34ace..7f6c17e9296f10 100644
--- a/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
+++ b/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
@@ -37,13 +37,16 @@ export default {
       return this.status === STATUS_SUCCESS;
     },
     severityClass() {
-      return SEVERITY_CLASSES[this.issue.severity] || SEVERITY_CLASSES.unknown;
+      return SEVERITY_CLASSES[this.issue.severity.toLowerCase()] || SEVERITY_CLASSES.unknown;
     },
     severityIcon() {
-      return SEVERITY_ICONS[this.issue.severity] || SEVERITY_ICONS.unknown;
+      return SEVERITY_ICONS[this.issue.severity.toLowerCase()] || SEVERITY_ICONS.unknown;
     },
     severityLabel() {
-      return this.$options.severityText[this.issue.severity] || this.$options.severityText.unknown;
+      return (
+        this.$options.severityText[this.issue.severity.toLowerCase()] ||
+        this.$options.severityText.unknown
+      );
     },
   },
   severityText: {
diff --git a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js
index a794f5f0577bf7..188312d64cbfbc 100644
--- a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js
+++ b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js
@@ -1,14 +1,15 @@
-export const parseCodeclimateMetrics = (issues = [], path = '') => {
+export const parseCodeclimateMetrics = (issues = [], blobPath = '') => {
   return issues.map((issue) => {
+    const issuePath = issue.file_path || issue.path;
     const parsedIssue = {
       name: issue.description,
-      path: issue.file_path,
-      urlPath: `${path}/${issue.file_path}#L${issue.line}`,
+      path: issuePath,
+      urlPath: `${blobPath}/${issuePath}#L${issue.line}`,
       ...issue,
     };
 
     if (issue?.location?.path) {
-      let parseCodeQualityUrl = `${path}/${issue.location.path}`;
+      let parseCodeQualityUrl = `${blobPath}/${issue.location.path}`;
       parsedIssue.path = issue.location.path;
 
       if (issue?.location?.lines?.begin) {
diff --git a/ee/app/assets/javascripts/codequality_report/codequality_report.vue b/ee/app/assets/javascripts/codequality_report/codequality_report.vue
index 0453ae114bd749..18d6697cc6d2b0 100644
--- a/ee/app/assets/javascripts/codequality_report/codequality_report.vue
+++ b/ee/app/assets/javascripts/codequality_report/codequality_report.vue
@@ -1,37 +1,43 @@
 <script>
+import { GlPagination, GlSkeletonLoader } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { componentNames } from 'ee/reports/components/issue_body';
 import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 import { n__, s__, sprintf } from '~/locale';
 import ReportSection from '~/reports/components/report_section.vue';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
     ReportSection,
     PaginationLinks,
+    GlSkeletonLoader,
+    GlPagination,
   },
-  mixins: [reportsMixin],
+  mixins: [reportsMixin, glFeatureFlagsMixin()],
   componentNames,
   computed: {
     ...mapState(['isLoadingCodequality', 'loadingCodequalityFailed', 'pageInfo']),
     ...mapGetters(['codequalityIssues', 'codequalityIssueTotal']),
+    prevPage() {
+      return Math.max(this.pageInfo.currentPage - 1, 0);
+    },
+    nextPage() {
+      return this.pageInfo?.hasNextPage ? this.pageInfo.currentPage + 1 : null;
+    },
     hasCodequalityIssues() {
       return this.codequalityIssueTotal > 0;
     },
     codequalityText() {
       const text = [];
-      const { codequalityIssueTotal } = this;
+      const count = this.codequalityIssueTotal;
 
-      if (codequalityIssueTotal === 0) {
+      if (count === 0) {
         return s__('ciReport|No code quality issues found');
-      } else if (codequalityIssueTotal > 0) {
+      } else if (count > 0) {
         return sprintf(s__('ciReport|Found %{issuesWithCount}'), {
-          issuesWithCount: n__(
-            '%d code quality issue',
-            '%d code quality issues',
-            codequalityIssueTotal,
-          ),
+          issuesWithCount: n__('%d code quality issue', '%d code quality issues', count),
         });
       }
 
@@ -70,13 +76,27 @@ export default {
       :success-text="codequalityText"
       :unresolved-issues="codequalityIssues"
       :resolved-issues="[]"
-      :has-issues="hasCodequalityIssues"
+      :has-issues="hasCodequalityIssues && !isLoadingCodequality"
       :component="$options.componentNames.CodequalityIssueBody"
       class="codequality-report"
     >
       <template v-if="hasCodequalityIssues" #sub-heading>{{ $options.i18n.subHeading }}</template>
     </report-section>
+    <div v-if="isLoadingCodequality" class="gl-p-4">
+      <gl-skeleton-loader :lines="50" />
+    </div>
+    <gl-pagination
+      v-if="glFeatures.graphqlCodeQualityFullReport"
+      :disabled="isLoadingCodequality"
+      :value="pageInfo.currentPage"
+      :prev-page="prevPage"
+      :next-page="nextPage"
+      align="center"
+      class="gl-mt-3"
+      @input="setPage"
+    />
     <pagination-links
+      v-else
       :change="setPage"
       :page-info="pageInfo"
       class="d-flex justify-content-center gl-mt-3"
diff --git a/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql b/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql
new file mode 100644
index 00000000000000..bc4ff2ce5c7636
--- /dev/null
+++ b/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql
@@ -0,0 +1,23 @@
+query GetCodeQualityViolations($projectPath: ID!, $iid: ID!, $first: Int, $after: String) {
+  project(fullPath: $projectPath) {
+    pipeline(iid: $iid) {
+      codeQualityReports(first: $first, after: $after) {
+        count
+        edges {
+          node {
+            line
+            description
+            path
+            fingerprint
+            severity
+          }
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+        }
+      }
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/codequality_report/store/actions.js b/ee/app/assets/javascripts/codequality_report/store/actions.js
index 171ba816c2c53a..722b8773a5b934 100644
--- a/ee/app/assets/javascripts/codequality_report/store/actions.js
+++ b/ee/app/assets/javascripts/codequality_report/store/actions.js
@@ -4,10 +4,30 @@ import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 
 import { parseCodeclimateMetrics } from '~/reports/codequality_report/store/utils/codequality_parser';
+import getCodeQualityViolations from '../graphql/queries/get_code_quality_violations.query.graphql';
 import { VIEW_EVENT_NAME } from './constants';
 import * as types from './mutation_types';
+import { gqClient } from './utils';
 
-export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
+export const setPage = ({ state, commit, dispatch }, page) => {
+  if (gon.features?.graphqlCodeQualityFullReport) {
+    const { currentPage, startCursor, endCursor } = state.pageInfo;
+
+    if (page > currentPage) {
+      commit(types.SET_PAGE, {
+        after: endCursor,
+        currentPage: page,
+      });
+    } else {
+      commit(types.SET_PAGE, {
+        after: startCursor,
+        currentPage: page,
+      });
+    }
+    return dispatch('fetchReport');
+  }
+  return commit(types.SET_PAGE, { page });
+};
 
 export const requestReport = ({ commit }) => {
   commit(types.REQUEST_REPORT);
@@ -15,15 +35,47 @@ export const requestReport = ({ commit }) => {
   Api.trackRedisHllUserEvent(VIEW_EVENT_NAME);
 };
 export const receiveReportSuccess = ({ state, commit }, data) => {
+  if (gon.features?.graphqlCodeQualityFullReport) {
+    const parsedIssues = parseCodeclimateMetrics(
+      data.edges.map((edge) => edge.node),
+      state.blobPath,
+    );
+    return commit(types.RECEIVE_REPORT_SUCCESS_GRAPHQL, { data, parsedIssues });
+  }
   const parsedIssues = parseCodeclimateMetrics(data, state.blobPath);
-  commit(types.RECEIVE_REPORT_SUCCESS, parsedIssues);
+  return commit(types.RECEIVE_REPORT_SUCCESS, parsedIssues);
 };
 export const receiveReportError = ({ commit }, error) => commit(types.RECEIVE_REPORT_ERROR, error);
 
 export const fetchReport = ({ state, dispatch }) => {
   dispatch('requestReport');
 
-  axios
+  if (gon.features?.graphqlCodeQualityFullReport) {
+    const { projectPath, pipelineIid, pageInfo } = state;
+    const variables = {
+      projectPath,
+      iid: pipelineIid,
+      first: pageInfo.first,
+      after: pageInfo.after,
+    };
+
+    return gqClient
+      .query({
+        query: getCodeQualityViolations,
+        variables,
+      })
+      .then(({ data }) => {
+        if (!state.blobPath) throw new Error();
+        dispatch('receiveReportSuccess', data.project.pipeline.codeQualityReports);
+      })
+      .catch((error) => {
+        dispatch('receiveReportError', error);
+        createFlash({
+          message: s__('ciReport|There was an error fetching the codequality report.'),
+        });
+      });
+  }
+  return axios
     .get(state.endpoint)
     .then(({ data }) => {
       if (!state.blobPath) throw new Error();
diff --git a/ee/app/assets/javascripts/codequality_report/store/constants.js b/ee/app/assets/javascripts/codequality_report/store/constants.js
index c9b2fb021deeaf..9776302a3eed86 100644
--- a/ee/app/assets/javascripts/codequality_report/store/constants.js
+++ b/ee/app/assets/javascripts/codequality_report/store/constants.js
@@ -1,5 +1,7 @@
 export const VIEW_EVENT_NAME = 'i_testing_full_code_quality_report_total';
 
+export const PAGE_SIZE = 25;
+
 export const SEVERITY_SORT_ORDER = {
   unknown: 0,
   blocker: 1,
diff --git a/ee/app/assets/javascripts/codequality_report/store/getters.js b/ee/app/assets/javascripts/codequality_report/store/getters.js
index a7f3f1eb2a661d..8ef04e4da3eccf 100644
--- a/ee/app/assets/javascripts/codequality_report/store/getters.js
+++ b/ee/app/assets/javascripts/codequality_report/store/getters.js
@@ -1,7 +1,15 @@
 export const codequalityIssues = (state) => {
+  if (gon.features?.graphqlCodeQualityFullReport) {
+    return state.codequalityIssues;
+  }
   const { page, perPage } = state.pageInfo;
   const start = (page - 1) * perPage;
   return state.allCodequalityIssues.slice(start, start + perPage);
 };
 
-export const codequalityIssueTotal = (state) => state.allCodequalityIssues.length;
+export const codequalityIssueTotal = (state) => {
+  if (gon.features?.graphqlCodeQualityFullReport) {
+    return state.pageInfo.count;
+  }
+  return state.allCodequalityIssues.length;
+};
diff --git a/ee/app/assets/javascripts/codequality_report/store/mutation_types.js b/ee/app/assets/javascripts/codequality_report/store/mutation_types.js
index d66afa5e95c6dc..208999feff1fdd 100644
--- a/ee/app/assets/javascripts/codequality_report/store/mutation_types.js
+++ b/ee/app/assets/javascripts/codequality_report/store/mutation_types.js
@@ -1,4 +1,5 @@
 export const SET_PAGE = 'SET_PAGE';
 export const REQUEST_REPORT = 'REQUEST_REPORT';
+export const RECEIVE_REPORT_SUCCESS_GRAPHQL = 'RECEIVE_REPORT_SUCCESS_GRAPHQL';
 export const RECEIVE_REPORT_SUCCESS = 'RECEIVE_REPORT_SUCCESS';
 export const RECEIVE_REPORT_ERROR = 'RECEIVE_REPORT_ERROR';
diff --git a/ee/app/assets/javascripts/codequality_report/store/mutations.js b/ee/app/assets/javascripts/codequality_report/store/mutations.js
index 5949082fbc6f84..ba89fb5ba13738 100644
--- a/ee/app/assets/javascripts/codequality_report/store/mutations.js
+++ b/ee/app/assets/javascripts/codequality_report/store/mutations.js
@@ -2,16 +2,25 @@ import { SEVERITY_SORT_ORDER } from './constants';
 import * as types from './mutation_types';
 
 export default {
-  [types.SET_PAGE](state, page) {
+  [types.SET_PAGE](state, pageInfo) {
     Object.assign(state, {
-      pageInfo: Object.assign(state.pageInfo, {
-        page,
-      }),
+      pageInfo: Object.assign(state.pageInfo, pageInfo),
     });
   },
   [types.REQUEST_REPORT](state) {
     Object.assign(state, { isLoadingCodequality: true });
   },
+  [types.RECEIVE_REPORT_SUCCESS_GRAPHQL](state, { data, parsedIssues }) {
+    Object.assign(state, {
+      isLoadingCodequality: false,
+      codequalityIssues: parsedIssues,
+      loadingCodequalityFailed: false,
+      pageInfo: Object.assign(state.pageInfo, {
+        count: data.count,
+        ...data.pageInfo,
+      }),
+    });
+  },
   [types.RECEIVE_REPORT_SUCCESS](state, allCodequalityIssues) {
     Object.assign(state, {
       isLoadingCodequality: false,
@@ -29,10 +38,12 @@ export default {
     Object.assign(state, {
       isLoadingCodequality: false,
       allCodequalityIssues: [],
+      codequalityIssues: [],
       loadingCodequalityFailed: true,
       codeQualityError,
       pageInfo: Object.assign(state.pageInfo, {
         total: 0,
+        count: 0,
       }),
     });
   },
diff --git a/ee/app/assets/javascripts/codequality_report/store/state.js b/ee/app/assets/javascripts/codequality_report/store/state.js
index 4899076c3cf7a6..e1149ceea08fc4 100644
--- a/ee/app/assets/javascripts/codequality_report/store/state.js
+++ b/ee/app/assets/javascripts/codequality_report/store/state.js
@@ -1,12 +1,24 @@
+import { PAGE_SIZE } from './constants';
+
 export default () => ({
+  projectPath: null,
+  pipelineIid: null,
   endpoint: '',
   allCodequalityIssues: [],
+  codequalityIssues: [],
   isLoadingCodequality: false,
   loadingCodequalityFailed: false,
   codeQualityError: null,
   pageInfo: {
     page: 1,
-    perPage: 25,
+    perPage: PAGE_SIZE,
     total: 0,
+    count: 0,
+    currentPage: 1,
+    startCursor: '',
+    endCursor: '',
+    first: PAGE_SIZE,
+    after: '',
+    hasNextPage: false,
   },
 });
diff --git a/ee/app/assets/javascripts/codequality_report/store/utils.js b/ee/app/assets/javascripts/codequality_report/store/utils.js
new file mode 100644
index 00000000000000..9f4f0a15d930b6
--- /dev/null
+++ b/ee/app/assets/javascripts/codequality_report/store/utils.js
@@ -0,0 +1,8 @@
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
+
+export const gqClient = createGqClient(
+  {},
+  {
+    fetchPolicy: fetchPolicies.NO_CACHE,
+  },
+);
diff --git a/ee/app/assets/javascripts/pages/projects/pipelines/show/codequality_report.js b/ee/app/assets/javascripts/pages/projects/pipelines/show/codequality_report.js
index 4d133e7ef85ed2..604bde065589f6 100644
--- a/ee/app/assets/javascripts/pages/projects/pipelines/show/codequality_report.js
+++ b/ee/app/assets/javascripts/pages/projects/pipelines/show/codequality_report.js
@@ -11,8 +11,18 @@ export default () => {
 
   if (tabsElement && codequalityTab) {
     const fetchReportAction = 'fetchReport';
-    const { codequalityReportDownloadPath, blobPath } = codequalityTab.dataset;
-    const store = createStore({ endpoint: codequalityReportDownloadPath, blobPath });
+    const {
+      codequalityReportDownloadPath,
+      blobPath,
+      projectPath,
+      pipelineIid,
+    } = codequalityTab.dataset;
+    const store = createStore({
+      endpoint: codequalityReportDownloadPath,
+      blobPath,
+      projectPath,
+      pipelineIid,
+    });
 
     const isCodequalityTabActive = Boolean(
       document.querySelector('.pipelines-tabs > li > a.codequality-tab.active'),
diff --git a/ee/app/controllers/ee/projects/pipelines_controller.rb b/ee/app/controllers/ee/projects/pipelines_controller.rb
index ace6a0cba332d8..76c572584df5e7 100644
--- a/ee/app/controllers/ee/projects/pipelines_controller.rb
+++ b/ee/app/controllers/ee/projects/pipelines_controller.rb
@@ -10,6 +10,7 @@ module PipelinesController
         before_action :authorize_read_licenses!, only: [:licenses]
         before_action do
           push_frontend_feature_flag(:pipeline_security_dashboard_graphql, project, type: :development, default_enabled: :yaml)
+          push_frontend_feature_flag(:graphql_code_quality_full_report, project, type: :development, default_enabled: :yaml)
         end
 
         feature_category :license_compliance, [:licenses]
diff --git a/ee/app/views/projects/pipelines/_tabs_content.html.haml b/ee/app/views/projects/pipelines/_tabs_content.html.haml
index c257f26a0f92de..0b88132ce15cfb 100644
--- a/ee/app/views/projects/pipelines/_tabs_content.html.haml
+++ b/ee/app/views/projects/pipelines/_tabs_content.html.haml
@@ -34,7 +34,9 @@
     licenses_api_path: licenses_api_path,
     can_manage_licenses: can?(current_user, :admin_software_license_policy, project).to_s } }
 
-- if codequality_report_download_path
+- if codequality_report_download_path || pipeline.can_generate_codequality_reports?
   #js-tab-codequality.tab-pane
     #js-pipeline-codequality-report{ data: { codequality_report_download_path: codequality_report_download_path,
-    blob_path: project_blob_path(project, pipeline.commit) } }
+    blob_path: project_blob_path(project, pipeline.commit),
+    project_path: project.full_path,
+    pipeline_iid: pipeline.iid } }
diff --git a/ee/config/feature_flags/development/graphql_code_quality_full_report.yml b/ee/config/feature_flags/development/graphql_code_quality_full_report.yml
new file mode 100644
index 00000000000000..06e462f012342b
--- /dev/null
+++ b/ee/config/feature_flags/development/graphql_code_quality_full_report.yml
@@ -0,0 +1,8 @@
+---
+name: graphql_code_quality_full_report
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/69917
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/340525
+milestone: '14.3'
+type: development
+group: group::testing
+default_enabled: false
diff --git a/ee/spec/frontend/codequality_report/codequality_report_spec.js b/ee/spec/frontend/codequality_report/codequality_report_spec.js
index 99b4d41554d788..1a378e5206657f 100644
--- a/ee/spec/frontend/codequality_report/codequality_report_spec.js
+++ b/ee/spec/frontend/codequality_report/codequality_report_spec.js
@@ -1,6 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { GlPagination, GlSkeletonLoader } from '@gitlab/ui';
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import CodequalityReportApp from 'ee/codequality_report/codequality_report.vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 import { parsedIssues } from './mock_data';
 
 jest.mock('~/flash');
@@ -12,10 +14,11 @@ describe('Codequality report app', () => {
   let wrapper;
   let store;
 
-  const createComponent = (state = {}, issues = [], glFeatures = {}) => {
+  const createComponent = (state = {}, issues = [], glFeatures = {}, mountFn = mount) => {
     store = new Vuex.Store({
       state: {
         pageInfo: {},
+        isLoadingCodequality: false,
         ...state,
       },
       getters: {
@@ -24,7 +27,7 @@ describe('Codequality report app', () => {
       },
     });
 
-    wrapper = mount(CodequalityReportApp, {
+    wrapper = mountFn(CodequalityReportApp, {
       localVue,
       store,
       provide: {
@@ -36,6 +39,9 @@ describe('Codequality report app', () => {
   const findStatus = () => wrapper.find('.js-code-text');
   const findSuccessIcon = () => wrapper.find('.js-ci-status-icon-success');
   const findWarningIcon = () => wrapper.find('.js-ci-status-icon-warning');
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findOldPagination = () => wrapper.findComponent(PaginationLinks);
+  const findPagination = () => wrapper.findComponent(GlPagination);
 
   afterEach(() => {
     wrapper.destroy();
@@ -48,6 +54,7 @@ describe('Codequality report app', () => {
 
     it('shows a loading state', () => {
       expect(findStatus().text()).toBe('Loading codeclimate report');
+      expect(findSkeletonLoader().exists()).toBe(true);
     });
   });
 
@@ -88,6 +95,42 @@ describe('Codequality report app', () => {
     });
   });
 
+  describe('with graphql feature flag disabled', () => {
+    beforeEach(() => {
+      createComponent(
+        {},
+        parsedIssues,
+        {
+          graphqlCodeQualityFullReport: false,
+        },
+        shallowMount,
+      );
+    });
+
+    it('renders the old pagination component', () => {
+      expect(findOldPagination().exists()).toBe(true);
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  describe('with graphql feature flag enabled', () => {
+    beforeEach(() => {
+      createComponent(
+        {},
+        parsedIssues,
+        {
+          graphqlCodeQualityFullReport: true,
+        },
+        shallowMount,
+      );
+    });
+
+    it('renders the pagination component', () => {
+      expect(findOldPagination().exists()).toBe(false);
+      expect(findPagination().exists()).toBe(true);
+    });
+  });
+
   describe('when there are no codequality issues', () => {
     beforeEach(() => {
       createComponent({}, []);
diff --git a/ee/spec/frontend/codequality_report/mock_data.js b/ee/spec/frontend/codequality_report/mock_data.js
index 18f6b1ad3be455..f0f70b36268c47 100644
--- a/ee/spec/frontend/codequality_report/mock_data.js
+++ b/ee/spec/frontend/codequality_report/mock_data.js
@@ -180,3 +180,53 @@ export const parsedIssues = [
       '/root/test-codequality/blob/feature-branch/ee/spec/finders/geo/lfs_object_registry_finder_spec.rb#L512',
   },
 ];
+
+export const mockGraphqlResponse = {
+  data: {
+    project: {
+      pipeline: {
+        codeQualityReports: {
+          count: 3,
+          edges: [
+            {
+              node: {
+                line: 33,
+                description:
+                  'Function `addToImport` has 54 lines of code (exceeds 25 allowed). Consider refactoring.',
+                path: 'app/assets/javascripts/importer_status.js',
+                fingerprint: 'f5c4a1a17a8903f8c6dd885142d0e5a7',
+                severity: 'MAJOR',
+              },
+            },
+            {
+              node: {
+                line: 170,
+                description: 'Avoid too many `return` statements within this function.',
+                path: 'app/assets/javascripts/ide/stores/utils.js',
+                fingerprint: '75e7e39f5b8ea0aadff2470a9b44ca68',
+                severity: 'MINOR',
+              },
+            },
+            {
+              node: {
+                line: 44,
+                description: 'Similar blocks of code found in 3 locations. Consider refactoring.',
+                path: 'ee/spec/features/projects/feature_flags/user_sees_feature_flag_list_spec.rb',
+                fingerprint: '99c054a8b1a7270b193b0a03a6c69cfc',
+                severity: 'INFO',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const mockGraphqlPagination = {
+  hasNextPage: true,
+  hasPreviousPage: true,
+  startCursor: 'abc123',
+  endCursor: 'abc124',
+  page: 1,
+};
diff --git a/ee/spec/frontend/codequality_report/store/actions_spec.js b/ee/spec/frontend/codequality_report/store/actions_spec.js
index 1cbc47ef970516..00a288060010bd 100644
--- a/ee/spec/frontend/codequality_report/store/actions_spec.js
+++ b/ee/spec/frontend/codequality_report/store/actions_spec.js
@@ -1,13 +1,21 @@
 import MockAdapter from 'axios-mock-adapter';
+import codeQualityQuery from 'ee/codequality_report/graphql/queries/get_code_quality_violations.query.graphql';
 import * as actions from 'ee/codequality_report/store/actions';
 import { VIEW_EVENT_NAME } from 'ee/codequality_report/store/constants';
 import * as types from 'ee/codequality_report/store/mutation_types';
+import initialState from 'ee/codequality_report/store/state';
+import { gqClient } from 'ee/codequality_report/store/utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { unparsedIssues, parsedIssues } from '../mock_data';
+import {
+  unparsedIssues,
+  parsedIssues,
+  mockGraphqlResponse,
+  mockGraphqlPagination,
+} from '../mock_data';
 
 jest.mock('~/api.js');
 jest.mock('~/flash');
@@ -18,6 +26,7 @@ describe('Codequality report actions', () => {
 
   const endpoint = `${TEST_HOST}/codequality_report.json`;
   const defaultState = {
+    ...initialState(),
     endpoint,
   };
 
@@ -31,8 +40,36 @@ describe('Codequality report actions', () => {
   });
 
   describe('setPage', () => {
-    it('sets the page number', (done) => {
-      testAction(actions.setPage, 12, state, [{ type: types.SET_PAGE, payload: 12 }], [], done);
+    it('sets the page number with feature flag disabled', (done) => {
+      const origGon = window.gon;
+      window.gon = { features: { graphqlCodeQualityFullReport: false } };
+
+      return testAction(
+        actions.setPage,
+        12,
+        state,
+        [{ type: types.SET_PAGE, payload: { page: 12 } }],
+        [],
+        done,
+      ).then(() => {
+        window.gon = origGon;
+      });
+    });
+
+    it('sets the page number with feature flag enabled', (done) => {
+      const origGon = window.gon;
+      window.gon = { features: { graphqlCodeQualityFullReport: true } };
+
+      return testAction(
+        actions.setPage,
+        12,
+        state,
+        [{ type: types.SET_PAGE, payload: { after: '', currentPage: 12 } }],
+        [{ type: 'fetchReport' }],
+        done,
+      ).then(() => {
+        window.gon = origGon;
+      });
     });
   });
 
@@ -49,15 +86,42 @@ describe('Codequality report actions', () => {
   });
 
   describe('receiveReportSuccess', () => {
-    it('parses the list of issues from the report', (done) => {
-      testAction(
+    it('parses the list of issues from the report with feature flag disabled', (done) => {
+      const origGon = window.gon;
+      window.gon = { features: { graphqlCodeQualityFullReport: false } };
+
+      return testAction(
         actions.receiveReportSuccess,
         unparsedIssues,
         { blobPath: '/root/test-codequality/blob/feature-branch', ...state },
         [{ type: types.RECEIVE_REPORT_SUCCESS, payload: parsedIssues }],
         [],
         done,
-      );
+      ).then(() => {
+        window.gon = origGon;
+      });
+    });
+
+    it('parses the list of issues from the report with feature flag enabled', (done) => {
+      const origGon = window.gon;
+      window.gon = { features: { graphqlCodeQualityFullReport: true } };
+
+      const data = {
+        edges: unparsedIssues.map((issue) => {
+          return { node: issue };
+        }),
+      };
+
+      return testAction(
+        actions.receiveReportSuccess,
+        data,
+        { blobPath: '/root/test-codequality/blob/feature-branch', ...state },
+        [{ type: types.RECEIVE_REPORT_SUCCESS_GRAPHQL, payload: { data, parsedIssues } }],
+        [],
+        done,
+      ).then(() => {
+        window.gon = origGon;
+      });
     });
   });
 
@@ -75,19 +139,92 @@ describe('Codequality report actions', () => {
   });
 
   describe('fetchReport', () => {
-    beforeEach(() => {
-      mock.onGet(endpoint).replyOnce(200, unparsedIssues);
+    describe('with graphql feature flag disabled', () => {
+      beforeEach(() => {
+        mock.onGet(endpoint).replyOnce(200, unparsedIssues);
+      });
+
+      it('fetches the report', (done) => {
+        const origGon = window.gon;
+        window.gon = { features: { graphqlCodeQualityFullReport: false } };
+
+        return testAction(
+          actions.fetchReport,
+          null,
+          { blobPath: 'blah', ...state },
+          [],
+          [{ type: 'requestReport' }, { type: 'receiveReportSuccess', payload: unparsedIssues }],
+          done,
+        ).then(() => {
+          window.gon = origGon;
+        });
+      });
+
+      it('shows a flash message when there is an error', (done) => {
+        testAction(
+          actions.fetchReport,
+          'error',
+          state,
+          [],
+          [{ type: 'requestReport' }, { type: 'receiveReportError', payload: expect.any(Error) }],
+          () => {
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'There was an error fetching the codequality report.',
+            });
+            done();
+          },
+        );
+      });
+
+      it('shows an error when blob path is missing', (done) => {
+        testAction(
+          actions.fetchReport,
+          null,
+          state,
+          [],
+          [{ type: 'requestReport' }, { type: 'receiveReportError', payload: expect.any(Error) }],
+          () => {
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'There was an error fetching the codequality report.',
+            });
+            done();
+          },
+        );
+      });
     });
 
-    it('fetches the report', (done) => {
-      testAction(
-        actions.fetchReport,
-        null,
-        { blobPath: 'blah', ...state },
-        [],
-        [{ type: 'requestReport' }, { type: 'receiveReportSuccess', payload: unparsedIssues }],
-        done,
-      );
+    describe('with graphql feature flag enabled', () => {
+      beforeEach(() => {
+        jest.spyOn(gqClient, 'query').mockResolvedValue(mockGraphqlResponse);
+        state.paginationData = mockGraphqlPagination;
+      });
+
+      it('fetches the report', () => {
+        const origGon = window.gon;
+        window.gon = { features: { graphqlCodeQualityFullReport: true } };
+
+        return testAction(
+          actions.fetchReport,
+          null,
+          { blobPath: 'blah', ...state },
+          [],
+          [
+            { type: 'requestReport' },
+            {
+              type: 'receiveReportSuccess',
+              payload: mockGraphqlResponse.data.project.pipeline.codeQualityReports,
+            },
+          ],
+          () => {
+            expect(gqClient.query).toHaveBeenCalledWith({
+              query: codeQualityQuery,
+              variables: { after: '', first: 25, iid: null, projectPath: null },
+            });
+          },
+        ).then(() => {
+          window.gon = origGon;
+        });
+      });
     });
 
     it('shows a flash message when there is an error', (done) => {
@@ -96,7 +233,7 @@ describe('Codequality report actions', () => {
         'error',
         state,
         [],
-        [{ type: 'requestReport' }, { type: 'receiveReportError', payload: new Error() }],
+        [{ type: 'requestReport' }, { type: 'receiveReportError', payload: expect.any(Error) }],
         () => {
           expect(createFlash).toHaveBeenCalledWith({
             message: 'There was an error fetching the codequality report.',
@@ -112,7 +249,7 @@ describe('Codequality report actions', () => {
         null,
         state,
         [],
-        [{ type: 'requestReport' }, { type: 'receiveReportError', payload: new Error() }],
+        [{ type: 'requestReport' }, { type: 'receiveReportError', payload: expect.any(Error) }],
         () => {
           expect(createFlash).toHaveBeenCalledWith({
             message: 'There was an error fetching the codequality report.',
diff --git a/ee/spec/frontend/codequality_report/store/mutations_spec.js b/ee/spec/frontend/codequality_report/store/mutations_spec.js
index f31317d025bbfe..61fd2a1ea5007c 100644
--- a/ee/spec/frontend/codequality_report/store/mutations_spec.js
+++ b/ee/spec/frontend/codequality_report/store/mutations_spec.js
@@ -15,7 +15,7 @@ describe('Codequality report mutations', () => {
 
   describe('set page', () => {
     it('should set page', () => {
-      mutations[types.SET_PAGE](state, 4);
+      mutations[types.SET_PAGE](state, { page: 4 });
       expect(state.pageInfo.page).toBe(4);
     });
   });
@@ -27,7 +27,17 @@ describe('Codequality report mutations', () => {
     });
   });
 
-  describe('receive report success', () => {
+  describe('receive report success with graphql', () => {
+    it('should set issue info and clear the loading flag', () => {
+      mutations[types.RECEIVE_REPORT_SUCCESS_GRAPHQL](state, { data: { count: 42 }, parsedIssues });
+
+      expect(state.isLoadingCodequality).toBe(false);
+      expect(state.codequalityIssues).toBe(parsedIssues);
+      expect(state.pageInfo.count).toBe(42);
+    });
+  });
+
+  describe('receive report success without graphql', () => {
     it('should set issue info and clear the loading flag', () => {
       mutations[types.RECEIVE_REPORT_SUCCESS](state, parsedIssues);
 
@@ -62,8 +72,10 @@ describe('Codequality report mutations', () => {
       expect(state.isLoadingCodequality).toBe(false);
       expect(state.loadingCodequalityFailed).toBe(true);
       expect(state.allCodequalityIssues).toEqual([]);
+      expect(state.codequalityIssues).toEqual([]);
       expect(state.codeQualityError).toEqual(new Error());
       expect(state.pageInfo.total).toBe(0);
+      expect(state.pageInfo.count).toBe(0);
     });
   });
 });
diff --git a/spec/frontend/reports/codequality_report/components/codequality_issue_body_spec.js b/spec/frontend/reports/codequality_report/components/codequality_issue_body_spec.js
index f99dcbffdff64f..c548007a8a617e 100644
--- a/spec/frontend/reports/codequality_report/components/codequality_issue_body_spec.js
+++ b/spec/frontend/reports/codequality_report/components/codequality_issue_body_spec.js
@@ -38,6 +38,12 @@ describe('code quality issue body issue body', () => {
   describe('severity rating', () => {
     it.each`
       severity      | iconClass               | iconName
+      ${'INFO'}     | ${'text-primary-400'}   | ${'severity-info'}
+      ${'MINOR'}    | ${'text-warning-200'}   | ${'severity-low'}
+      ${'CRITICAL'} | ${'text-danger-600'}    | ${'severity-high'}
+      ${'BLOCKER'}  | ${'text-danger-800'}    | ${'severity-critical'}
+      ${'UNKNOWN'}  | ${'text-secondary-400'} | ${'severity-unknown'}
+      ${'INVALID'}  | ${'text-secondary-400'} | ${'severity-unknown'}
       ${'info'}     | ${'text-primary-400'}   | ${'severity-info'}
       ${'minor'}    | ${'text-warning-200'}   | ${'severity-low'}
       ${'major'}    | ${'text-warning-400'}   | ${'severity-medium'}
diff --git a/spec/frontend/reports/codequality_report/store/utils/codequality_parser_spec.js b/spec/frontend/reports/codequality_report/store/utils/codequality_parser_spec.js
index ba95294ab0abd5..5b77a2c74be99c 100644
--- a/spec/frontend/reports/codequality_report/store/utils/codequality_parser_spec.js
+++ b/spec/frontend/reports/codequality_report/store/utils/codequality_parser_spec.js
@@ -25,6 +25,18 @@ describe('Codequality report store utils', () => {
       });
     });
 
+    describe('when an issue has a non-nested path', () => {
+      const issue = { description: 'Insecure Dependency', path: 'Gemfile.lock' };
+
+      beforeEach(() => {
+        [result] = parseCodeclimateMetrics([issue], 'path');
+      });
+
+      it('is parsed', () => {
+        expect(result.name).toEqual(issue.description);
+      });
+    });
+
     describe('when an issue has a path but no line', () => {
       const issue = { description: 'Insecure Dependency', location: { path: 'Gemfile.lock' } };
 
-- 
GitLab


From 851d64e33dbbe8f240eafff8c4c42fc681df0d4a Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Wed, 15 Sep 2021 12:33:39 -0600
Subject: [PATCH 2/4] Changes from feedback

Simplify feature flag in actions spec
Use getCodeQualityViolations for query name in actions spec
Optionally chain nested data when dispatching success action
Use try/catch and async/await in fetchReport action
Move issue severity case conversion to computed
Don't capitalize query name in query file
---
 .../components/codequality_issue_body.vue     | 12 ++--
 .../get_code_quality_violations.query.graphql |  2 +-
 .../codequality_report/store/actions.js       | 63 +++++++++----------
 .../codequality_report/store/actions_spec.js  | 44 +++----------
 4 files changed, 45 insertions(+), 76 deletions(-)

diff --git a/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue b/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
index 7f6c17e9296f10..59bd54eab6031f 100644
--- a/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
+++ b/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
@@ -33,20 +33,20 @@ export default {
     issueName() {
       return `${this.severityLabel} - ${this.issue.name}`;
     },
+    issueSeverity() {
+      return this.issue.severity.toLowerCase();
+    },
     isStatusSuccess() {
       return this.status === STATUS_SUCCESS;
     },
     severityClass() {
-      return SEVERITY_CLASSES[this.issue.severity.toLowerCase()] || SEVERITY_CLASSES.unknown;
+      return SEVERITY_CLASSES[this.issueSeverity] || SEVERITY_CLASSES.unknown;
     },
     severityIcon() {
-      return SEVERITY_ICONS[this.issue.severity.toLowerCase()] || SEVERITY_ICONS.unknown;
+      return SEVERITY_ICONS[this.issueSeverity] || SEVERITY_ICONS.unknown;
     },
     severityLabel() {
-      return (
-        this.$options.severityText[this.issue.severity.toLowerCase()] ||
-        this.$options.severityText.unknown
-      );
+      return this.$options.severityText[this.issueSeverity] || this.$options.severityText.unknown;
     },
   },
   severityText: {
diff --git a/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql b/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql
index bc4ff2ce5c7636..86c0b30612b58d 100644
--- a/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql
+++ b/ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql
@@ -1,4 +1,4 @@
-query GetCodeQualityViolations($projectPath: ID!, $iid: ID!, $first: Int, $after: String) {
+query getCodeQualityViolations($projectPath: ID!, $iid: ID!, $first: Int, $after: String) {
   project(fullPath: $projectPath) {
     pipeline(iid: $iid) {
       codeQualityReports(first: $first, after: $after) {
diff --git a/ee/app/assets/javascripts/codequality_report/store/actions.js b/ee/app/assets/javascripts/codequality_report/store/actions.js
index 722b8773a5b934..b56c6e74ed3d06 100644
--- a/ee/app/assets/javascripts/codequality_report/store/actions.js
+++ b/ee/app/assets/javascripts/codequality_report/store/actions.js
@@ -47,44 +47,37 @@ export const receiveReportSuccess = ({ state, commit }, data) => {
 };
 export const receiveReportError = ({ commit }, error) => commit(types.RECEIVE_REPORT_ERROR, error);
 
-export const fetchReport = ({ state, dispatch }) => {
-  dispatch('requestReport');
+export const fetchReport = async ({ state, dispatch }) => {
+  try {
+    dispatch('requestReport');
+    if (!state.blobPath) throw new Error();
 
-  if (gon.features?.graphqlCodeQualityFullReport) {
-    const { projectPath, pipelineIid, pageInfo } = state;
-    const variables = {
-      projectPath,
-      iid: pipelineIid,
-      first: pageInfo.first,
-      after: pageInfo.after,
-    };
+    if (gon.features?.graphqlCodeQualityFullReport) {
+      const { projectPath, pipelineIid, pageInfo } = state;
+      const variables = {
+        projectPath,
+        iid: pipelineIid,
+        first: pageInfo.first,
+        after: pageInfo.after,
+      };
 
-    return gqClient
-      .query({
-        query: getCodeQualityViolations,
-        variables,
-      })
-      .then(({ data }) => {
-        if (!state.blobPath) throw new Error();
-        dispatch('receiveReportSuccess', data.project.pipeline.codeQualityReports);
-      })
-      .catch((error) => {
-        dispatch('receiveReportError', error);
-        createFlash({
-          message: s__('ciReport|There was an error fetching the codequality report.'),
+      await gqClient
+        .query({
+          query: getCodeQualityViolations,
+          variables,
+        })
+        .then(({ data }) => {
+          dispatch('receiveReportSuccess', data.project?.pipeline?.codeQualityReports);
         });
+    } else {
+      await axios.get(state.endpoint).then(({ data }) => {
+        dispatch('receiveReportSuccess', data);
       });
-  }
-  return axios
-    .get(state.endpoint)
-    .then(({ data }) => {
-      if (!state.blobPath) throw new Error();
-      dispatch('receiveReportSuccess', data);
-    })
-    .catch((error) => {
-      dispatch('receiveReportError', error);
-      createFlash({
-        message: s__('ciReport|There was an error fetching the codequality report.'),
-      });
+    }
+  } catch (error) {
+    dispatch('receiveReportError', error);
+    createFlash({
+      message: s__('ciReport|There was an error fetching the codequality report.'),
     });
+  }
 };
diff --git a/ee/spec/frontend/codequality_report/store/actions_spec.js b/ee/spec/frontend/codequality_report/store/actions_spec.js
index 00a288060010bd..3bc6aae397e668 100644
--- a/ee/spec/frontend/codequality_report/store/actions_spec.js
+++ b/ee/spec/frontend/codequality_report/store/actions_spec.js
@@ -1,5 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
-import codeQualityQuery from 'ee/codequality_report/graphql/queries/get_code_quality_violations.query.graphql';
+import getCodeQualityViolations from 'ee/codequality_report/graphql/queries/get_code_quality_violations.query.graphql';
 import * as actions from 'ee/codequality_report/store/actions';
 import { VIEW_EVENT_NAME } from 'ee/codequality_report/store/constants';
 import * as types from 'ee/codequality_report/store/mutation_types';
@@ -33,6 +33,7 @@ describe('Codequality report actions', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
     state = defaultState;
+    window.gon = { features: { graphqlCodeQualityFullReport: false } };
   });
 
   afterEach(() => {
@@ -41,9 +42,6 @@ describe('Codequality report actions', () => {
 
   describe('setPage', () => {
     it('sets the page number with feature flag disabled', (done) => {
-      const origGon = window.gon;
-      window.gon = { features: { graphqlCodeQualityFullReport: false } };
-
       return testAction(
         actions.setPage,
         12,
@@ -51,13 +49,10 @@ describe('Codequality report actions', () => {
         [{ type: types.SET_PAGE, payload: { page: 12 } }],
         [],
         done,
-      ).then(() => {
-        window.gon = origGon;
-      });
+      );
     });
 
     it('sets the page number with feature flag enabled', (done) => {
-      const origGon = window.gon;
       window.gon = { features: { graphqlCodeQualityFullReport: true } };
 
       return testAction(
@@ -67,9 +62,7 @@ describe('Codequality report actions', () => {
         [{ type: types.SET_PAGE, payload: { after: '', currentPage: 12 } }],
         [{ type: 'fetchReport' }],
         done,
-      ).then(() => {
-        window.gon = origGon;
-      });
+      );
     });
   });
 
@@ -87,9 +80,6 @@ describe('Codequality report actions', () => {
 
   describe('receiveReportSuccess', () => {
     it('parses the list of issues from the report with feature flag disabled', (done) => {
-      const origGon = window.gon;
-      window.gon = { features: { graphqlCodeQualityFullReport: false } };
-
       return testAction(
         actions.receiveReportSuccess,
         unparsedIssues,
@@ -97,13 +87,10 @@ describe('Codequality report actions', () => {
         [{ type: types.RECEIVE_REPORT_SUCCESS, payload: parsedIssues }],
         [],
         done,
-      ).then(() => {
-        window.gon = origGon;
-      });
+      );
     });
 
     it('parses the list of issues from the report with feature flag enabled', (done) => {
-      const origGon = window.gon;
       window.gon = { features: { graphqlCodeQualityFullReport: true } };
 
       const data = {
@@ -119,9 +106,7 @@ describe('Codequality report actions', () => {
         [{ type: types.RECEIVE_REPORT_SUCCESS_GRAPHQL, payload: { data, parsedIssues } }],
         [],
         done,
-      ).then(() => {
-        window.gon = origGon;
-      });
+      );
     });
   });
 
@@ -145,9 +130,6 @@ describe('Codequality report actions', () => {
       });
 
       it('fetches the report', (done) => {
-        const origGon = window.gon;
-        window.gon = { features: { graphqlCodeQualityFullReport: false } };
-
         return testAction(
           actions.fetchReport,
           null,
@@ -155,9 +137,7 @@ describe('Codequality report actions', () => {
           [],
           [{ type: 'requestReport' }, { type: 'receiveReportSuccess', payload: unparsedIssues }],
           done,
-        ).then(() => {
-          window.gon = origGon;
-        });
+        );
       });
 
       it('shows a flash message when there is an error', (done) => {
@@ -197,12 +177,10 @@ describe('Codequality report actions', () => {
       beforeEach(() => {
         jest.spyOn(gqClient, 'query').mockResolvedValue(mockGraphqlResponse);
         state.paginationData = mockGraphqlPagination;
+        window.gon = { features: { graphqlCodeQualityFullReport: true } };
       });
 
       it('fetches the report', () => {
-        const origGon = window.gon;
-        window.gon = { features: { graphqlCodeQualityFullReport: true } };
-
         return testAction(
           actions.fetchReport,
           null,
@@ -217,13 +195,11 @@ describe('Codequality report actions', () => {
           ],
           () => {
             expect(gqClient.query).toHaveBeenCalledWith({
-              query: codeQualityQuery,
+              query: getCodeQualityViolations,
               variables: { after: '', first: 25, iid: null, projectPath: null },
             });
           },
-        ).then(() => {
-          window.gon = origGon;
-        });
+        );
       });
     });
 
-- 
GitLab


From 59fbd3504e36aa42bd97dbec91f75d41dfe73709 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Fri, 17 Sep 2021 17:41:16 -0600
Subject: [PATCH 3/4] More changes from feedback

Improve/add tests for GraphQL cases in setPage
Remove no cache policy from GraphQL client
Add comment about issue file path
---
 .../store/utils/codequality_parser.js         |  1 +
 .../codequality_report/store/utils.js         |  9 +---
 .../codequality_report/store/actions_spec.js  | 51 +++++++++++++++----
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js
index 188312d64cbfbc..417297df43cc04 100644
--- a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js
+++ b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_parser.js
@@ -1,5 +1,6 @@
 export const parseCodeclimateMetrics = (issues = [], blobPath = '') => {
   return issues.map((issue) => {
+    // the `file_path` attribute from the artifact is returned as `file` by GraphQL
     const issuePath = issue.file_path || issue.path;
     const parsedIssue = {
       name: issue.description,
diff --git a/ee/app/assets/javascripts/codequality_report/store/utils.js b/ee/app/assets/javascripts/codequality_report/store/utils.js
index 9f4f0a15d930b6..796884592376ff 100644
--- a/ee/app/assets/javascripts/codequality_report/store/utils.js
+++ b/ee/app/assets/javascripts/codequality_report/store/utils.js
@@ -1,8 +1,3 @@
-import createGqClient, { fetchPolicies } from '~/lib/graphql';
+import createGqClient from '~/lib/graphql';
 
-export const gqClient = createGqClient(
-  {},
-  {
-    fetchPolicy: fetchPolicies.NO_CACHE,
-  },
-);
+export const gqClient = createGqClient();
diff --git a/ee/spec/frontend/codequality_report/store/actions_spec.js b/ee/spec/frontend/codequality_report/store/actions_spec.js
index 3bc6aae397e668..d156e412fab283 100644
--- a/ee/spec/frontend/codequality_report/store/actions_spec.js
+++ b/ee/spec/frontend/codequality_report/store/actions_spec.js
@@ -52,17 +52,48 @@ describe('Codequality report actions', () => {
       );
     });
 
-    it('sets the page number with feature flag enabled', (done) => {
-      window.gon = { features: { graphqlCodeQualityFullReport: true } };
+    describe('with the feature flag enabled', () => {
+      let mockPageInfo;
 
-      return testAction(
-        actions.setPage,
-        12,
-        state,
-        [{ type: types.SET_PAGE, payload: { after: '', currentPage: 12 } }],
-        [{ type: 'fetchReport' }],
-        done,
-      );
+      beforeEach(() => {
+        window.gon = { features: { graphqlCodeQualityFullReport: true } };
+        mockPageInfo = {
+          ...mockGraphqlPagination,
+          currentPage: 11,
+        };
+      });
+
+      it('sets the next page number', (done) => {
+        return testAction(
+          actions.setPage,
+          12,
+          { ...state, pageInfo: mockPageInfo },
+          [
+            {
+              type: types.SET_PAGE,
+              payload: { after: mockGraphqlPagination.endCursor, currentPage: 12 },
+            },
+          ],
+          [{ type: 'fetchReport' }],
+          done,
+        );
+      });
+
+      it('sets the previous page number', (done) => {
+        return testAction(
+          actions.setPage,
+          10,
+          { ...state, pageInfo: mockPageInfo },
+          [
+            {
+              type: types.SET_PAGE,
+              payload: { after: mockGraphqlPagination.startCursor, currentPage: 10 },
+            },
+          ],
+          [{ type: 'fetchReport' }],
+          done,
+        );
+      });
     });
   });
 
-- 
GitLab


From 21f69dcf01e764eb83fa94481e9c6b79a9c382e7 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Mon, 20 Sep 2021 12:56:20 -0600
Subject: [PATCH 4/4] Change milestone to 14.4

---
 .../development/graphql_code_quality_full_report.yml            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/config/feature_flags/development/graphql_code_quality_full_report.yml b/ee/config/feature_flags/development/graphql_code_quality_full_report.yml
index 06e462f012342b..e7944f4cd9ab5f 100644
--- a/ee/config/feature_flags/development/graphql_code_quality_full_report.yml
+++ b/ee/config/feature_flags/development/graphql_code_quality_full_report.yml
@@ -2,7 +2,7 @@
 name: graphql_code_quality_full_report
 introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/69917
 rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/340525
-milestone: '14.3'
+milestone: '14.4'
 type: development
 group: group::testing
 default_enabled: false
-- 
GitLab