Add page params to group/project issues list refactor

Add url params for pagination so the user can go back to the
same paginated position.

Behind feature flag `vue_issues_list` defaulted to off

https://gitlab.com/gitlab-org/gitlab/-/issues/322755

app/assets/javascripts/issues/list/components/issues_list_app.vue

@@ -42,6 +42,8 @@ import {
   ISSUE_REFERENCE,
   MAX_LIST_SIZE,
   PAGE_SIZE,
+  PARAM_PAGE_AFTER,
+  PARAM_PAGE_BEFORE,
   PARAM_STATE,
   RELATIVE_POSITION_ASC,
   TOKEN_TYPE_ASSIGNEE,
@@ -135,6 +137,8 @@ export default {
     },
   },
   data() {
+    const pageAfter = getParameterByName(PARAM_PAGE_AFTER);
+    const pageBefore = getParameterByName(PARAM_PAGE_BEFORE);
     const state = getParameterByName(PARAM_STATE);
     const defaultSortKey = state === IssuableStates.Closed ? UPDATED_DESC : CREATED_DESC;
     const dashboardSortKey = getSortKey(this.initialSort);
@@ -166,7 +170,7 @@ export default {
       issuesCounts: {},
       issuesError: null,
       pageInfo: {},
-      pageParams: getInitialPageParams(sortKey),
+      pageParams: getInitialPageParams(sortKey, pageAfter, pageBefore),
       showBulkEditSidebar: false,
       sortKey,
       state: state || IssuableStates.Opened,
@@ -237,7 +241,12 @@ export default {
       return this.isProject ? ITEM_TYPE.PROJECT : ITEM_TYPE.GROUP;
     },
     hasSearch() {
-      return this.searchQuery || Object.keys(this.urlFilterParams).length;
+      return (
+        this.searchQuery ||
+        Object.keys(this.urlFilterParams).length ||
+        this.pageParams.afterCursor ||
+        this.pageParams.beforeCursor
+      );
     },
     isBulkEditButtonDisabled() {
       return this.showBulkEditSidebar || !this.issues.length;
@@ -394,6 +403,8 @@ export default {
     },
     urlParams() {
       return {
+        page_after: this.pageParams.afterCursor,
+        page_before: this.pageParams.beforeCursor,
         search: this.searchQuery,
         sort: urlSortParams[this.sortKey],
         state: this.state,

app/assets/javascripts/issues/list/constants.js

@@ -56,17 +56,11 @@ export const ISSUE_REFERENCE = /^#\d+$/;
 export const MAX_LIST_SIZE = 10;
 export const PAGE_SIZE = 20;
 export const PAGE_SIZE_MANUAL = 100;
+export const PARAM_PAGE_AFTER = 'page_after';
+export const PARAM_PAGE_BEFORE = 'page_before';
 export const PARAM_STATE = 'state';
 export const RELATIVE_POSITION = 'relative_position';
 
-export const defaultPageSizeParams = {
-  firstPageSize: PAGE_SIZE,
-};
-
-export const largePageSizeParams = {
-  firstPageSize: PAGE_SIZE_MANUAL,
-};
-
 export const BLOCKING_ISSUES_ASC = 'BLOCKING_ISSUES_ASC';
 export const BLOCKING_ISSUES_DESC = 'BLOCKING_ISSUES_DESC';
 export const CREATED_ASC = 'CREATED_ASC';

app/assets/javascripts/issues/list/utils.js

@@ -10,16 +10,16 @@ import {
   BLOCKING_ISSUES_DESC,
   CREATED_ASC,
   CREATED_DESC,
-  defaultPageSizeParams,
   DUE_DATE_ASC,
   DUE_DATE_DESC,
   filters,
   LABEL_PRIORITY_ASC,
   LABEL_PRIORITY_DESC,
-  largePageSizeParams,
   MILESTONE_DUE_ASC,
   MILESTONE_DUE_DESC,
   NORMAL_FILTER,
+  PAGE_SIZE,
+  PAGE_SIZE_MANUAL,
   POPULARITY_ASC,
   POPULARITY_DESC,
   PRIORITY_ASC,
@@ -43,8 +43,11 @@ import {
   WEIGHT_DESC,
 } from './constants';
 
-export const getInitialPageParams = (sortKey) =>
-  sortKey === RELATIVE_POSITION_ASC ? largePageSizeParams : defaultPageSizeParams;
+export const getInitialPageParams = (sortKey, afterCursor, beforeCursor) => ({
+  firstPageSize: sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE,
+  afterCursor,
+  beforeCursor,
+});
 
 export const getSortKey = (sort) =>
   Object.keys(urlSortParams).find((key) => urlSortParams[key] === sort);

spec/frontend/issues/list/components/issues_list_app_spec.js

@@ -294,6 +294,28 @@ describe('CE IssuesListApp component', () => {
   });
 
   describe('initial url params', () => {
+    describe('page', () => {
+      it('page_after is set from the url params', () => {
+        setWindowLocation('?page_after=randomCursorString');
+
+        wrapper = mountComponent();
+
+        expect(findIssuableList().props('urlParams')).toMatchObject({
+          page_after: 'randomCursorString',
+        });
+      });
+
+      it('page_before is set from the url params', () => {
+        setWindowLocation('?page_before=anotherRandomCursorString');
+
+        wrapper = mountComponent();
+
+        expect(findIssuableList().props('urlParams')).toMatchObject({
+          page_before: 'anotherRandomCursorString',
+        });
+      });
+    });
+
     describe('search', () => {
       it('is set from the url params', () => {
         setWindowLocation(locationSearch);
@@ -881,7 +903,12 @@ describe('CE IssuesListApp component', () => {
         });
 
         it('does not update IssuableList with url params ', async () => {
-          const defaultParams = { sort: 'created_date', state: 'opened' };
+          const defaultParams = {
+            page_after: null,
+            page_before: null,
+            sort: 'created_date',
+            state: 'opened',
+          };
 
           expect(findIssuableList().props('urlParams')).toEqual(defaultParams);
         });

spec/frontend/issues/list/utils_spec.js

@@ -9,8 +9,8 @@ import {
   urlParamsWithSpecialValues,
 } from 'jest/issues/list/mock_data';
 import {
-  defaultPageSizeParams,
-  largePageSizeParams,
+  PAGE_SIZE,
+  PAGE_SIZE_MANUAL,
   RELATIVE_POSITION_ASC,
   urlSortParams,
 } from '~/issues/list/constants';
@@ -29,10 +29,37 @@ describe('getInitialPageParams', () => {
   it.each(Object.keys(urlSortParams))(
     'returns the correct page params for sort key %s',
     (sortKey) => {
-      const expectedPageParams =
-        sortKey === RELATIVE_POSITION_ASC ? largePageSizeParams : defaultPageSizeParams;
+      const firstPageSize = sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE;
 
-      expect(getInitialPageParams(sortKey)).toBe(expectedPageParams);
+      expect(getInitialPageParams(sortKey)).toEqual({ firstPageSize });
+    },
+  );
+
+  it.each(Object.keys(urlSortParams))(
+    'returns the correct page params for sort key %s with afterCursor',
+    (sortKey) => {
+      const firstPageSize = sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE;
+      const afterCursor = 'randomCursorString';
+      const beforeCursor = undefined;
+
+      expect(getInitialPageParams(sortKey, afterCursor, beforeCursor)).toEqual({
+        firstPageSize,
+        afterCursor,
+      });
+    },
+  );
+
+  it.each(Object.keys(urlSortParams))(
+    'returns the correct page params for sort key %s with beforeCursor',
+    (sortKey) => {
+      const firstPageSize = sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE;
+      const afterCursor = undefined;
+      const beforeCursor = 'anotherRandomCursorString';
+
+      expect(getInitialPageParams(sortKey, afterCursor, beforeCursor)).toEqual({
+        firstPageSize,
+        beforeCursor,
+      });
     },
   );
 });