@solidxai/core-ui 0.1.14 → 0.1.15-beta.0

package/dist/components/core/common/SolidGlobalSearchElement.tsx

@@ -1,10 +1,7 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "../../../components/core/common/FilterComponent";
 import { toTitleCase } from "../../../helpers/helpers";
-import { usePathname } from "../../../hooks/usePathname";
-import { useRouter } from "../../../hooks/useRouter";
-import { useSearchParams } from "../../../hooks/useSearchParams";
-import {clearFilterObjectFromLocalStorage,getFilterObjectFromLocalStorage,
+import {clearFilterObjectFromLocalStorage,getFilterObjectFromLocalStorage,setFilterObjectToLocalStorage,
 } from "./globalSearchPersistence";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
@@ -12,8 +9,9 @@ import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
 import { useSession } from '../../../hooks/useSession'
+import { getUnboundSavedFilterVariableNames, parseSavedFilterQueryJson, resolveSavedFilterVariables } from '../../../helpers/resolveActiveUserId';
 import GroupingComponent, { AggregationRule, GroupingRule, DateGroupingFormat } from "./GroupingComponent";
-import { Bookmark, Check, Filter, ListFilter, Pencil, Plus, Search, SearchX, Trash2, X } from "lucide-react";
+import { Bookmark, Check, Filter, Pencil, Plus, Search, SearchX, Sparkles, Trash2, X } from "lucide-react";
 import { SolidButton } from "../../shad-cn-ui/SolidButton";
 import { SolidInput } from "../../shad-cn-ui/SolidInput";
 import {
@@ -420,8 +418,10 @@ export const mergeAllDiffFilters = (customFilter: any, searchFilter: any, savedF
     return filters;
 }
 
-const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible, isFocused, onMouseEnter }: any) => {
-    const isActive = savedfilter?.systemKey ? activeSavedFilter === savedfilter.systemKey : Number(activeSavedFilter) == savedfilter.id;
+const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible, isFocused, onMouseEnter, optionId }: any) => {
+    const isActive = savedfilter?.systemKey
+        ? activeSavedFilterReference === savedfilter.systemKey
+        : String(activeSavedFilterReference) === String(savedfilter.id);
 
     return (
         <div className="solid-saved-filter-item" onMouseEnter={onMouseEnter}>
@@ -430,13 +430,32 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
                     variant="ghost"
                     size="sm"
                     className={`solid-saved-filter-main w-full ${isActive ? "is-active" : ""} ${isFocused ? "solid-search-overlay-option-active" : ""}`}
+                    id={optionId}
+                    role="option"
+                    aria-selected={isFocused}
+                    aria-label={`${savedfilter.name}${isActive ? ", applied" : ""}`}
                     onMouseDown={(e) => {
                         e.preventDefault();
                         applySavedFilter(savedfilter);
                     }}
                     title={savedfilter?.description}
                 >
-                    {savedfilter.name}
+                    <span className="solid-search-overlay-option-content">
+                        <span className="solid-search-overlay-option-icon" aria-hidden="true">
+                            <Bookmark size={15} />
+                        </span>
+                        <span className="solid-search-overlay-option-copy">
+                            <span className="solid-search-overlay-option-title">{savedfilter.name}</span>
+                            {savedfilter?.description && (
+                                <span className="solid-search-overlay-option-description">{savedfilter.description}</span>
+                            )}
+                        </span>
+                        {isActive && (
+                            <span className="solid-search-overlay-option-check" aria-hidden="true">
+                                <Check size={14} />
+                            </span>
+                        )}
+                    </span>
                 </SolidButton>
             </div>
             <div className="solid-saved-filter-actions">
@@ -450,6 +469,7 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
                                 e.preventDefault();
                                 openSavedCustomFilter(savedfilter);
                             }}
+                            aria-label={`Edit ${savedfilter.name}`}
                         >
                             <Pencil size={14} />
                         </SolidButton>
@@ -462,6 +482,7 @@ const SavedFilterList = ({ savedfilter, activeSavedFilter, applySavedFilter, ope
                                 setSavedFilterTobeDeleted(savedfilter.id),
                                     setIsDeleteSQDialogVisible(true);
                             }}
+                            aria-label={`Delete ${savedfilter.name}`}
                         >
                             <Trash2 size={14} />
                         </SolidButton>
@@ -550,16 +571,19 @@ type RelationCache = Map<string, { label: string; value: number }>;
 
 
 
