Add test plan test cases pagination

Author: artem-blazhko

app/src/common/urls.js

@@ -381,8 +381,8 @@ export const URLS = {
     `${urlBase}project/${projectKey}/tms/test-case/batch/duplicate`,
   testCases: (projectKey, query = {}) =>
     `${urlBase}project/${projectKey}/tms/test-case${getQueryParams(query)}`,
-  testPlanTestCases: (projectKey, id) =>
-    `${urlBase}project/${projectKey}/tms/test-plan/${id}/test-case`,
+  testPlanTestCases: (projectKey, id, query = {}) =>
+    `${urlBase}project/${projectKey}/tms/test-plan/${id}/test-case${getQueryParams(query)}`,
   testPlan: (projectKey, query = {}) =>
     `${urlBase}project/${projectKey}/tms/test-plan${getQueryParams(query)}`,
   testPlanTestCasesBatch: (projectKey, testPlanId) =>

app/src/common/utils/getRouterParams.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getStorageItem } from 'common/utils/storageUtils';
+import { queryParamsType } from 'types/common';
+
+interface UserSettings {
+  [key: string]: string | number | undefined;
+}
+
+type RouterParams = {
+  limit?: number | string;
+  offset?: number | string;
+};
+
+type GetRouterParamsType = {
+  state: {
+    user?: {
+      info?: {
+        userId?: string;
+      };
+    };
+    location: {
+      query?: queryParamsType;
+    };
+  };
+  namespace: string;
+  defaultParams: queryParamsType;
+};
+
+export const getRouterParams = ({
+  state,
+  namespace,
+  defaultParams,
+}: GetRouterParamsType): RouterParams => {
+  const userData = getStorageItem(`${state.user?.info?.userId}_settings`) as
+    | UserSettings
+    | undefined;
+  const savedLimit = userData ? userData[`${namespace}PageSize`] : undefined;
+  const query = state.location?.query;
+  const { offset } = query || defaultParams;
+  const limit = query?.limit || savedLimit || defaultParams.limit;
+
+  return { offset, limit };
+};

app/src/common/utils/index.js

@@ -68,3 +68,4 @@ export { delay, delayedPut } from './delay';
 export { createClassnames } from './createClassnames';
 export { commonValidators } from './validation';
 export { copyToClipboard } from './clipboard';
+export { getRouterParams } from './getRouterParams';

app/src/controllers/pages/typed-selectors.ts

@@ -16,17 +16,23 @@
 
 import { isString } from 'es-toolkit';
 
