diff --git a/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx b/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx index 9660ddde2e..35bc64b3c8 100644 --- a/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx +++ b/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 = ({ setPageLimit(Number(event.target.value)) } > - - - - + {PAGINATION_OPTIONS.map((option) => ( + + ))} diff --git a/frontend/src/component/events/EventLog/useEventLogSearch.ts b/frontend/src/component/events/EventLog/useEventLogSearch.ts index efbebc2fd7..df44b336f6 100644 --- a/frontend/src/component/events/EventLog/useEventLogSearch.ts +++ b/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')], diff --git a/frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts b/frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts index 4dbf56fbdf..4f67a003a3 100644 --- a/frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts +++ b/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'; diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts index 20ebc83e82..fb22a94c4d 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts +++ b/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' } diff --git a/frontend/src/hooks/usePersistentTableState.ts b/frontend/src/hooks/usePersistentTableState.ts index 5d13618372..563710ab70 100644 --- a/frontend/src/hooks/usePersistentTableState.ts +++ b/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 = ( key: string, @@ -52,13 +56,10 @@ export const usePersistentTableState = ( }, [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 })); } diff --git a/frontend/src/utils/paginationConfig.ts b/frontend/src/utils/paginationConfig.ts new file mode 100644 index 0000000000..4c98877367 --- /dev/null +++ b/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) + ); +};