Use vuex store to manage codequality issues

Set the endpoint and blob path
Load the report and manage loading state

ee/app/assets/javascripts/codequality_report/codequality_report.vue

 <script>
-import axios from 'axios';
+import { mapActions, mapState } from 'vuex';
 import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 import { componentNames } from 'ee/reports/components/issue_body';
 import ReportSection from '~/reports/components/report_section.vue';
-import CodequalityIssueBody from 'ee/vue_merge_request_widget/components/codequality_issue_body.vue';
 import { n__, s__, sprintf } from '~/locale';
 
-import MergeRequestStore from 'ee/vue_merge_request_widget/stores/mr_widget_store';
+import createStore from './store';
 
 export default {
-  name: 'CodequalityReport',
+  store: createStore(),
   components: {
     ReportSection,
-    CodequalityIssueBody,
   },
   mixins: [reportsMixin],
   componentNames,
@@ -26,24 +24,29 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      issues: [],
-    };
-  },
   computed: {
+    ...mapState([
+      'isLoadingCodequality',
+      'loadingCodequalityFailed',
+      'codeQualityIssues',
+      'endpoint',
+    ]),
     hasCodequalityIssues() {
-      return this.issues.length > 0;
+      return this.codeQualityIssues.length > 0;
     },
     codequalityText() {
       const text = [];
-      const { issues } = this;
+      const { codeQualityIssues } = this;
 
-      if (!issues.length) {
+      if (!codeQualityIssues.length) {
         return s__('ciReport|No code quality issues found');
-      } else if (issues.length) {
+      } else if (codeQualityIssues.length) {
         return sprintf(s__('ciReport|Found %{issuesWithCount}'), {
-          issuesWithCount: n__('%d code quality issue', '%d code quality issues', issues.length),
+          issuesWithCount: n__(
+            '%d code quality issue',
+            '%d code quality issues',
+            codeQualityIssues.length,
+          ),
         });
       }
 
@@ -54,11 +57,12 @@ export default {
     },
   },
   created() {
-    return axios.get(this.codequalityReportDownloadPath).then(res => {
-      this.issues = MergeRequestStore.parseCodeclimateMetrics(res.data, this.blobPath);
-    });
+    this.setEndpoint(this.codequalityReportDownloadPath);
+    this.setBlobPath(this.blobPath);
+    this.fetchReport();
   },
   methods: {
+    ...mapActions(['setEndpoint', 'setBlobPath', 'fetchReport']),
     translateText(type) {
       return {
         error: sprintf(s__('ciReport|Failed to load %{reportName} report'), {
@@ -81,9 +85,9 @@ export default {
       :loading-text="translateText('codeclimate').loading"
       :error-text="translateText('codeclimate').error"
       :success-text="codequalityText"
-      :unresolved-issues="issues"
+      :unresolved-issues="codeQualityIssues"
       :resolved-issues="[]"
-      :has-issues="true"
+      :has-issues="hasCodequalityIssues"
       :component="$options.componentNames.CodequalityIssueBody"
       class="codequality-report"
     />

ee/app/assets/javascripts/codequality_report/store/actions.js

+import axios from '~/lib/utils/axios_utils';
+import * as types from './mutation_types';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+
+import MergeRequestStore from 'ee/vue_merge_request_widget/stores/mr_widget_store';
+
+export const setEndpoint = ({ commit }, data) => commit(types.SET_ENDPOINT, data);
+export const setBlobPath = ({ commit }, data) => commit(types.SET_BLOB_PATH, data);
+
+export const requestReport = ({ commit }) => commit(types.REQUEST_REPORT);
+export const receiveReportSuccess = ({ state, commit }, data) => {
+  const parsedIssues = MergeRequestStore.parseCodeclimateMetrics(data, state.blobPath);
+  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
+    .get(state.endpoint)
+    .then(({ data }) => {
+      if (!state.blobPath) throw new Error();
+      dispatch('receiveReportSuccess', data);
+    })
+    .catch(error => {
+      dispatch('receiveReportError', error);
+      createFlash(s__('ciReport|There was an error fetching the codequality report.'));
+    });
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};

ee/app/assets/javascripts/codequality_report/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state,
+  });

ee/app/assets/javascripts/codequality_report/store/mutation_types.js

+export const SET_ENDPOINT = 'SET_ENDPOINT';
+export const SET_BLOB_PATH = 'SET_BLOB_PATH';
+export const REQUEST_REPORT = 'REQUEST_REPORT';
+export const RECEIVE_REPORT_SUCCESS = 'RECEIVE_REPORT_SUCCESS';
+export const RECEIVE_REPORT_ERROR = 'RECEIVE_REPORT_ERROR';

ee/app/assets/javascripts/codequality_report/store/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_ENDPOINT](state, endpoint) {
+    Object.assign(state, { endpoint });
+  },
+  [types.SET_BLOB_PATH](state, blobPath) {
+    Object.assign(state, { blobPath });
+  },
+  [types.REQUEST_REPORT](state) {
+    Object.assign(state, { isLoadingCodequality: true });
+  },
+  [types.RECEIVE_REPORT_SUCCESS](state, issues) {
+    Object.assign(state, {
+      isLoadingCodequality: false,
+      codeQualityIssues: issues,
+    });
+  },
+  [types.RECEIVE_REPORT_ERROR](state, error) {
+    Object.assign(state, {
+      isLoadingCodequality: false,
+      loadingCodequalityFailed: true,
+      codeQualityError: error,
+    });
+  },
+};

ee/app/assets/javascripts/codequality_report/store/state.js

+export default () => ({
+  endpoint: '',
+  codeQualityIssues: [],
+  isLoadingCodequality: false,
+  loadingCodequalityFailed: false,
+  codeQualityError: null,
+});

locale/gitlab.pot

@@ -23145,6 +23145,9 @@ msgstr ""
 msgid "ciReport|There was an error dismissing the vulnerability. Please try again."
 msgstr ""
 
+msgid "ciReport|There was an error fetching the codequality report."
+msgstr ""
+
 msgid "ciReport|There was an error reverting the dismissal. Please try again."
 msgstr ""