diff --git a/src/containers/domains-page/config/domains-page-filters-config.ts b/src/containers/domains-page/config/domains-page-filters-config.ts index 72948c57b..c539b9550 100644 --- a/src/containers/domains-page/config/domains-page-filters-config.ts +++ b/src/containers/domains-page/config/domains-page-filters-config.ts @@ -5,10 +5,6 @@ const domainPageFilters = [ { id: 'clusterName', renderFilter: DomainsPageFiltersClusterName, - }, - { - id: 'searchText', - renderFilter: DomainsPageFiltersClusterName, } ] as const satisfies DomainPageFilters; diff --git a/src/containers/domains-page/domains-page-filters-cluster-name/domains-page-filters-cluster-name.tsx b/src/containers/domains-page/domains-page-filters-cluster-name/domains-page-filters-cluster-name.tsx index 1fe40d2e1..092eccb22 100644 --- a/src/containers/domains-page/domains-page-filters-cluster-name/domains-page-filters-cluster-name.tsx +++ b/src/containers/domains-page/domains-page-filters-cluster-name/domains-page-filters-cluster-name.tsx @@ -21,7 +21,7 @@ function DomainsPageFiltersClusterName({ onChange, value }: DomainPageFilterProp size="compact" value={clusterValue} options={clustersOptions} - onChange={(params) => onChange(String(params.value[0]?.id))} + onChange={(params) => onChange(typeof params.value[0]?.id === 'undefined' ? undefined : String(params.value[0]?.id))} /> diff --git a/src/containers/domains-page/domains-page-filters/domains-page-filters.tsx b/src/containers/domains-page/domains-page-filters/domains-page-filters.tsx index 10c2e4ed7..c2c535b28 100644 --- a/src/containers/domains-page/domains-page-filters/domains-page-filters.tsx +++ b/src/containers/domains-page/domains-page-filters/domains-page-filters.tsx @@ -10,6 +10,7 @@ import domainPageQueryParamsConfig from "../config/domains-page-query-params"; import getDomainsPageChangedFiltersCount from "../utils/get-domain-page-changed-filters-count"; import domainPageFilters from "../config/domains-page-filters-config"; import { cssStyles, overrides } from "./domains-page-filters.styles"; +import clearDomainPageFilters from "../utils/clear-domain-page-filters"; export default function DomainPageFilters() { @@ -50,7 +51,7 @@ export default function DomainPageFilters() { ); })}
-
diff --git a/src/containers/domains-page/utils/clear-domain-page-filters.ts b/src/containers/domains-page/utils/clear-domain-page-filters.ts new file mode 100644 index 000000000..79bc49ecd --- /dev/null +++ b/src/containers/domains-page/utils/clear-domain-page-filters.ts @@ -0,0 +1,13 @@ +import { PageQueryParamSetter, PageQueryParams } from "@/hooks/use-page-query-params/types"; +import domainPageFilters from "../config/domains-page-filters-config"; +import { DomainPageFilters } from "../domains-page-filters/domains-page-filters.types"; + + +function clearDomainPageFilters

( + setQueryParams: PageQueryParamSetter

, + filters: DomainPageFilters = domainPageFilters +) { + const newValues = Object.fromEntries(filters.map((f) => [f.id, undefined])); + setQueryParams(newValues); +} +export default clearDomainPageFilters; \ No newline at end of file diff --git a/src/hooks/use-page-query-params/types.ts b/src/hooks/use-page-query-params/types.ts index 872b7882a..62d0681a4 100644 --- a/src/hooks/use-page-query-params/types.ts +++ b/src/hooks/use-page-query-params/types.ts @@ -26,6 +26,7 @@ export type PageQueryParamMultiValue = { export type PageQueryParams = (PageQueryParam | PageQueryParamMultiValue)[]; export type PageQueryParamKeys

= keyof PageQueryParamValues

; +export type PageQueryParamSetter

= (newParams: Partial>, setterExtraConfig?: QueryParamSetterExtraConfig) => void // get the type for the values object of the page query params e.g {count: 1} // The Extracted type is the keys of the available query params and the type of the value corresponding to the key diff --git a/src/hooks/use-page-query-params/use-page-query-params.tsx b/src/hooks/use-page-query-params/use-page-query-params.tsx index 159807625..9dc4628c5 100644 --- a/src/hooks/use-page-query-params/use-page-query-params.tsx +++ b/src/hooks/use-page-query-params/use-page-query-params.tsx @@ -4,7 +4,7 @@ import queryString from 'query-string'; import isObjectLike from 'lodash/isObjectLike'; import { useBetween } from 'use-between'; import usePreviousValue from '@/hooks/use-previous-value'; -import type { PageQueryParamSetterValues, PageQueryParamValues, PageQueryParams, QueryParamSetterExtraConfig } from './types'; +import type { PageQueryParamSetter, PageQueryParamSetterValues, PageQueryParamValues, PageQueryParams, QueryParamSetterExtraConfig } from './types'; import { getPageQueryParamsValues, getUpdatedUrlSearch } from './utils'; const useShared_HistoryState = () => useBetween(useState); @@ -13,7 +13,7 @@ const useShared_HistoryState = () => useBetween(useState); export default function usePageQueryParams

( config: P, extraConfig?: QueryParamSetterExtraConfig -): [PageQueryParamValues

, (newParams: Partial>, setterExtraConfig?: QueryParamSetterExtraConfig) => void] { +): [PageQueryParamValues

, PageQueryParamSetter

] { // state shared across all usePageQueryParams instances so that when one of the hook uses history state (which doesn't cause full page rerender) // other usePageQueryParams hooks will get rerendered and update their internal value of window.location.search const [stateUrl, rerender] = useShared_HistoryState() @@ -36,8 +36,8 @@ export default function usePageQueryParams

( return getPageQueryParamsValues

(config, urlQueryParamsObject); }, [config, search]); - const setter = useCallback( - (newParams: Partial>, setterExtraConfig?: QueryParamSetterExtraConfig) => { + const setter = useCallback>( + (newParams, setterExtraConfig) => { if (!isObjectLike(newParams)) { return; } diff --git a/src/hooks/use-page-query-params/utils.ts b/src/hooks/use-page-query-params/utils.ts index 53d488bbf..cf3249c12 100644 --- a/src/hooks/use-page-query-params/utils.ts +++ b/src/hooks/use-page-query-params/utils.ts @@ -37,7 +37,7 @@ export const getPageQueryParamsValues =

( const val = getArrayValForMultiValParams(valInUrl, isMultiValue); const configKey: PageQueryParamKeys

= configObject.key; - if (val === null || (isMultiValue && val.length === 0)) { + if (val === undefined || val === null || (isMultiValue && val.length === 0)) { result[configKey] = configObject?.defaultValue; } else if (isMultiValue && typeof configObject.parseValue === 'function') { result[configKey] = Array.isArray(val)