Fix compliance report prev page always returning to first page

Clicking the prev page now returns to the previous page instead of
always returning to the first page.

ee/app/assets/javascripts/compliance_dashboard/components/report.vue

@@ -10,7 +10,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import getComplianceViolationsQuery from '../graphql/compliance_violations.query.graphql';
 import { mapViolations } from '../graphql/mappers';
-import { DEFAULT_SORT, GRAPHQL_PAGE_SIZE } from '../constants';
+import { DEFAULT_SORT, GRAPHQL_PAGE_SIZE, DEFAULT_PAGINATION_CURSORS } from '../constants';
 import { parseViolationsQueryFilter } from '../utils';
 import MergeCommitsExportButton from './merge_requests/merge_commits_export_button.vue';
 import MergeRequestDrawer from './drawer.vue';
@@ -67,8 +67,7 @@ export default {
       sortDesc,
       sortParam,
       paginationCursors: {
-        before: null,
-        after: null,
+        ...DEFAULT_PAGINATION_CURSORS,
       },
     };
   },
@@ -80,7 +79,6 @@ export default {
           fullPath: this.groupPath,
           filters: parseViolationsQueryFilter(this.urlQuery),
           sort: this.sortParam,
-          first: GRAPHQL_PAGE_SIZE,
           ...this.paginationCursors,
         };
       },
@@ -149,20 +147,21 @@ export default {
     },
     resetPagination() {
       this.paginationCursors = {
-        before: null,
-        after: null,
+        ...DEFAULT_PAGINATION_CURSORS,
       };
     },
     loadPrevPage(startCursor) {
       this.paginationCursors = {
         before: startCursor,
         after: null,
+        last: GRAPHQL_PAGE_SIZE,
       };
     },
     loadNextPage(endCursor) {
       this.paginationCursors = {
         before: null,
         after: endCursor,
+        first: GRAPHQL_PAGE_SIZE,
       };
     },
   },

ee/app/assets/javascripts/compliance_dashboard/constants.js

@@ -27,3 +27,9 @@ export const MERGE_REQUEST_VIOLATION_MESSAGES = {
 };
 
 export const DEFAULT_SORT = 'SEVERITY_LEVEL_DESC';
+
+export const DEFAULT_PAGINATION_CURSORS = {
+  before: null,
+  after: null,
+  first: GRAPHQL_PAGE_SIZE,
+};

ee/app/assets/javascripts/compliance_dashboard/graphql/compliance_violations.query.graphql

@@ -7,6 +7,7 @@ query getComplianceViolations(
   $after: String
   $before: String
   $first: Int
+  $last: Int
 ) {
   group(fullPath: $fullPath) {
     id
@@ -16,6 +17,7 @@ query getComplianceViolations(
       after: $after
       before: $before
       first: $first
+      last: $last
     ) {
       nodes {
         id

ee/spec/frontend/compliance_dashboard/components/report_spec.js

@@ -20,7 +20,11 @@ import UrlSync from '~/vue_shared/components/url_sync.vue';
 import { stubComponent } from 'helpers/stub_component';
 import { sortObjectToString } from '~/lib/utils/table_utility';
 import { parseViolationsQueryFilter } from 'ee/compliance_dashboard/utils';
-import { DEFAULT_SORT, GRAPHQL_PAGE_SIZE } from 'ee/compliance_dashboard/constants';
+import {
+  DEFAULT_SORT,
+  GRAPHQL_PAGE_SIZE,
+  DEFAULT_PAGINATION_CURSORS,
+} from 'ee/compliance_dashboard/constants';
 import { createComplianceViolationsResponse } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -158,9 +162,7 @@ describe('ComplianceReport component', () => {
         fullPath: groupPath,
         filters: parseViolationsQueryFilter(defaultFilterParams),
         sort: DEFAULT_SORT,
-        first: GRAPHQL_PAGE_SIZE,
-        after: null,
-        before: null,
+        ...DEFAULT_PAGINATION_CURSORS,
       });
     });
   });
@@ -182,9 +184,7 @@ describe('ComplianceReport component', () => {
         fullPath: groupPath,
         filters: parseViolationsQueryFilter(defaultFilterParams),
         sort,
-        first: GRAPHQL_PAGE_SIZE,
-        after: null,
-        before: null,
+        ...DEFAULT_PAGINATION_CURSORS,
       });
     });
   });
@@ -354,9 +354,7 @@ describe('ComplianceReport component', () => {
           fullPath: groupPath,
           filters: parseViolationsQueryFilter(query),
           sort: DEFAULT_SORT,
-          first: GRAPHQL_PAGE_SIZE,
-          after: null,
-          before: null,
+          ...DEFAULT_PAGINATION_CURSORS,
         });
       });
     });
@@ -384,9 +382,7 @@ describe('ComplianceReport component', () => {
           fullPath: groupPath,
           filters: parseViolationsQueryFilter(defaultFilterParams),
           sort: sortObjectToString(sortState),
-          first: GRAPHQL_PAGE_SIZE,
-          after: null,
-          before: null,
+          ...DEFAULT_PAGINATION_CURSORS,
         });
       });
     });
@@ -404,12 +400,12 @@ describe('ComplianceReport component', () => {
       });
 
       it.each`
-        event     | after    | before
-        ${'next'} | ${'foo'} | ${null}
-        ${'prev'} | ${null}  | ${'foo'}
+        event     | after    | before   | first                | last
+        ${'next'} | ${'foo'} | ${null}  | ${GRAPHQL_PAGE_SIZE} | ${undefined}
+        ${'prev'} | ${null}  | ${'foo'} | ${undefined}         | ${GRAPHQL_PAGE_SIZE}
       `(
         'fetches the $event page when the pagination emits "$event"',
-        async ({ event, after, before }) => {
+        async ({ event, after, before, first, last }) => {
           await findPagination().vm.$emit(event, after ?? before);
           await waitForPromises();
 
@@ -417,10 +413,11 @@ describe('ComplianceReport component', () => {
           expect(mockGraphQlSuccess).toHaveBeenNthCalledWith(2, {
             fullPath: groupPath,
             filters: parseViolationsQueryFilter(defaultFilterParams),
-            first: GRAPHQL_PAGE_SIZE,
             sort: DEFAULT_SORT,
             after,
             before,
+            first,
+            last,
           });
         },
       );
@@ -459,10 +456,8 @@ describe('ComplianceReport component', () => {
           expect(mockGraphQlSuccess).toHaveBeenNthCalledWith(3, {
             fullPath: groupPath,
             filters: parseViolationsQueryFilter(query),
-            first: GRAPHQL_PAGE_SIZE,
             sort: DEFAULT_SORT,
-            after: null,
-            before: null,
+            ...DEFAULT_PAGINATION_CURSORS,
           });
         });
       });