fix: limit reset when no pagination bar (#10634)

frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx

@@ -1,5 +1,4 @@
 import type React from 'react';
-import { useEffect } from 'react';
 import { Box, Typography, Button, styled } from '@mui/material';
 import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender.tsx';
 import { ReactComponent as ArrowRight } from 'assets/icons/arrowRight.svg';
@@ -61,12 +60,6 @@ export const PaginationBar: React.FC<PaginationBarProps> = ({
     fetchNextPage,
     setPageLimit,
 }) => {
-    useEffect(() => {
-        if (![25, 50, 75, 100].includes(pageSize)) {
-            setPageLimit(25);
-        }
-    }, [pageSize]);
-
     const itemRange =
         totalItems !== undefined && pageSize && totalItems > 1
             ? `${pageIndex * pageSize + 1}-${Math.min(

frontend/src/component/events/EventLog/useEventLogSearch.ts

@@ -1,9 +1,4 @@
-import {
+import { encodeQueryParams, StringParam, withDefault } from 'use-query-params';
-    encodeQueryParams,
-    NumberParam,
-    StringParam,
-    withDefault,
-} from 'use-query-params';
 import { FilterItemParam } from 'utils/serializeQueryParams';
 import { usePersistentTableState } from 'hooks/usePersistentTableState';
 import mapValues from 'lodash.mapvalues';
@@ -11,6 +6,7 @@ import { useEventSearch } from 'hooks/api/getters/useEventSearch/useEventSearch'
 import type { SearchEventsParams } from 'openapi';
 import type { FilterItemParamHolder } from 'component/filter/Filters/Filters';
 import { format, subYears } from 'date-fns';
+import { SafeNumberParam } from 'utils/safeNumberParam';
 
 type Log =
     | { type: 'global' }
@@ -58,8 +54,8 @@ export const useEventLogSearch = (
     refreshInterval = 15 * 1000,
 ) => {
     const stateConfig = {
-        offset: withDefault(NumberParam, 0),
+        offset: withDefault(SafeNumberParam, 0),
-        limit: withDefault(NumberParam, DEFAULT_PAGE_SIZE),
+        limit: withDefault(SafeNumberParam, DEFAULT_PAGE_SIZE),
         query: StringParam,
         from: withDefault(FilterItemParam, {
             values: [format(subYears(new Date(), 1), 'yyyy-MM-dd')],

frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts

@@ -1,10 +1,5 @@
 import { useCallback } from 'react';
-import {
+import { encodeQueryParams, StringParam, withDefault } from 'use-query-params';
-    encodeQueryParams,
-    NumberParam,
-    StringParam,
-    withDefault,
-} from 'use-query-params';
 import {
     DEFAULT_PAGE_LIMIT,
     useFeatureSearch,
@@ -16,12 +11,13 @@ import {
 import { usePersistentTableState } from 'hooks/usePersistentTableState';
 import mapValues from 'lodash.mapvalues';
 import type { SearchFeaturesParams } from 'openapi';
+import { SafeNumberParam } from 'utils/safeNumberParam';
 
 export const useGlobalFeatureSearch = (pageLimit = DEFAULT_PAGE_LIMIT) => {
     const storageKey = 'features-list-table';
     const stateConfig = {
-        offset: withDefault(NumberParam, 0),
+        offset: withDefault(SafeNumberParam, 0),
-        limit: withDefault(NumberParam, pageLimit),
+        limit: withDefault(SafeNumberParam, pageLimit),
         query: StringParam,
         favoritesFirst: withDefault(BooleansStringParam, true),
         sortBy: withDefault(StringParam, 'createdAt'),

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts

@@ -1,7 +1,6 @@
 import {
     ArrayParam,
     encodeQueryParams,
-    NumberParam,
     StringParam,
     withDefault,
 } from 'use-query-params';
@@ -16,6 +15,7 @@ import {
 import { usePersistentTableState } from 'hooks/usePersistentTableState';
 import mapValues from 'lodash.mapvalues';
 import type { SearchFeaturesParams } from 'openapi';
+import { SafeNumberParam } from 'utils/safeNumberParam';
 
 type Attribute =
     | { key: 'tag'; operator: 'INCLUDE' }
@@ -28,8 +28,8 @@ export const useProjectFeatureSearch = (
     refreshInterval = 15 * 1000,
 ) => {
     const stateConfig = {
-        offset: withDefault(NumberParam, 0),
+        offset: withDefault(SafeNumberParam, 0),
-        limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT),
+        limit: withDefault(SafeNumberParam, DEFAULT_PAGE_LIMIT),
         query: StringParam,
         favoritesFirst: withDefault(BooleansStringParam, true),
         sortBy: withDefault(StringParam, 'createdAt'),

frontend/src/hooks/usePersistentTableState.ts

@@ -51,6 +51,19 @@ export const usePersistentTableState = <T extends QueryParamConfigMap>(
         return reorderObject(tableState, [...searchParams.keys()]);
     }, [searchParams, tableState, reorderObject]);
 
+    useEffect(() => {
+        if (
+            tableState.limit &&
+            ![25, 50, 75, 100].includes(tableState.limit as number)
+        ) {
+            setTableStateInternal((prevState) => ({
+                ...prevState,
+                limit: 25,
+                offset: 0, // Reset offset when changing limit
+            }));
+        }
+    }, [tableState.limit, setTableStateInternal]);
+
     type SetTableStateInternalParam = Parameters<
         typeof setTableStateInternal
     >[0];

frontend/src/utils/safeNumberParam.ts

@@ -0,0 +1,12 @@
+import { encodeNumber, decodeNumber } from 'serialize-query-params';
+
+/**
+ * @see: https://github.com/pbeshai/use-query-params/issues/175#issuecomment-982791559
+ */
+export const SafeNumberParam = {
+    encode: encodeNumber,
+    decode: (input: any) => {
+        const result = decodeNumber(input);
+        return result == null ? result : Number.isNaN(result) ? null : result;
+    },
+};