-export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates, definedFilters, onRemoveDefinedFilter, onApplyDefinedFilter }: any, ref) => {
+export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates }: any, ref) => {
     type OverlayOption =
         | { id: string; kind: "field"; field: any }
         | { id: string; kind: "predefined"; predefined: any }
         | { id: string; kind: "saved"; saved: any }
         | { id: string; kind: "custom" }
         | { id: string; kind: "grouping" };
+    const overlayInstanceId = useId();
+    const overlayListboxId = `${overlayInstanceId}-search-options`;
+    const getOverlayOptionId = (index: number) => `${overlayInstanceId}-search-option-${index}`;
     type ManagedChipItem = {
         id: string;
-        type: "saved" | "search" | "predefined" | "custom" | "grouping" | "handler";
+        type: "saved" | "search" | "predefined" | "custom" | "grouping";
         label: string;
         onRemove: () => void;
         onOpen?: () => void;
@@ -608,18 +632,11 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     ];
 
     const [initialState, setInitialState] = useState(defaultState);
-    const pathname = usePathname();
     const searchableEntityLabel =
         viewData?.data?.solidView?.displayName ||
         viewData?.data?.solidView?.model?.displayName ||
         "records";
 
-
-    const searchParams = useSearchParams() // Converts the query params to a string
-    const activeSavedFilter = searchParams?.get("savedQuery");
-
-    const router = useRouter();
-
     const chipsRef = useRef<HTMLDivElement | null | any>(null);
 
     // filterRules is used to maintian the ui of custom filter 
@@ -662,6 +679,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     // currentSavedFilterData  is used to save the whole object of saved filter 
     const [currentSavedFilterData, setCurrentSavedFilterData] = useState<any>();
     const [currentSavedFilterQuery, setCurrentSavedFilterQuery] = useState<any>();
+    const [currentSavedFilterVariables, setCurrentSavedFilterVariables] = useState<Record<string, any>>({});
     const [currentSavedFilterRules, setCurrentSavedFilterRules] = useState<any>();
     const [showSavedFilterComponent, setShowSavedFilterComponent] = useState<boolean>(false);
 
@@ -684,7 +702,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
     useEffect(() => {
         if (focusedIndex >= 0 && showOverlay) {
-            const activeElement = document.querySelector(`.solid-search-overlay-option-active`);
+            const activeElement = overlayRef.current?.querySelector(`.solid-search-overlay-option-active`);
             if (activeElement) {
                 activeElement.scrollIntoView({
                     block: 'nearest',
@@ -720,12 +738,23 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         };
     }, [isDraftPublishWorkflowEnabled]);
 
-    const availableSavedFilters = useMemo(
+    const allAvailableSavedFilters = useMemo(
         () => workflowPublishedVersionsSavedFilter
             ? [workflowPublishedVersionsSavedFilter, ...(savedFilters || [])]
             : (savedFilters || []),
         [workflowPublishedVersionsSavedFilter, savedFilters]
     );
+    const availableSavedFilters = allAvailableSavedFilters;
+    const selectableSavedFilters = useMemo(
+        () => allAvailableSavedFilters.filter((filter: any) => {
+            try {
+                return getUnboundSavedFilterVariableNames(parseSavedFilterQueryJson(filter.filterQueryJson || "{}")).length === 0;
+            } catch {
+                return false;
+            }
+        }),
+        [allAvailableSavedFilters]
+    );
 
     const entityApi = createSolidEntityApi("savedFilters");
     const {
@@ -755,20 +784,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
     const [savedFilterFetchDataRefreshKey, setSavedFilterFetchDataRefreshKey] = useState(0);
 
-    const buildSavedFilterUrl = (savedQueryId?: string | number | null) => {
-        const params = new URLSearchParams(searchParams.toString());
-
-        if (savedQueryId === null || savedQueryId === undefined || savedQueryId === "") {
-            params.delete("savedQuery");
-        } else {
-            params.set("savedQuery", String(savedQueryId));
-        }
-
-        const queryString = params.toString();
-        return queryString ? `${pathname}?${queryString}` : pathname;
-    };
-
-
     useEffect(() => {
         const fn = async () => {
             if (!viewData?.data?.solidView?.model?.id || !viewData?.data?.solidView?.id || !user?.id) {
@@ -814,7 +829,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         }
         fn()
     }, [
-        activeSavedFilter,
         savedFilterFetchDataRefreshKey,
         viewData?.data?.solidView?.id,
         viewData?.data?.solidView?.model?.id,
@@ -829,7 +843,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 ? queryObject.custom_filter_predicate
                 : null;
         const nextPredefinedBaseFilter = queryObject?.predefined_search_predicate || null;
+        const nextPredefinedSearchChip =
+            nextPredefinedBaseFilter && queryObject?.predefined_search_chip
+                ? queryObject.predefined_search_chip
+                : null;
         const nextSavedFilter = queryObject?.saved_filter_predicate || null;
+        const nextSavedFilterVariables = queryObject?.saved_filter_variables ?? {};
         const nextSavedFilterData = nextSavedFilter
             ? availableSavedFilters.find((savedFilter: any) => {
                 if (queryObject?.saved_filter_system_key) {
@@ -851,8 +870,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setSearchChips((prev) => areFilterStateValuesEqual(prev, nextSearchChips) ? prev : nextSearchChips);
         setCustomFilter((prev: any) => areFilterStateValuesEqual(prev, nextCustomFilter) ? prev : nextCustomFilter);
         setPredefinedSearchBaseFilter((prev: any) => areFilterStateValuesEqual(prev, nextPredefinedBaseFilter) ? prev : nextPredefinedBaseFilter);
+        setPredefinedSearchChip((prev) => areFilterStateValuesEqual(prev, nextPredefinedSearchChip) ? prev : nextPredefinedSearchChip);
         setCurrentSavedFilterData((prev: any) => areFilterStateValuesEqual(prev, nextSavedFilterData) ? prev : nextSavedFilterData);
         setCurrentSavedFilterQuery((prev: any) => areFilterStateValuesEqual(prev, nextSavedFilter) ? prev : nextSavedFilter);
+        setCurrentSavedFilterVariables((prev) => areFilterStateValuesEqual(prev, nextSavedFilterVariables) ? prev : nextSavedFilterVariables);
 
         if (nextCustomFilter && viewData?.data) {
             const rules: FilterRule = transformFiltersToRules(nextCustomFilter);
@@ -899,6 +920,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setPredefinedSearchBaseFilter(null);
         setCurrentSavedFilterData(null);
         setCurrentSavedFilterQuery(null);
+        setCurrentSavedFilterVariables({});
         setCurrentSavedFilterRules(null);
         if (!preserveGrouping) {
             setGroupingRules(defaultGroupingRules);
@@ -909,13 +931,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setInputValue("");
         clearFilterObjectFromLocalStorage();
 
-        if (activeSavedFilter) {
-            const params = new URLSearchParams(searchParams.toString());
-            params.delete("savedQuery");
-            const nextUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname;
-            router.replace(nextUrl);
-        }
-
         setHasSearched(true);
         setRefreshKey((prev) => prev + 1);
     };
@@ -924,6 +939,15 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         clearFilter: () => {
             resetAppliedFilters();
         },
+        getSavedFilters: () => availableSavedFilters.map((filter: any) => ({ ...filter })),
+        applySavedFilterByName: (name: string, variables: Record<string, any> = {}) => {
+            const savedFilter = allAvailableSavedFilters.find((filter: any) => filter?.name === name);
+            if (!savedFilter) {
+                return false;
+            }
+
+            return applySavedFilter(savedFilter, variables);
+        },
         clearAppliedFilters: (options?: { preserveGrouping?: boolean }) => {
             resetAppliedFilters(options);
         },
@@ -945,35 +969,15 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     useEffect(() => {
         const fn = async () => {
             if (savedFiltersLoaded) {
-
-                if (activeSavedFilter && availableSavedFilters.length === 0) return;
-
                 const queryObject = getFilterObjectFromLocalStorage();
-                let nextQueryObject = queryObject;
-                if (activeSavedFilter) {
-                    const currentSavedFilterId = Number(activeSavedFilter);
-                    const currentSavedFilterData: any = availableSavedFilters.find((savedFilter: any) => savedFilter.id === currentSavedFilterId);
-                    if (currentSavedFilterData) {
-                        const filterJson = JSON.parse(currentSavedFilterData?.filterQueryJson);
-                        if (filterJson) {
-                            nextQueryObject = {
-                                ...(queryObject || {}),
-                                saved_filter_predicate: filterJson,
-                                saved_filter_id: currentSavedFilterData.id,
-                                saved_filter_system_key: currentSavedFilterData.systemKey,
-                                saved_filter_name: currentSavedFilterData.name,
-                            };
-                        }
-                    }
-                }
-                await syncFilterUiStateFromSharedSource(nextQueryObject);
+                await syncFilterUiStateFromSharedSource(queryObject);
 
                 setRefreshKey((prev) => prev + 1)
                 setHasSearched(true);
             }
         }
         fn()
-    }, [activeSavedFilter, availableSavedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, viewData?.data?.solidView?.id])
+    }, [availableSavedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, viewData?.data?.solidView?.id])
 
     useEffect(() => {
         const fn = async () => {
@@ -1263,6 +1267,16 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
             const finalCustomFilter = customFilter
             const finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter, groupingRules, aggregationRules)
+            finalFilter.predefined_search_chip =
+                finalPredefinedFilter && predefinedSearchChip
+                    ? predefinedSearchChip
+                    : null;
+            if (finalSavedFilter && Object.keys(finalSavedFilter).length > 0) {
+                const resolved = resolveSavedFilterVariables(finalSavedFilter, user?.id, currentSavedFilterVariables);
+                if (resolved.missingVariables.length > 0) return;
+                finalFilter.resolved_saved_filter_predicate = resolved.value;
+                finalFilter.saved_filter_variables = currentSavedFilterVariables;
+            }
             if (currentSavedFilterData?.id) {
                 finalFilter.saved_filter_id = currentSavedFilterData.id;
             }
@@ -1291,7 +1305,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
     const openSavedCustomFilter = async (savedfilter: any) => {
         //Open custom filter popup 
-        // router.push(`?savedQuery=${savedfilter.id}`);
         // setShowGlobalSearchElement(true);
         // // dont refetch the data yet
         // const customFilter = JSON.parse(savedfilter.filterQueryJson);
@@ -1309,15 +1322,13 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
 
-        // push the savedQuery=1 in url 
         if (savedfilter?.id) {
             const savedfilterId = savedfilter.id;
-            // router.push(`?savedQuery=${savedfilter.id}`);
             setShowOverlay(false);
             const currentSavedFilterData: any = availableSavedFilters.find((savedFilter: any) => savedFilter.id === savedfilterId);
             setCurrentSavedFilterData(currentSavedFilterData);
             if (currentSavedFilterData) {
-                const filterJson = JSON.parse(currentSavedFilterData?.filterQueryJson);
+                const filterJson = parseSavedFilterQueryJson(currentSavedFilterData?.filterQueryJson);
                 if (filterJson) {
                     let finalSavedFilter = filterJson
                     setCurrentSavedFilterQuery(finalSavedFilter)
@@ -1335,14 +1346,50 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         }
     }
 
+    const persistActiveSavedFilter = (savedFilter: any, filterJson: any, variables: Record<string, any>) => {
+        const persistedFilter = {
+            ...(getFilterObjectFromLocalStorage() || {}),
+            custom_filter_predicate: null,
+            search_predicate: null,
+            predefined_search_predicate: null,
+            predefined_search_chip: null,
+            saved_filter_predicate: filterJson,
+            saved_filter_variables: variables,
+            saved_filter_id: savedFilter?.id ?? null,
+            saved_filter_system_key: savedFilter?.systemKey ?? null,
+            saved_filter_name: savedFilter?.name ?? null,
+        };
+        delete persistedFilter.finalFullFilter;
+        setFilterObjectToLocalStorage(persistedFilter);
+    };
+
+    const clearActiveSavedFilter = () => {
+        setCurrentSavedFilterData(null);
+        setCurrentSavedFilterQuery(null);
+        setCurrentSavedFilterVariables({});
+        setCurrentSavedFilterRules(null);
+        setShowSavedFilterComponent(false);
+
+        const persistedFilter = {
+            ...(getFilterObjectFromLocalStorage() || {}),
+            saved_filter_predicate: null,
+            saved_filter_variables: {},
+            saved_filter_id: null,
+            saved_filter_system_key: null,
+            saved_filter_name: null,
+        };
+        delete persistedFilter.finalFullFilter;
+        setFilterObjectToLocalStorage(persistedFilter);
+
+        setHasSearched(true);
+        setRefreshKey((prev) => prev + 1);
+    };
+
     const deleteSavedFilter = async () => {
         // delte the saved filter with id 
         await deleteEntity(savedFilterTobeDeleted);
-        // triggerGetSolidEntities(savedFilterQueryString);
-        let parsedSearchParams = searchParams;
-        const savedQuery = parsedSearchParams?.get("savedQuery");
-        if (savedFilterTobeDeleted == savedQuery) {
-            router.push(buildSavedFilterUrl(null));
+        if (String(savedFilterTobeDeleted) === String(currentSavedFilterData?.id)) {
+            clearActiveSavedFilter();
         }
         setIsDeleteSQDialogVisible(false);
         setTimeout(() => {
@@ -1371,8 +1418,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 setCustomFilter(null)
                 setPredefinedSearchChip(null);
                 setPredefinedSearchBaseFilter(null);
-                clearFilterObjectFromLocalStorage();
-
                 // Apply the rename immediately, both to the active filter and to
                 // the cached list — otherwise the list still holds the pre-rename
                 // entry, which wins the id-based lookup the next time saved-filter
@@ -1382,12 +1427,9 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 setSavedFilters((prev) => prev.map((f: any) => String(f?.id) === String(formValues.id) ? { ...f, ...savedFilterRecord } : f));
                 setCurrentSavedFilterData(savedFilterRecord);
                 setCurrentSavedFilterQuery(filterJson);
+                persistActiveSavedFilter(savedFilterRecord, filterJson, currentSavedFilterVariables);
                 setHasSearched(true);
                 setRefreshKey((prev) => prev + 1);
-
-                setTimeout(() => {
-                    router.push(buildSavedFilterUrl(formValues.id));
-                }, 500)
             } else {
 
                 const filterJson = customFilter;
@@ -1406,21 +1448,16 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 setCustomFilter(null)
                 setPredefinedSearchChip(null);
                 setPredefinedSearchBaseFilter(null);
-                clearFilterObjectFromLocalStorage();
-
                 // The custom filter just became this saved filter — apply it, and
                 // seed the cached list with it, immediately (see rename branch above).
                 const savedFilterRecord = { id: result.data.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
                 setSavedFilters((prev) => [savedFilterRecord, ...prev]);
                 setCurrentSavedFilterData(savedFilterRecord);
                 setCurrentSavedFilterQuery(filterJson);
+                setCurrentSavedFilterVariables({});
+                persistActiveSavedFilter(savedFilterRecord, filterJson, {});
                 setHasSearched(true);
                 setRefreshKey((prev) => prev + 1);
-
-                setTimeout(() => {
-                    router.push(buildSavedFilterUrl(result.data.id));
-                }, 500)
-
             }
         } catch (error) {
 
@@ -1496,7 +1533,44 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
     //saved filter related code start
 
-    const applySavedFilter = (savedfilter: any) => {
+    const applySavedFilter = (savedfilter: any, variables: Record<string, any> = {}) => {
+        if (!savedfilter?.id && !savedfilter?.systemKey) {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+            return false;
+        }
+
+        let filterJson: any;
+        try {
+            filterJson = parseSavedFilterQueryJson(savedfilter?.filterQueryJson);
+        } catch {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+            return false;
+        }
+
+        const resolved = resolveSavedFilterVariables(filterJson, user?.id, variables);
+        if (resolved.missingVariables.length > 0) {
+            console.error(`Unable to apply saved filter '${savedfilter?.name}': missing variables ${resolved.missingVariables.join(", ")}`);
+            return false;
+        }
+
+        // Applying the already-active filter must be a no-op. This is important
+        // for lifecycle extensions: applying a filter causes a new list load,
+        // which invokes onBeforeListDataLoad/onListLoad again.
+        const sameSavedFilterReference =
+            (currentSavedFilterData?.id != null &&
+                savedfilter?.id != null &&
+                areFilterStateValuesEqual(currentSavedFilterData.id, savedfilter.id)) ||
+            (currentSavedFilterData?.systemKey != null &&
+                savedfilter?.systemKey != null &&
+                areFilterStateValuesEqual(currentSavedFilterData.systemKey, savedfilter.systemKey));
+        const sameSavedFilter =
+            sameSavedFilterReference &&
+            areFilterStateValuesEqual(currentSavedFilterQuery, filterJson) &&
+            areFilterStateValuesEqual(currentSavedFilterVariables, variables);
+
+        if (sameSavedFilter) {
+            return true;
+        }
 
         setSearchChips([]);
         setSearchFilter(null);
@@ -1504,41 +1578,18 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setCustomFilter(null)
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
-        clearFilterObjectFromLocalStorage();
-        if (savedfilter?.systemKey) {
-            setCurrentSavedFilterData(savedfilter);
-            try {
-                const filterJson = JSON.parse(savedfilter.filterQueryJson);
-                if (filterJson) {
-                    setCurrentSavedFilterQuery(filterJson);
-                }
-            } catch {
-                console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-            }
-            setShowOverlay(false);
-            setHasSearched(true);
-            setRefreshKey((prev) => prev + 1);
-            return;
-        }
-        // push the savedQuery=1 in url 
-        if (savedfilter?.id) {
-            router.push(buildSavedFilterUrl(savedfilter.id));
-            setShowOverlay(false);
-        } else {
-            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-        }
+        setCurrentSavedFilterData(savedfilter);
+        setCurrentSavedFilterQuery(filterJson);
+        setCurrentSavedFilterVariables(variables);
+        persistActiveSavedFilter(savedfilter, filterJson, variables);
+        setShowOverlay(false);
+        setHasSearched(true);
+        setRefreshKey((prev) => prev + 1);
+        return true;
     }
 
     const removeSavedFilter = () => {
-        setCurrentSavedFilterData(null);
-        setCurrentSavedFilterQuery(null);
-        setCurrentSavedFilterRules(null);
-        setShowSavedFilterComponent(false);
-        if (searchParams.has("savedQuery")) {
-            router.replace(buildSavedFilterUrl(null));
-        }
-        setHasSearched(true);
-        setRefreshKey((prev) => prev + 1);
+        clearActiveSavedFilter();
     }
 
     const SavedFiltersChip = () => {
@@ -1697,16 +1748,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             });
         });
 
-        (definedFilters || []).forEach((definedFilter: any) => {
-            if (!definedFilter?.applied) return;
-            items.push({
-                id: `handler:${definedFilter.key}`,
-                type: "handler",
-                label: definedFilter.label,
-                onRemove: () => onRemoveDefinedFilter?.(definedFilter.key),
-            });
-        });
-
         return items;
     }, [
         currentSavedFilterData,
@@ -1716,8 +1757,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         groupingRules,
         groupedSearchChips,
         searchableFields,
-        definedFilters,
-        onRemoveDefinedFilter,
     ]);
 
     const MAX_VISIBLE_CHIPS = 3;
@@ -1759,7 +1798,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                     predefined: p,
                 }))
                 : [];
-        const saved: OverlayOption[] = (availableSavedFilters || []).map((s: any) => ({
+        const saved: OverlayOption[] = (selectableSavedFilters || []).map((s: any) => ({
             id: `saved:${s.id}`,
             kind: "saved" as const,
             saved: s,
@@ -1776,8 +1815,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 }]
                 : [];
 
-        return [...fields, ...predefined, ...saved, ...custom, ...grouping];
-    }, [inputValue, searchableFields, predefinedSearches, availableSavedFilters, viewType]);
+        return [...predefined, ...fields, ...saved, ...custom, ...grouping];
+    }, [inputValue, searchableFields, predefinedSearches, selectableSavedFilters, viewType]);
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const currentValue = inputValue?.trim() || "";
@@ -1800,6 +1839,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             setShowOverlay(false);
         };
 
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setShowOverlay(false);
+            return;
+        }
+
         if ((e.key === "ArrowDown" || e.key === "ArrowUp") && overlayOptions.length > 0) {
             e.preventDefault();
             setShowOverlay(true);
@@ -1811,6 +1856,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             return;
         }
 
+        if ((e.key === "Home" || e.key === "End") && showOverlay && overlayOptions.length > 0) {
+            e.preventDefault();
+            setFocusedIndex(e.key === "Home" ? 0 : overlayOptions.length - 1);
+            return;
+        }
+
         if (e.key === "Enter") {
             if (currentValue || focusedIndex >= 0) {
                 e.preventDefault();
@@ -1842,7 +1893,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             } else if (predefinedSearchChip) {
                 setPredefinedSearchChip(null);
                 setPredefinedSearchBaseFilter(null);
-            } else if (activeSavedFilter) {
+            } else if (currentSavedFilterData) {
                 removeSavedFilter();
             }
             setHasSearched(true);
@@ -2028,7 +2079,13 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                     ref={searchInputRef}
                                     className="solid-global-search-input"
                                     value={inputValue || ""}
-                                    placeholder="Search."
+                                    placeholder="Search…"
+                                    role="combobox"
+                                    aria-label="Search and filter"
+                                    aria-autocomplete="list"
+                                    aria-expanded={showOverlay}
+                                    aria-controls={showOverlay ? overlayListboxId : undefined}
+                                    aria-activedescendant={showOverlay && focusedIndex >= 0 ? getOverlayOptionId(focusedIndex) : undefined}
                                     onChange={(e) => {
                                         setInputValue(e.target.value);
                                         setShowChipManager(false);
@@ -2059,6 +2116,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                         focusSearchInput();
                                     }}
                                     className="custom-filter-button solid-global-search-trigger"
+                                    aria-label="Open search options"
                                 >
                                     <Search size={14} />
                                 </SolidButton>
@@ -2103,53 +2161,77 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 )} */}
 
                 {showOverlay && (
-                    <div ref={overlayRef} className="absolute w-full shadow-md solid-search-overlay-pannel">
+                    <div
+                        ref={overlayRef}
+                        id={overlayListboxId}
+                        role="listbox"
+                        aria-label="Search and filter options"
+                        className="solid-search-overlay-panel"
+                    >
                         <div className="solid-search-overlay-scroll">
-                            {(definedFilters || []).some((f: any) => !f?.applied) && (
-                                <>
-                                    <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-2">
-                                        <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
-                                            <ListFilter size={13} />
-                                            <span>Defined filters</span>
-                                        </h6>
-                                        <div className="solid-defined-filter-badge-row">
-                                            {(definedFilters || [])
-                                                .filter((f: any) => !f?.applied)
-                                                .map((definedFilter: any) => (
-                                                    <button
-                                                        key={definedFilter.key}
-                                                        type="button"
-                                                        className="solid-defined-filter-badge"
-                                                        onMouseDown={(e) => {
-                                                            e.preventDefault();
-                                                            onApplyDefinedFilter?.(definedFilter.key);
-                                                            setShowOverlay(false);
-                                                        }}
-                                                    >
-                                                        <Plus size={12} />
-                                                        <span className="solid-defined-filter-badge-label">{definedFilter.label}</span>
-                                                    </button>
-                                                ))}
-                                        </div>
-                                    </div>
-                                    <div className="solid-filter-dialog-sep" />
-                                </>
-                            )}
                             {inputValue ? (
                                 <>
-                                    <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-1">
+                                    {predefinedSearches && predefinedSearches.length > 0 && (
+                                        <>
+                                            <div className="solid-search-overlay-section solid-search-overlay-section--predefined">
+                                                <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
+                                                    <Sparkles size={14} />
+                                                    <span>Suggested searches</span>
+                                                    <span className="solid-search-overlay-section-count">{predefinedSearches.length}</span>
+                                                </h6>
+                                                {predefinedSearches.map((predefinedSearch: any, index: number) => {
+                                                    const optionIndex = overlayOptions.findIndex((option) => option.id === `predefined:${predefinedSearch.name || index}`);
+                                                    return (
+                                                        <SolidButton
+                                                            key={index}
+                                                            id={getOverlayOptionId(optionIndex)}
+                                                            role="option"
+                                                            aria-selected={focusedIndex === optionIndex}
+                                                            variant="ghost"
+                                                            size="sm"
+                                                            className={`text-color solid-search-overlay-option ${focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""}`}
+                                                            onMouseDown={(e) => {
+                                                                e.preventDefault();
+                                                                handlePredefinedSearch(predefinedSearch);
+                                                            }}
+                                                            onMouseEnter={() => setFocusedIndex(optionIndex)}
+                                                        >
+                                                            <span className="solid-search-overlay-option-content">
+                                                                <span className="solid-search-overlay-option-icon" aria-hidden="true">
+                                                                    <Sparkles size={15} />
+                                                                </span>
+                                                                <span className="solid-search-overlay-option-copy">
+                                                                    <span className="solid-search-overlay-option-title">{predefinedSearch.name}</span>
+                                                                    <span className="solid-search-overlay-option-description">
+                                                                        Search for “{inputValue}”{predefinedSearch.description ? ` — ${predefinedSearch.description}` : ""}
+                                                                    </span>
+                                                                </span>
+                                                            </span>
+                                                        </SolidButton>
+                                                    );
+                                                })}
+                                            </div>
+                                            <div className="solid-filter-dialog-sep" />
+                                        </>
+                                    )}
+                                    <div className="solid-search-overlay-section solid-search-overlay-section--search">
                                         <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon">
                                             <Search size={13} />
-                                            <span>Search by fields</span>
+                                            <span>Search individual fields</span>
+                                            <span className="solid-search-overlay-section-count">{searchableFields.length}</span>
                                         </h6>
                                         {searchableFields.length > 0 ? (
                                             searchableFields.map((value: any, index: number) => {
+                                                const optionIndex = overlayOptions.findIndex((option) => option.id === `field:${value.fieldName}`);
                                                 return (
                                                     <SolidButton
                                                         key={index}
+                                                        id={getOverlayOptionId(optionIndex)}
+                                                        role="option"
+                                                        aria-selected={focusedIndex === optionIndex}
                                                         variant="ghost"
                                                         size="sm"
-                                                        className={`flex justify-start gap-1 text-color solid-search-overlay-option ${focusedIndex === index ? "solid-search-overlay-option-active" : ""}`}
+                                                        className={`text-color solid-search-overlay-option ${focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""}`}
                                                         onMouseDown={(e) => {
                                                             e.preventDefault();
                                                             const currentValue = inputValue?.trim();
@@ -2169,9 +2251,17 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                                 setShowOverlay(false);
                                                             }
                                                         }}
-                                                        onMouseEnter={() => setFocusedIndex(index)}
+                                                        onMouseEnter={() => setFocusedIndex(optionIndex)}
                                                     >
-                                                        Search <strong style={{ paddingLeft: "2px" }}>{toTitleCase(value.displayName.trim())}</strong>&nbsp;for:&nbsp; <span className="font-bold text-color">{inputValue}</span>
+                                                        <span className="solid-search-overlay-option-content">
+                                                            <span className="solid-search-overlay-option-icon" aria-hidden="true">
+                                                                <Search size={15} />
+                                                            </span>
+                                                            <span className="solid-search-overlay-option-copy">
+                                                                <span className="solid-search-overlay-option-title">{toTitleCase(value.displayName.trim())}</span>
+                                                                <span className="solid-search-overlay-option-description">Search for “{inputValue}”</span>
+                                                            </span>
+                                                        </span>
                                                     </SolidButton>
                                                 )
                                             })
@@ -2186,37 +2276,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                             </div>
                                         )}
                                     </div>
-                                    {predefinedSearches && predefinedSearches.length > 0 && (
-                                        <>
-                                            <div className="solid-filter-dialog-sep" />
-                                            <div className="custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-1">
-                                                <h6 className="my-1 solid-search-overlay-heading solid-search-overlay-section-title">Predefined searches</h6>
-                                                {predefinedSearches.map((predefinedSearch: any, index: number) => (
-                                                    <SolidButton
-                                                        key={index}
-                                                        variant="ghost"
-                                                        size="sm"
-                                                        className={`flex flex-col items-start gap-1 text-color solid-search-overlay-option solid-search-overlay-option-stacked ${focusedIndex === searchableFields.length + index ? "solid-search-overlay-option-active" : ""}`}
-                                                        onMouseDown={(e) => {
-                                                            e.preventDefault();
-                                                            handlePredefinedSearch(predefinedSearch);
-                                                        }}
-                                                        onMouseEnter={() => setFocusedIndex(searchableFields.length + index)}
-                                                    >
-                                                        <div className="flex items-center gap-1">
-                                                            <strong>{predefinedSearch.name}:</strong>
-                                                            <span className="font-bold text-color pr-1">{inputValue} </span>
-                                                        </div>
-                                                        <div className="text-xs">{predefinedSearch.description}</div>
-                                                    </SolidButton>
-                                                ))}
-                                            </div>
-                                        </>
-                                    )}
                                 </>
                             ) :
                                 <>
-                                    <div className="p-3 solid-search-overlay-empty">
+                                    <div className="solid-search-overlay-empty">
                                         <div className="solid-search-overlay-panel-callout">
                                             <div className="solid-search-overlay-panel-callout-icon">
                                                 <Search size={13} />
@@ -2226,7 +2289,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                     Start typing to search
                                                 </div>
                                                 <div className="solid-search-overlay-empty-subtitle">
-                                                    Start typing in search input to see all fields on which you can search {searchableEntityLabel} by.
+                                                    Enter a value to see suggested searches and searchable {searchableEntityLabel} fields.
                                                 </div>
                                             </div>
                                         </div>
@@ -2234,26 +2297,27 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                     <div className="solid-filter-dialog-sep" />
                                 </>
                             }
-                            {availableSavedFilters.length > 0 &&
+                            {selectableSavedFilters.length > 0 &&
                                 <>
-                                    <div className="p-3 solid-search-overlay-section">
+                                    <hr className="solid-search-overlay-section-separator" />
+                                    <div className="solid-search-overlay-section solid-search-overlay-section--saved">
                                         <div className="solid-search-overlay-panel-callout solid-search-overlay-panel-callout-compact">
                                             <div className="solid-search-overlay-panel-callout-icon">
                                                 <Bookmark size={13} />
                                             </div>
                                             <div className="solid-search-overlay-panel-callout-copy">
-                                                <p className="solid-search-overlay-heading solid-search-overlay-section-title">Saved filters</p>
-                                                <div className="solid-search-overlay-empty-subtitle">
-                                                    Reusable filter sets available for this view.
-                                                </div>
+                                                <p className="solid-search-overlay-heading solid-search-overlay-section-title">
+                                                    <span>Saved filters</span>
+                                                    <span className="solid-search-overlay-section-count">{selectableSavedFilters.length}</span>
+                                                </p>
                                             </div>
                                         </div>
-                                        <div className="flex flex-col solid-search-overlay-saved-list">
-                                            {availableSavedFilters.map((savedfilter: any, index: number) => (
+                                        <div className="solid-search-overlay-saved-list">
+                                            {selectableSavedFilters.map((savedfilter: any, index: number) => (
                                                 <SavedFilterList
                                                     key={savedfilter.id}
                                                     savedfilter={savedfilter}
-                                                    activeSavedFilter={activeSavedFilter || currentSavedFilterData?.systemKey || currentSavedFilterData?.id}
+                                                    activeSavedFilterReference={currentSavedFilterData?.systemKey || currentSavedFilterData?.id}
                                                     applySavedFilter={applySavedFilter}
                                                     openSavedCustomFilter={openSavedCustomFilter}
                                                     setSavedFilterTobeDeleted={setSavedFilterTobeDeleted}
@@ -2263,6 +2327,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                         const optIndex = overlayOptions.findIndex(o => o.id === `saved:${savedfilter.id}`);
                                                         if (optIndex !== -1) setFocusedIndex(optIndex);
                                                     }}
+                                                    optionId={getOverlayOptionId(overlayOptions.findIndex(o => o.id === `saved:${savedfilter.id}`))}
                                                 />
                                             ))}
                                         </div>
@@ -2274,7 +2339,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                         <div className="solid-search-overlay-footer">
                             <button
                                 type="button"
-                                className={`flex flex-col px-3 py-2 solid-search-overlay-footer-action ${overlayOptions[focusedIndex]?.id === "footer:custom" ? "solid-search-overlay-option-active" : ""}`}
+                                id={getOverlayOptionId(overlayOptions.findIndex((option) => option.id === "footer:custom"))}
+                                role="option"
+                                aria-selected={overlayOptions[focusedIndex]?.id === "footer:custom"}
+                                className={`solid-search-overlay-footer-action solid-search-overlay-footer-action--custom ${overlayOptions[focusedIndex]?.id === "footer:custom" ? "solid-search-overlay-option-active" : ""}`}
                                 onMouseDown={(event) => {
                                     event.preventDefault();
                                     openCustomFilterDialog();
@@ -2290,10 +2358,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                     </div>
                                     <div className="solid-search-overlay-panel-callout-copy">
                                         <div className="solid-search-overlay-footer-title solid-search-overlay-section-title">
-                                            Click here to apply custom filters
+                                            Advanced filters
                                         </div>
                                         <div className="solid-search-overlay-footer-subtitle">
-                                            Use custom filters to apply conditions on any field using any operator.
+                                            Combine fields, operators and values.
                                         </div>
                                     </div>
                                 </div>
@@ -2301,7 +2369,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                             {viewType === "tree" && (
                                 <button
                                     type="button"
-                                    className={`flex flex-col px-3 py-2 solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ${overlayOptions[focusedIndex]?.id === "footer:grouping" ? "solid-search-overlay-option-active" : ""}`}
+                                    id={getOverlayOptionId(overlayOptions.findIndex((option) => option.id === "footer:grouping"))}
+                                    role="option"
+                                    aria-selected={overlayOptions[focusedIndex]?.id === "footer:grouping"}
+                                    className={`solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ${overlayOptions[focusedIndex]?.id === "footer:grouping" ? "solid-search-overlay-option-active" : ""}`}
                                     onMouseDown={(event) => {
                                         event.preventDefault();
                                         openGroupingDialog();
@@ -2317,10 +2388,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                         </div>
                                         <div className="solid-search-overlay-panel-callout-copy">
                                             <div className="solid-search-overlay-footer-title solid-search-overlay-section-title">
-                                                Click here to do custom grouping
+                                                Group and aggregate
                                             </div>
                                             <div className="solid-search-overlay-footer-subtitle">
-                                                Configure grouping rules and aggregations for the tree view.
+                                                Organise records and calculate aggregate values.
                                             </div>
                                         </div>
                                     </div>