-type LocationInfo = {
+export type LocationInfo = {
   payload: {
     testCasePageRoute: string;
     organizationSlug: string;
     projectSlug: string;
+    testPlanId?: number;
   };
   type?: string;
   query?: {
     offset: string;
     limit: string;
   };
+  prev?: {
+    payload?: {
+      testPlanId?: number;
+    };
+  };
 };
 
 type State = {

app/src/controllers/testPlan/actionCreators.ts

@@ -17,12 +17,14 @@
 import { GET_TEST_PLANS, GET_TEST_PLAN } from './constants';
 
 export interface GetTestPlansParams {
-  offset?: number;
-  limit?: number;
+  offset?: string | number;
+  limit?: string | number;
 }
 
 export interface GetTestPlanParams {
   testPlanId: string | number;
+  offset?: string | number;
+  limit?: string | number;
 }
 
 export const getTestPlansAction = (params?: GetTestPlansParams) => ({

app/src/controllers/testPlan/constants.ts

@@ -29,6 +29,10 @@ export const defaultQueryParams = {
   offset: 0,
 };
 export const defaultSortParam = 'createdDate,desc';
+export const defaultTestPlanTestCasesQueryParams = {
+  limit: 50,
+  offset: 0,
+};
 
 export type TestPlanDto = {
   id: number;

app/src/controllers/testPlan/reducer.ts

@@ -35,6 +35,7 @@ const reducer = combineReducers({
   testPlanFolders: fetchReducer(TEST_PLAN_FOLDERS_NAMESPACE, { initialState: null }),
   testPlanTestCases: fetchReducer(TEST_PLAN_TEST_CASES_NAMESPACE, { initialState: null }),
   isLoadingActive: loadingReducer(ACTIVE_TEST_PLAN_NAMESPACE),
+  isLoadingTestPlanTestCases: loadingReducer(TEST_PLAN_TEST_CASES_NAMESPACE),
 });
 
 export const testPlanReducer = createPageScopedReducer(reducer, [

app/src/controllers/testPlan/sagas.ts

@@ -24,7 +24,8 @@ import { FETCH_START } from 'controllers/fetch/constants';
 import { BaseAppState } from 'types/store';
 import { showErrorNotification } from 'controllers/notification';
 import { projectKeySelector } from 'controllers/project';
-import { PROJECT_TEST_PLANS_PAGE } from 'controllers/pages';
+import { locationSelector, PROJECT_TEST_PLANS_PAGE } from 'controllers/pages';
+import { LocationInfo } from 'controllers/pages/typed-selectors';
 
 import {
   GET_TEST_PLANS,
@@ -37,6 +38,7 @@ import {
   ACTIVE_TEST_PLAN_NAMESPACE,
   TEST_PLAN_FOLDERS_NAMESPACE,
   TEST_PLAN_TEST_CASES_NAMESPACE,
+  defaultTestPlanTestCasesQueryParams,
 } from './constants';
 import { GetTestPlansParams, GetTestPlanParams } from './actionCreators';
 import { Page } from '../../types/common';
@@ -87,39 +89,62 @@ function* getTestPlans(action: GetTestPlansAction): Generator {
 }
 
 function* getTestPlan(action: GetTestPlanAction): Generator {
+  const projectKey = (yield select(projectKeySelector)) as string;
+  const location = (yield select(locationSelector)) as LocationInfo;
+  const { testPlanId, offset, limit } = action.payload;
+  const params = {
+    limit: limit || defaultTestPlanTestCasesQueryParams.limit,
+    offset: offset || defaultTestPlanTestCasesQueryParams.offset,
+  };
+
   try {
-    const projectKey = (yield select(projectKeySelector)) as string;
-    const { testPlanId } = action.payload;
+    if (
+      location.query?.offset !== String(offset) ||
+      location.query?.limit !== String(limit) ||
+      String(location?.prev?.payload?.testPlanId) !== String(location?.payload?.testPlanId)
+    ) {
+      yield put({
+        type: FETCH_START,
+        payload: { projectKey },
+        meta: { namespace: ACTIVE_TEST_PLAN_NAMESPACE },
+      });
+
+      const data = (yield call(fetch, URLS.testPlanById(projectKey, testPlanId))) as TestPlanDto;
+      const planFolders = (yield call(
+        fetch,
+        URLS.testFolders(projectKey, { 'filter.eq.testPlanId': testPlanId }),
+      )) as TestPlanFoldersDto;
+
+      yield put(fetchSuccessAction(ACTIVE_TEST_PLAN_NAMESPACE, data));
+      yield put(fetchSuccessAction(TEST_PLAN_FOLDERS_NAMESPACE, planFolders));
+    }
+  } catch (error) {
+    const locationPayload = (yield select(
+      (state: BaseAppState) => state.location?.payload,
+    )) as BaseAppState['location']['payload'];
+
+    yield put(fetchErrorAction(ACTIVE_TEST_PLAN_NAMESPACE, error));
+    yield put({
+      type: PROJECT_TEST_PLANS_PAGE,
+      payload: locationPayload,
+    });
+  }
 
+  try {
     yield put({
       type: FETCH_START,
       payload: { projectKey },
-      meta: { namespace: ACTIVE_TEST_PLAN_NAMESPACE },
+      meta: { namespace: TEST_PLAN_TEST_CASES_NAMESPACE },
     });
 
-    const data = (yield call(fetch, URLS.testPlanById(projectKey, testPlanId))) as TestPlanDto;
-    const planFolders = (yield call(
-      fetch,
-      URLS.testFolders(projectKey, { 'filter.eq.testPlanId': testPlanId }),
-    )) as TestPlanFoldersDto;
     const planTestCases = (yield call(
       fetch,
-      URLS.testPlanTestCases(projectKey, testPlanId),
+      URLS.testPlanTestCases(projectKey, testPlanId, params),
     )) as TestPlanTestCaseDto;
 
-    yield put(fetchSuccessAction(ACTIVE_TEST_PLAN_NAMESPACE, data));
-    yield put(fetchSuccessAction(TEST_PLAN_FOLDERS_NAMESPACE, planFolders));
     yield put(fetchSuccessAction(TEST_PLAN_TEST_CASES_NAMESPACE, planTestCases));
   } catch (error) {
-    const locationPayload = (yield select(
-      (state: BaseAppState) => state.location?.payload,
-    )) as BaseAppState['location']['payload'];
-
-    yield put(fetchErrorAction(ACTIVE_TEST_PLAN_NAMESPACE, error));
-    yield put({
-      type: PROJECT_TEST_PLANS_PAGE,
-      payload: locationPayload,
-    });
+    yield put(fetchErrorAction(TEST_PLAN_TEST_CASES_NAMESPACE, error));
   }
 }
 

app/src/controllers/testPlan/selectors.ts

@@ -30,6 +30,7 @@ export interface TestPlanState {
   testPlanFolders?: TestPlanFoldersDto | null;
   testPlanTestCases?: TestPlanTestCaseDto | null;
   isLoadingActive?: boolean;
+  isLoadingTestPlanTestCases?: boolean;
 }
 
 interface RootState {
@@ -59,6 +60,9 @@ export const EMPTY_TEST_CASES: ExtendedTestCase[] = [];
 export const testPlanTestCasesSelector = (state: RootState) =>
   testPlanSelector(state).testPlanTestCases?.content || EMPTY_TEST_CASES;
 
+export const testPlanTestCasesPageSelector = (state: RootState) =>
+  testPlanSelector(state).testPlanTestCases?.page;
+
 export const testPlanTransformedFoldersSelector = (state: RootState) =>
   transformFoldersToDisplay(testPlanFoldersSelector(state));
 

app/src/hooks/useTypedSelector.ts

@@ -68,6 +68,9 @@ export const useTestPlanLoading = () =>
 export const useActiveTestPlanLoading = () =>
   useTestPlanSelector((state) => state.testPlan?.isLoadingActive || false);
 
+export const useTestPlanTestCasesLoading = () =>
+  useTestPlanSelector((state) => state.testPlan?.isLoadingTestPlanTestCases || false);
+
 export const useTestPlanById = (testPlanId: string) =>
   useTestPlanSelector(testPlanByIdSelector(testPlanId));