Paginate codequality issues

Keep frozen list of all issues in store
Display only one page of 25 issues at a time

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

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } 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 PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 import { n__, s__, sprintf } from '~/locale';
 
 import createStore from './store';
@@ -11,6 +12,7 @@ export default {
   store: createStore(),
   components: {
     ReportSection,
+    PaginationLinks,
   },
   mixins: [reportsMixin],
   componentNames,
@@ -25,27 +27,23 @@ export default {
     },
   },
   computed: {
-    ...mapState([
-      'isLoadingCodequality',
-      'loadingCodequalityFailed',
-      'codeQualityIssues',
-      'endpoint',
-    ]),
+    ...mapState(['isLoadingCodequality', 'loadingCodequalityFailed', 'endpoint', 'pageInfo']),
+    ...mapGetters(['codequalityIssues', 'codequalityIssueTotal']),
     hasCodequalityIssues() {
-      return this.codeQualityIssues.length > 0;
+      return this.codequalityIssueTotal > 0;
     },
     codequalityText() {
       const text = [];
-      const { codeQualityIssues } = this;
+      const { codequalityIssueTotal } = this;
 
-      if (!codeQualityIssues.length) {
+      if (codequalityIssueTotal === 0) {
         return s__('ciReport|No code quality issues found');
-      } else if (codeQualityIssues.length) {
+      } else if (codequalityIssueTotal > 0) {
         return sprintf(s__('ciReport|Found %{issuesWithCount}'), {
           issuesWithCount: n__(
             '%d code quality issue',
             '%d code quality issues',
-            codeQualityIssues.length,
+            codequalityIssueTotal,
           ),
         });
       }
@@ -62,7 +60,7 @@ export default {
     this.fetchReport();
   },
   methods: {
-    ...mapActions(['setEndpoint', 'setBlobPath', 'fetchReport']),
+    ...mapActions(['setEndpoint', 'setBlobPath', 'setPage', 'fetchReport']),
     translateText(type) {
       return {
         error: sprintf(s__('ciReport|Failed to load %{reportName} report'), {
@@ -85,11 +83,16 @@ export default {
       :loading-text="translateText('codeclimate').loading"
       :error-text="translateText('codeclimate').error"
       :success-text="codequalityText"
-      :unresolved-issues="codeQualityIssues"
+      :unresolved-issues="codequalityIssues"
       :resolved-issues="[]"
       :has-issues="hasCodequalityIssues"
       :component="$options.componentNames.CodequalityIssueBody"
       class="codequality-report"
     />
+    <pagination-links
+      :change="setPage"
+      :page-info="pageInfo"
+      class="d-flex justify-content-center prepend-top-default"
+    />
   </div>
 </template>

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

@@ -8,6 +8,8 @@ import MergeRequestStore from 'ee/vue_merge_request_widget/stores/mr_widget_stor
 export const setEndpoint = ({ commit }, data) => commit(types.SET_ENDPOINT, data);
 export const setBlobPath = ({ commit }, data) => commit(types.SET_BLOB_PATH, data);
 
+export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
+
 export const requestReport = ({ commit }) => commit(types.REQUEST_REPORT);
 export const receiveReportSuccess = ({ state, commit }, data) => {
   const parsedIssues = MergeRequestStore.parseCodeclimateMetrics(data, state.blobPath);

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

+export const codequalityIssues = state => {
+  const { page, perPage } = state.pageInfo;
+  const start = (page - 1) * perPage;
+  return state.allCodequalityIssues.slice(start, start + perPage);
+};
+
+export const codequalityIssueTotal = state => state.allCodequalityIssues.length;
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};

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

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import state from './state';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 
 Vue.use(Vuex);
@@ -9,6 +10,7 @@ Vue.use(Vuex);
 export default () =>
   new Vuex.Store({
     actions,
+    getters,
     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 SET_PAGE = 'SET_PAGE';
 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

@@ -7,20 +7,34 @@ export default {
   [types.SET_BLOB_PATH](state, blobPath) {
     Object.assign(state, { blobPath });
   },
+  [types.SET_PAGE](state, page) {
+    Object.assign(state, {
+      pageInfo: Object.assign(state.pageInfo, {
+        page,
+      }),
+    });
+  },
   [types.REQUEST_REPORT](state) {
     Object.assign(state, { isLoadingCodequality: true });
   },
-  [types.RECEIVE_REPORT_SUCCESS](state, issues) {
+  [types.RECEIVE_REPORT_SUCCESS](state, allCodequalityIssues) {
     Object.assign(state, {
       isLoadingCodequality: false,
-      codeQualityIssues: issues,
+      allCodequalityIssues: Object.freeze(allCodequalityIssues),
+      pageInfo: Object.assign(state.pageInfo, {
+        total: allCodequalityIssues.length,
+      }),
     });
   },
-  [types.RECEIVE_REPORT_ERROR](state, error) {
+  [types.RECEIVE_REPORT_ERROR](state, codeQualityError) {
     Object.assign(state, {
       isLoadingCodequality: false,
+      allCodequalityIssues: [],
       loadingCodequalityFailed: true,
-      codeQualityError: error,
+      codeQualityError,
+      pageInfo: Object.assign(state.pageInfo, {
+        total: 0,
+      }),
     });
   },
 };

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

 export default () => ({
   endpoint: '',
-  codeQualityIssues: [],
+  allCodequalityIssues: [],
   isLoadingCodequality: false,
   loadingCodequalityFailed: false,
   codeQualityError: null,
+  pageInfo: {
+    page: 1,
+    perPage: 25,
+    total: 0,
+  },
 });