fix filtration behavior

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;
 

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))}
                 />
             </FormControl>
         </div>

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() {
               );
             })}
             <div className={cls.clearBtnContainer}>
-              <Button startEnhancer={<Delete />} kind="tertiary" size="compact" >
+              <Button startEnhancer={<Delete />} kind="tertiary" size="compact" onClick={() => { clearDomainPageFilters(setQueryParams) }} >
                 Clear filters
               </Button>
             </div>

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<P extends PageQueryParams>(
+    setQueryParams: PageQueryParamSetter<P>,
+    filters: DomainPageFilters = domainPageFilters
+) {
+    const newValues = Object.fromEntries(filters.map((f) => [f.id, undefined]));
+    setQueryParams(newValues);
+}
+export default clearDomainPageFilters;

src/hooks/use-page-query-params/types.ts

@@ -26,6 +26,7 @@ export type PageQueryParamMultiValue<K extends string, T extends any[]> = {
 export type PageQueryParams = (PageQueryParam<string, any> | PageQueryParamMultiValue<string, any[]>)[];
 export type PageQueryParamKeys<P extends PageQueryParams> = keyof PageQueryParamValues<P>;
 
+export type PageQueryParamSetter<P extends PageQueryParams> = (newParams: Partial<PageQueryParamSetterValues<P>>, 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

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<string>);
@@ -13,7 +13,7 @@ const useShared_HistoryState = () => useBetween(useState<string>);
 export default function usePageQueryParams<P extends PageQueryParams>(
   config: P,
   extraConfig?: QueryParamSetterExtraConfig
-): [PageQueryParamValues<P>, (newParams: Partial<PageQueryParamSetterValues<P>>, setterExtraConfig?: QueryParamSetterExtraConfig) => void] {
+): [PageQueryParamValues<P>, PageQueryParamSetter<P>] {
   // 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<P extends PageQueryParams>(
     return getPageQueryParamsValues<P>(config, urlQueryParamsObject);
   }, [config, search]);
 
-  const setter = useCallback(
-    (newParams: Partial<PageQueryParamSetterValues<P>>, setterExtraConfig?: QueryParamSetterExtraConfig) => {
+  const setter = useCallback<PageQueryParamSetter<P>>(
+    (newParams, setterExtraConfig) => {
       if (!isObjectLike(newParams)) {
         return;
       }

src/hooks/use-page-query-params/utils.ts

@@ -37,7 +37,7 @@ export const getPageQueryParamsValues = <P extends PageQueryParams>(
         const val = getArrayValForMultiValParams(valInUrl, isMultiValue);
         const configKey: PageQueryParamKeys<P> = 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)