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

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: {

ee/app/assets/javascripts/codequality_report/graphql/queries/get_code_quality_violations.query.graphql

-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) {

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

ee/spec/frontend/codequality_report/store/actions_spec.js

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