diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index 41b856daea..5cdfc53034 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -31,23 +31,7 @@ import { focusable } from 'themes/themeStyles'; import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell'; import useToast from 'hooks/useToast'; import { FeatureToggleFilters } from './FeatureToggleFilters/FeatureToggleFilters'; -import { - DEFAULT_PAGE_LIMIT, - useFeatureSearch, -} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch'; -import mapValues from 'lodash.mapvalues'; -import { - BooleansStringParam, - FilterItemParam, -} from 'utils/serializeQueryParams'; -import { - encodeQueryParams, - NumberParam, - StringParam, - withDefault, -} from 'use-query-params'; import { withTableState } from 'utils/withTableState'; -import { usePersistentTableState } from 'hooks/usePersistentTableState'; import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell'; import { FeatureSegmentCell } from 'component/common/Table/cells/FeatureSegmentCell/FeatureSegmentCell'; import { useUiFlag } from 'hooks/useUiFlag'; @@ -56,6 +40,7 @@ import useLoading from 'hooks/useLoading'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { useFeedback } from '../../feedbackNew/useFeedback'; import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined'; +import { useGlobalFeatureSearch } from './useGlobalFeatureSearch'; export const featuresPlaceholder = Array(15).fill({ name: 'Name of the feature', @@ -94,45 +79,16 @@ export const FeatureToggleListTable: VFC = () => { variant, ); - const stateConfig = { - offset: withDefault(NumberParam, 0), - limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT), - query: StringParam, - favoritesFirst: withDefault(BooleansStringParam, true), - sortBy: withDefault(StringParam, 'createdAt'), - sortOrder: withDefault(StringParam, 'desc'), - project: FilterItemParam, - tag: FilterItemParam, - state: FilterItemParam, - segment: FilterItemParam, - createdAt: FilterItemParam, - type: FilterItemParam, - }; - const [tableState, setTableState] = usePersistentTableState( - 'features-list-table', - stateConfig, - ); const { - offset, - limit, - query, - favoritesFirst, - sortBy, - sortOrder, - ...filterState - } = tableState; - - const { - features = [], + features, total, - loading, refetch: refetchFeatures, + loading, initialLoad, - } = useFeatureSearch( - mapValues(encodeQueryParams(stateConfig, tableState), (value) => - value ? `${value}` : undefined, - ), - ); + tableState, + setTableState, + filterState, + } = useGlobalFeatureSearch(); const bodyLoadingRef = useLoading(loading); const { favorite, unfavorite } = useFavoriteFeaturesApi(); const onFavorite = useCallback( @@ -158,10 +114,10 @@ export const FeatureToggleListTable: VFC = () => { columnHelper.accessor('favorite', { header: () => ( setTableState({ - favoritesFirst: !favoritesFirst, + favoritesFirst: !tableState.favoritesFirst, }) } /> @@ -262,7 +218,7 @@ export const FeatureToggleListTable: VFC = () => { }, }), ], - [favoritesFirst], + [tableState.favoritesFirst], ); const data = useMemo( @@ -338,7 +294,9 @@ export const FeatureToggleListTable: VFC = () => { @@ -429,7 +387,7 @@ export const FeatureToggleListTable: VFC = () => { condition={isSmallScreen} show={ @@ -442,7 +400,7 @@ export const FeatureToggleListTable: VFC = () => { onChange={setTableState} state={filterState} /> - +
@@ -452,11 +410,11 @@ export const FeatureToggleListTable: VFC = () => { show={ ({ padding: theme.spacing(0, 2, 2) })}> 0} + condition={(tableState.query || '')?.length > 0} show={ No feature flags found matching “ - {query} + {tableState.query} ” } diff --git a/frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts b/frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts new file mode 100644 index 0000000000..2ef3557371 --- /dev/null +++ b/frontend/src/component/feature/FeatureToggleList/useGlobalFeatureSearch.ts @@ -0,0 +1,70 @@ +import { + encodeQueryParams, + NumberParam, + StringParam, + withDefault, +} from 'use-query-params'; +import { + DEFAULT_PAGE_LIMIT, + useFeatureSearch, +} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch'; +import { + BooleansStringParam, + FilterItemParam, +} from 'utils/serializeQueryParams'; +import { usePersistentTableState } from 'hooks/usePersistentTableState'; +import mapValues from 'lodash.mapvalues'; + +export const useGlobalFeatureSearch = (storageKey = 'features-list-table') => { + const stateConfig = { + offset: withDefault(NumberParam, 0), + limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT), + query: StringParam, + favoritesFirst: withDefault(BooleansStringParam, true), + sortBy: withDefault(StringParam, 'createdAt'), + sortOrder: withDefault(StringParam, 'desc'), + project: FilterItemParam, + tag: FilterItemParam, + state: FilterItemParam, + segment: FilterItemParam, + createdAt: FilterItemParam, + type: FilterItemParam, + }; + const [tableState, setTableState] = usePersistentTableState( + `${storageKey}`, + stateConfig, + ); + + const { + offset, + limit, + query, + favoritesFirst, + sortBy, + sortOrder, + ...filterState + } = tableState; + + const { + features = [], + total, + loading, + refetch, + initialLoad, + } = useFeatureSearch( + mapValues(encodeQueryParams(stateConfig, tableState), (value) => + value ? `${value}` : undefined, + ), + ); + + return { + features, + total, + refetch, + loading, + initialLoad, + tableState, + setTableState, + filterState, + }; +};