refactor: centralize pagination options (#10636)

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

@@ -3,6 +3,7 @@ import { Box, Typography, Button, styled } from '@mui/material';
 import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender.tsx';
 import { ReactComponent as ArrowRight } from 'assets/icons/arrowRight.svg';
 import { ReactComponent as ArrowLeft } from 'assets/icons/arrowLeft.svg';
+import { PAGINATION_OPTIONS } from 'utils/paginationConfig';
 
 const StyledPaginationButton = styled(Button)(({ theme }) => ({
     padding: `0 ${theme.spacing(0.8)}`,
@@ -127,10 +128,11 @@ export const PaginationBar: React.FC<PaginationBarProps> = ({
                         setPageLimit(Number(event.target.value))
                     }
                 >
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                    <option value={75}>75</option>
-                    <option value={100}>100</option>
+                    {PAGINATION_OPTIONS.map((option) => (
+                        <option key={option} value={option}>
+                            {option}
+                        </option>
+                    ))}
                 </StyledSelect>
             </StyledCenterBox>
         </StyledBoxContainer>

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

@@ -7,6 +7,7 @@ import type { SearchEventsParams } from 'openapi';
 import type { FilterItemParamHolder } from 'component/filter/Filters/Filters';
 import { format, subYears } from 'date-fns';
 import { SafeNumberParam } from 'utils/safeNumberParam';
+import { DEFAULT_PAGE_LIMIT } from 'utils/paginationConfig';
 
 type Log =
     | { type: 'global' }
@@ -30,8 +31,6 @@ const extraParameters = (logType: Log) => {
     }
 };
 
-const DEFAULT_PAGE_SIZE = 25;
-
 export const calculatePaginationInfo = ({
     offset,
     pageSize,
@@ -55,7 +54,7 @@ export const useEventLogSearch = (
 ) => {
     const stateConfig = {
         offset: withDefault(SafeNumberParam, 0),
-        limit: withDefault(SafeNumberParam, DEFAULT_PAGE_SIZE),
+        limit: withDefault(SafeNumberParam, DEFAULT_PAGE_LIMIT),
         query: StringParam,
         from: withDefault(FilterItemParam, {
             values: [format(subYears(new Date(), 1), 'yyyy-MM-dd')],

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

@@ -1,9 +1,6 @@
 import { useCallback } from 'react';
 import { encodeQueryParams, StringParam, withDefault } from 'use-query-params';
-import {
-    DEFAULT_PAGE_LIMIT,
-    useFeatureSearch,
-} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
 import {
     BooleansStringParam,
     FilterItemParam,
@@ -12,6 +9,7 @@ import { usePersistentTableState } from 'hooks/usePersistentTableState';
 import mapValues from 'lodash.mapvalues';
 import type { SearchFeaturesParams } from 'openapi';
 import { SafeNumberParam } from 'utils/safeNumberParam';
+import { DEFAULT_PAGE_LIMIT } from 'utils/paginationConfig';
 
 export const useGlobalFeatureSearch = (pageLimit = DEFAULT_PAGE_LIMIT) => {
     const storageKey = 'features-list-table';

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

@@ -4,10 +4,7 @@ import {
     StringParam,
     withDefault,
 } from 'use-query-params';
-import {
-    DEFAULT_PAGE_LIMIT,
-    useFeatureSearch,
-} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
 import {
     BooleansStringParam,
     FilterItemParam,
@@ -16,6 +13,7 @@ import { usePersistentTableState } from 'hooks/usePersistentTableState';
 import mapValues from 'lodash.mapvalues';
 import type { SearchFeaturesParams } from 'openapi';
 import { SafeNumberParam } from 'utils/safeNumberParam';
+import { DEFAULT_PAGE_LIMIT } from 'utils/paginationConfig';
 
 type Attribute =
     | { key: 'tag'; operator: 'INCLUDE' }

frontend/src/hooks/usePersistentTableState.ts

@@ -4,6 +4,10 @@ import { createLocalStorage } from 'utils/createLocalStorage';
 import { encodeQueryParams, useQueryParams } from 'use-query-params';
 import type { QueryParamConfigMap } from 'serialize-query-params/src/types';
 import { reorderObject } from '../utils/reorderObject.js';
+import {
+    isValidPaginationOption,
+    DEFAULT_PAGE_LIMIT,
+} from 'utils/paginationConfig';
 
 const usePersistentSearchParams = <T extends QueryParamConfigMap>(
     key: string,
@@ -52,13 +56,10 @@ export const usePersistentTableState = <T extends QueryParamConfigMap>(
     }, [searchParams, tableState, reorderObject]);
 
     useEffect(() => {
-        if (
-            tableState.limit &&
-            ![25, 50, 75, 100].includes(tableState.limit as number)
-        ) {
+        if (tableState.limit && !isValidPaginationOption(tableState.limit)) {
             setTableStateInternal((prevState) => ({
                 ...prevState,
-                limit: 25,
+                limit: DEFAULT_PAGE_LIMIT,
                 offset: 0, // Reset offset when changing limit
             }));
         }

frontend/src/utils/paginationConfig.ts

@@ -0,0 +1,14 @@
+export const PAGINATION_OPTIONS = [25, 50, 75, 100] as const;
+
+export type PaginationOption = (typeof PAGINATION_OPTIONS)[number];
+
+export const DEFAULT_PAGE_LIMIT = 25;
+
+export const isValidPaginationOption = (
+    value: unknown,
+): value is PaginationOption => {
+    return (
+        typeof value === 'number' &&
+        PAGINATION_OPTIONS.includes(value as PaginationOption)
+    );
+};