@solidxai/core-ui 0.1.14-beta.6 → 0.1.14-beta.9

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

@@ -58,16 +58,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import FilterComponent, { FilterOperator, 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, } from "./globalSearchPersistence";
+import { clearFilterObjectFromLocalStorage, getFilterObjectFromLocalStorage, setFilterObjectToLocalStorage, } from "./globalSearchPersistence";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
 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 from "./GroupingComponent";
 import { Bookmark, Check, Filter, ListFilter, Pencil, Plus, Search, SearchX, Trash2, X } from "lucide-react";
 import { SolidButton } from "../../shad-cn-ui/SolidButton";
@@ -412,8 +410,10 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
     return filters;
 };
 var SavedFilterList = function (_a) {
-    var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible, isFocused = _a.isFocused, onMouseEnter = _a.onMouseEnter;
-    var isActive = (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey) ? activeSavedFilter === savedfilter.systemKey : Number(activeSavedFilter) == savedfilter.id;
+    var savedfilter = _a.savedfilter, activeSavedFilterReference = _a.activeSavedFilterReference, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible, isFocused = _a.isFocused, onMouseEnter = _a.onMouseEnter;
+    var isActive = (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey)
+        ? activeSavedFilterReference === savedfilter.systemKey
+        : String(activeSavedFilterReference) === String(savedfilter.id);
     return (_jsxs("div", { className: "solid-saved-filter-item", onMouseEnter: onMouseEnter, children: [_jsx("div", { className: "solid-saved-filter-main-wrap", children: _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-saved-filter-main w-full ".concat(isActive ? "is-active" : "", " ").concat(isFocused ? "solid-search-overlay-option-active" : ""), onMouseDown: function (e) {
                         e.preventDefault();
                         applySavedFilter(savedfilter);
@@ -532,13 +532,9 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         { id: 1, fieldName: null, dateGrouping: null }
     ];
     var _0 = useState(defaultState), initialState = _0[0], setInitialState = _0[1];
-    var pathname = usePathname();
     var searchableEntityLabel = ((_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.displayName) ||
         ((_f = (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.displayName) ||
         "records";
-    var searchParams = useSearchParams(); // Converts the query params to a string
-    var activeSavedFilter = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("savedQuery");
-    var router = useRouter();
     var chipsRef = useRef(null);
     // filterRules is used to maintian the ui of custom filter 
     // customFilter is used to maintian the transformed filter object of custom filter
@@ -569,15 +565,16 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     // currentSavedFilterData  is used to save the whole object of saved filter 
     var _17 = useState(), currentSavedFilterData = _17[0], setCurrentSavedFilterData = _17[1];
     var _18 = useState(), currentSavedFilterQuery = _18[0], setCurrentSavedFilterQuery = _18[1];
-    var _19 = useState(), currentSavedFilterRules = _19[0], setCurrentSavedFilterRules = _19[1];
-    var _20 = useState(false), showSavedFilterComponent = _20[0], setShowSavedFilterComponent = _20[1];
-    var _21 = useState(), savedFilterTobeDeleted = _21[0], setSavedFilterTobeDeleted = _21[1];
-    var _22 = useState(false), isDeleteSQDialogVisible = _22[0], setIsDeleteSQDialogVisible = _22[1];
-    var _23 = useState(), savedFilterQueryString = _23[0], setSavedFilterQueryString = _23[1];
-    var _24 = useState(false), showOverlay = _24[0], setShowOverlay = _24[1];
+    var _19 = useState({}), currentSavedFilterVariables = _19[0], setCurrentSavedFilterVariables = _19[1];
+    var _20 = useState(), currentSavedFilterRules = _20[0], setCurrentSavedFilterRules = _20[1];
+    var _21 = useState(false), showSavedFilterComponent = _21[0], setShowSavedFilterComponent = _21[1];
+    var _22 = useState(), savedFilterTobeDeleted = _22[0], setSavedFilterTobeDeleted = _22[1];
+    var _23 = useState(false), isDeleteSQDialogVisible = _23[0], setIsDeleteSQDialogVisible = _23[1];
+    var _24 = useState(), savedFilterQueryString = _24[0], setSavedFilterQueryString = _24[1];
+    var _25 = useState(false), showOverlay = _25[0], setShowOverlay = _25[1];
     var overlayRef = useRef(null);
     var searchInputRef = useRef(null);
-    var _25 = useState(false), showChipManager = _25[0], setShowChipManager = _25[1];
+    var _26 = useState(false), showChipManager = _26[0], setShowChipManager = _26[1];
     var chipManagerRef = useRef(null);
     var chipManagerTriggerRef = useRef(null);
     var focusSearchInput = function () {
@@ -597,12 +594,12 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         }
     }, [focusedIndex, showOverlay]);
-    var _26 = useSession(), session = _26.data, status = _26.status;
+    var _27 = useSession(), session = _27.data, status = _27.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _27 = useState(0), refreshKey = _27[0], setRefreshKey = _27[1];
-    var _28 = useState(null), predefinedSearchBaseFilter = _28[0], setPredefinedSearchBaseFilter = _28[1];
-    var _29 = useState([]), savedFilters = _29[0], setSavedFilters = _29[1];
-    var _30 = useState(false), savedFiltersLoaded = _30[0], setSavedFiltersLoaded = _30[1];
+    var _28 = useState(0), refreshKey = _28[0], setRefreshKey = _28[1];
+    var _29 = useState(null), predefinedSearchBaseFilter = _29[0], setPredefinedSearchBaseFilter = _29[1];
+    var _30 = useState([]), savedFilters = _30[0], setSavedFilters = _30[1];
+    var _31 = useState(false), savedFiltersLoaded = _31[0], setSavedFiltersLoaded = _31[1];
     var isDraftPublishWorkflowEnabled = ((_j = (_h = (_g = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.draftPublishWorkflow) === true;
     var workflowPublishedVersionsSavedFilter = useMemo(function () {
         if (!isDraftPublishWorkflowEnabled)
@@ -619,26 +616,24 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }),
         };
     }, [isDraftPublishWorkflowEnabled]);
-    var availableSavedFilters = useMemo(function () { return workflowPublishedVersionsSavedFilter
+    var allAvailableSavedFilters = useMemo(function () { return workflowPublishedVersionsSavedFilter
         ? __spreadArray([workflowPublishedVersionsSavedFilter], (savedFilters || []), true) : (savedFilters || []); }, [workflowPublishedVersionsSavedFilter, savedFilters]);
-    var entityApi = createSolidEntityApi("savedFilters");
-    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _31 = useCreateSolidEntityMutation(), createEntity = _31[0], _32 = _31[1], isEntityCreateSuccess = _32.isSuccess, isEntityCreateError = _32.isError, entityCreateError = _32.error;
-    var _33 = useUpdateSolidEntityMutation(), updateEntity = _33[0], _34 = _33[1], isEntityUpdateSuceess = _34.isSuccess, isEntityUpdateError = _34.isError, entityUpdateError = _34.error;
-    var _35 = useDeleteSolidEntityMutation(), deleteEntity = _35[0], _36 = _35[1], isEntityDeleteSuceess = _36.isSuccess, isEntityDeleteError = _36.isError, entityDeleteError = _36.error;
-    var _37 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _37[0], _38 = _37[1], solidEntityListViewData = _38.data, isSavedFilterLoading = _38.isLoading, error = _38.error;
-    var _39 = useState(0), savedFilterFetchDataRefreshKey = _39[0], setSavedFilterFetchDataRefreshKey = _39[1];
-    var buildSavedFilterUrl = function (savedQueryId) {
-        var params = new URLSearchParams(searchParams.toString());
-        if (savedQueryId === null || savedQueryId === undefined || savedQueryId === "") {
-            params.delete("savedQuery");
+    var availableSavedFilters = allAvailableSavedFilters;
+    var selectableSavedFilters = useMemo(function () { return allAvailableSavedFilters.filter(function (filter) {
+        try {
+            return getUnboundSavedFilterVariableNames(parseSavedFilterQueryJson(filter.filterQueryJson || "{}")).length === 0;
         }
-        else {
-            params.set("savedQuery", String(savedQueryId));
+        catch (_a) {
+            return false;
         }
-        var queryString = params.toString();
-        return queryString ? "".concat(pathname, "?").concat(queryString) : pathname;
-    };
+    }); }, [allAvailableSavedFilters]);
+    var entityApi = createSolidEntityApi("savedFilters");
+    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var _32 = useCreateSolidEntityMutation(), createEntity = _32[0], _33 = _32[1], isEntityCreateSuccess = _33.isSuccess, isEntityCreateError = _33.isError, entityCreateError = _33.error;
+    var _34 = useUpdateSolidEntityMutation(), updateEntity = _34[0], _35 = _34[1], isEntityUpdateSuceess = _35.isSuccess, isEntityUpdateError = _35.isError, entityUpdateError = _35.error;
+    var _36 = useDeleteSolidEntityMutation(), deleteEntity = _36[0], _37 = _36[1], isEntityDeleteSuceess = _37.isSuccess, isEntityDeleteError = _37.isError, entityDeleteError = _37.error;
+    var _38 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _38[0], _39 = _38[1], solidEntityListViewData = _39.data, isSavedFilterLoading = _39.isLoading, error = _39.error;
+    var _40 = useState(0), savedFilterFetchDataRefreshKey = _40[0], setSavedFilterFetchDataRefreshKey = _40[1];
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var filters, queryData, queryString, savedFilter;
@@ -692,7 +687,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         }); };
         fn();
     }, [
-        activeSavedFilter,
         savedFilterFetchDataRefreshKey,
         (_l = (_k = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.id,
         (_p = (_o = (_m = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _m === void 0 ? void 0 : _m.solidView) === null || _o === void 0 ? void 0 : _o.model) === null || _p === void 0 ? void 0 : _p.id,
@@ -700,10 +694,10 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     ]);
     // Updates search, custom filter, grouping, aggregation, and UI state from a single shared filter source.
     var syncFilterUiStateFromSharedSource = useCallback(function (queryObject) { return __awaiter(void 0, void 0, void 0, function () {
-        var nextSearchFilter, nextSearchChips, nextCustomFilter, nextPredefinedBaseFilter, nextSavedFilter, nextSavedFilterData, rules, hydratedRules_1, hasGroupingRules, nextGroupingRules, layoutGroupBy, nextAggregationRules;
-        var _a, _b, _c, _d, _e;
-        return __generator(this, function (_f) {
-            switch (_f.label) {
+        var nextSearchFilter, nextSearchChips, nextCustomFilter, nextPredefinedBaseFilter, nextPredefinedSearchChip, nextSavedFilter, nextSavedFilterVariables, nextSavedFilterData, rules, hydratedRules_1, hasGroupingRules, nextGroupingRules, layoutGroupBy, nextAggregationRules;
+        var _a, _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
                 case 0:
                     nextSearchFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search_predicate) || null;
                     nextSearchChips = nextSearchFilter ? extractChips(nextSearchFilter) : [];
@@ -711,7 +705,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                         ? queryObject.custom_filter_predicate
                         : null;
                     nextPredefinedBaseFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.predefined_search_predicate) || null;
+                    nextPredefinedSearchChip = nextPredefinedBaseFilter && (queryObject === null || queryObject === void 0 ? void 0 : queryObject.predefined_search_chip)
+                        ? queryObject.predefined_search_chip
+                        : null;
                     nextSavedFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.saved_filter_predicate) || null;
+                    nextSavedFilterVariables = (_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.saved_filter_variables) !== null && _a !== void 0 ? _a : {};
                     nextSavedFilterData = nextSavedFilter
                         ? availableSavedFilters.find(function (savedFilter) {
                             if (queryObject === null || queryObject === void 0 ? void 0 : queryObject.saved_filter_system_key) {
@@ -732,26 +730,28 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setSearchChips(function (prev) { return areFilterStateValuesEqual(prev, nextSearchChips) ? prev : nextSearchChips; });
                     setCustomFilter(function (prev) { return areFilterStateValuesEqual(prev, nextCustomFilter) ? prev : nextCustomFilter; });
                     setPredefinedSearchBaseFilter(function (prev) { return areFilterStateValuesEqual(prev, nextPredefinedBaseFilter) ? prev : nextPredefinedBaseFilter; });
+                    setPredefinedSearchChip(function (prev) { return areFilterStateValuesEqual(prev, nextPredefinedSearchChip) ? prev : nextPredefinedSearchChip; });
                     setCurrentSavedFilterData(function (prev) { return areFilterStateValuesEqual(prev, nextSavedFilterData) ? prev : nextSavedFilterData; });
                     setCurrentSavedFilterQuery(function (prev) { return areFilterStateValuesEqual(prev, nextSavedFilter) ? prev : nextSavedFilter; });
+                    setCurrentSavedFilterVariables(function (prev) { return areFilterStateValuesEqual(prev, nextSavedFilterVariables) ? prev : nextSavedFilterVariables; });
                     if (!(nextCustomFilter && (viewData === null || viewData === void 0 ? void 0 : viewData.data))) return [3 /*break*/, 2];
                     rules = transformFiltersToRules(nextCustomFilter);
                     return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
                 case 1:
-                    hydratedRules_1 = _f.sent();
+                    hydratedRules_1 = _g.sent();
                     setFilterRules(function (prev) { return areFilterStateValuesEqual(prev, hydratedRules_1) ? prev : hydratedRules_1; });
                     return [3 /*break*/, 3];
                 case 2:
                     setFilterRules(function (prev) { return areFilterStateValuesEqual(prev, initialState) ? prev : initialState; });
-                    _f.label = 3;
+                    _g.label = 3;
                 case 3:
-                    hasGroupingRules = (_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _a === void 0 ? void 0 : _a.some(function (rule) { return rule.fieldName !== null; });
+                    hasGroupingRules = (_b = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _b === void 0 ? void 0 : _b.some(function (rule) { return rule.fieldName !== null; });
                     nextGroupingRules = [{ id: 1, fieldName: null, dateGrouping: null }];
                     if (hasGroupingRules) {
                         nextGroupingRules = queryObject.grouping_rules;
                     }
                     else {
-                        layoutGroupBy = (_e = (_d = (_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.groupBy;
+                        layoutGroupBy = (_f = (_e = (_d = (_c = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _c === void 0 ? void 0 : _c.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.attrs) === null || _f === void 0 ? void 0 : _f.groupBy;
                         if (Array.isArray(layoutGroupBy) && layoutGroupBy.length > 0) {
                             nextGroupingRules = layoutGroupBy.map(function (groupStr, index) {
                                 var _a = groupStr.split(":"), fieldName = _a[0], dateGrouping = _a[1];
@@ -782,6 +782,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setPredefinedSearchBaseFilter(null);
         setCurrentSavedFilterData(null);
         setCurrentSavedFilterQuery(null);
+        setCurrentSavedFilterVariables({});
         setCurrentSavedFilterRules(null);
         if (!preserveGrouping) {
             setGroupingRules(defaultGroupingRules);
@@ -791,12 +792,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setShowChipManager(false);
         setInputValue("");
         clearFilterObjectFromLocalStorage();
-        if (activeSavedFilter) {
-            var params = new URLSearchParams(searchParams.toString());
-            params.delete("savedQuery");
-            var nextUrl = params.toString() ? "".concat(pathname, "?").concat(params.toString()) : pathname;
-            router.replace(nextUrl);
-        }
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
     };
@@ -804,6 +799,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         clearFilter: function () {
             resetAppliedFilters();
         },
+        getSavedFilters: function () { return availableSavedFilters.map(function (filter) { return (__assign({}, filter)); }); },
+        applySavedFilterByName: function (name, variables) {
+            if (variables === void 0) { variables = {}; }
+            var savedFilter = allAvailableSavedFilters.find(function (filter) { return (filter === null || filter === void 0 ? void 0 : filter.name) === name; });
+            if (!savedFilter) {
+                return false;
+            }
+            return applySavedFilter(savedFilter, variables);
+        },
         clearAppliedFilters: function (options) {
             resetAppliedFilters(options);
         },
@@ -824,26 +828,13 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     }, [syncFilterUiStateFromSharedSource, (_r = (_q = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _q === void 0 ? void 0 : _q.solidView) === null || _r === void 0 ? void 0 : _r.id]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var queryObject, nextQueryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson;
+            var queryObject;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!savedFiltersLoaded) return [3 /*break*/, 2];
-                        if (activeSavedFilter && availableSavedFilters.length === 0)
-                            return [2 /*return*/];
                         queryObject = getFilterObjectFromLocalStorage();
-                        nextQueryObject = queryObject;
-                        if (activeSavedFilter) {
-                            currentSavedFilterId_1 = Number(activeSavedFilter);
-                            currentSavedFilterData_1 = availableSavedFilters.find(function (savedFilter) { return savedFilter.id === currentSavedFilterId_1; });
-                            if (currentSavedFilterData_1) {
-                                filterJson = JSON.parse(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
-                                if (filterJson) {
-                                    nextQueryObject = __assign(__assign({}, (queryObject || {})), { saved_filter_predicate: filterJson, saved_filter_id: currentSavedFilterData_1.id, saved_filter_system_key: currentSavedFilterData_1.systemKey, saved_filter_name: currentSavedFilterData_1.name });
-                                }
-                            }
-                        }
-                        return [4 /*yield*/, syncFilterUiStateFromSharedSource(nextQueryObject)];
+                        return [4 /*yield*/, syncFilterUiStateFromSharedSource(queryObject)];
                     case 1:
                         _a.sent();
                         setRefreshKey(function (prev) { return prev + 1; });
@@ -854,7 +845,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             });
         }); };
         fn();
-    }, [activeSavedFilter, availableSavedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, (_t = (_s = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _s === void 0 ? void 0 : _s.solidView) === null || _t === void 0 ? void 0 : _t.id]);
+    }, [availableSavedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, (_t = (_s = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _s === void 0 ? void 0 : _s.solidView) === null || _t === void 0 ? void 0 : _t.id]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -1137,6 +1128,17 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             var finalPredefinedFilter = predefinedSearchBaseFilter;
             var finalCustomFilter = customFilter;
             var finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter, groupingRules, aggregationRules);
+            finalFilter.predefined_search_chip =
+                finalPredefinedFilter && predefinedSearchChip
+                    ? predefinedSearchChip
+                    : null;
+            if (finalSavedFilter && Object.keys(finalSavedFilter).length > 0) {
+                var resolved = resolveSavedFilterVariables(finalSavedFilter, user === null || user === void 0 ? void 0 : user.id, currentSavedFilterVariables);
+                if (resolved.missingVariables.length > 0)
+                    return;
+                finalFilter.resolved_saved_filter_predicate = resolved.value;
+                finalFilter.saved_filter_variables = currentSavedFilterVariables;
+            }
             if (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id) {
                 finalFilter.saved_filter_id = currentSavedFilterData.id;
             }
@@ -1160,12 +1162,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         return JSON.stringify(customFilter) !== JSON.stringify(predefinedSearchBaseFilter);
     };
     var openSavedCustomFilter = function (savedfilter) { return __awaiter(void 0, void 0, void 0, function () {
-        var savedfilterId_1, currentSavedFilterData_2, filterJson, finalSavedFilter, rules, hydratedRules;
+        var savedfilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, rules, hydratedRules;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     //Open custom filter popup 
-                    // router.push(`?savedQuery=${savedfilter.id}`);
                     // setShowGlobalSearchElement(true);
                     // // dont refetch the data yet
                     // const customFilter = JSON.parse(savedfilter.filterQueryJson);
@@ -1182,12 +1183,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setPredefinedSearchBaseFilter(null);
                     if (!(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id)) return [3 /*break*/, 3];
                     savedfilterId_1 = savedfilter.id;
-                    // router.push(`?savedQuery=${savedfilter.id}`);
                     setShowOverlay(false);
-                    currentSavedFilterData_2 = availableSavedFilters.find(function (savedFilter) { return savedFilter.id === savedfilterId_1; });
-                    setCurrentSavedFilterData(currentSavedFilterData_2);
-                    if (!currentSavedFilterData_2) return [3 /*break*/, 2];
-                    filterJson = JSON.parse(currentSavedFilterData_2 === null || currentSavedFilterData_2 === void 0 ? void 0 : currentSavedFilterData_2.filterQueryJson);
+                    currentSavedFilterData_1 = availableSavedFilters.find(function (savedFilter) { return savedFilter.id === savedfilterId_1; });
+                    setCurrentSavedFilterData(currentSavedFilterData_1);
+                    if (!currentSavedFilterData_1) return [3 /*break*/, 2];
+                    filterJson = parseSavedFilterQueryJson(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
                     if (!filterJson) return [3 /*break*/, 2];
                     finalSavedFilter = filterJson;
                     setCurrentSavedFilterQuery(finalSavedFilter);
@@ -1206,8 +1206,25 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         });
     }); };
+    var persistActiveSavedFilter = function (savedFilter, filterJson, variables) {
+        var _a, _b, _c;
+        var persistedFilter = __assign(__assign({}, (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: (_a = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id) !== null && _a !== void 0 ? _a : null, saved_filter_system_key: (_b = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.systemKey) !== null && _b !== void 0 ? _b : null, saved_filter_name: (_c = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.name) !== null && _c !== void 0 ? _c : null });
+        delete persistedFilter.finalFullFilter;
+        setFilterObjectToLocalStorage(persistedFilter);
+    };
+    var clearActiveSavedFilter = function () {
+        setCurrentSavedFilterData(null);
+        setCurrentSavedFilterQuery(null);
+        setCurrentSavedFilterVariables({});
+        setCurrentSavedFilterRules(null);
+        setShowSavedFilterComponent(false);
+        var persistedFilter = __assign(__assign({}, (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(function (prev) { return prev + 1; });
+    };
     var deleteSavedFilter = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var parsedSearchParams, savedQuery;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: 
@@ -1216,10 +1233,8 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 case 1:
                     // delte the saved filter with id 
                     _a.sent();
-                    parsedSearchParams = searchParams;
-                    savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
-                    if (savedFilterTobeDeleted == savedQuery) {
-                        router.push(buildSavedFilterUrl(null));
+                    if (String(savedFilterTobeDeleted) === String(currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id)) {
+                        clearActiveSavedFilter();
                     }
                     setIsDeleteSQDialogVisible(false);
                     setTimeout(function () {
@@ -1230,7 +1245,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         });
     }); };
     var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
-        var filterJson, formData, savedFilterRecord_1, filterJson, formData, result_1, savedFilterRecord_2, error_1;
+        var filterJson, formData, savedFilterRecord_1, filterJson, formData, result, savedFilterRecord_2, error_1;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return __generator(this, function (_l) {
             switch (_l.label) {
@@ -1257,16 +1272,13 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setCustomFilter(null);
                     setPredefinedSearchChip(null);
                     setPredefinedSearchBaseFilter(null);
-                    clearFilterObjectFromLocalStorage();
                     savedFilterRecord_1 = { id: formValues.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
                     setSavedFilters(function (prev) { return prev.map(function (f) { return String(f === null || f === void 0 ? void 0 : f.id) === String(formValues.id) ? __assign(__assign({}, f), savedFilterRecord_1) : f; }); });
                     setCurrentSavedFilterData(savedFilterRecord_1);
                     setCurrentSavedFilterQuery(filterJson);
+                    persistActiveSavedFilter(savedFilterRecord_1, filterJson, currentSavedFilterVariables);
                     setHasSearched(true);
                     setRefreshKey(function (prev) { return prev + 1; });
-                    setTimeout(function () {
-                        router.push(buildSavedFilterUrl(formValues.id));
-                    }, 500);
                     return [3 /*break*/, 5];
                 case 3:
                     filterJson = customFilter;
@@ -1279,23 +1291,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     formData.append("userId", user === null || user === void 0 ? void 0 : user.id);
                     return [4 /*yield*/, createEntity(formData).unwrap()];
                 case 4:
-                    result_1 = _l.sent();
+                    result = _l.sent();
                     setSearchChips([]);
                     setSearchFilter(null);
                     setFilterRules(initialState);
                     setCustomFilter(null);
                     setPredefinedSearchChip(null);
                     setPredefinedSearchBaseFilter(null);
-                    clearFilterObjectFromLocalStorage();
-                    savedFilterRecord_2 = { id: result_1.data.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
+                    savedFilterRecord_2 = { id: result.data.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
                     setSavedFilters(function (prev) { return __spreadArray([savedFilterRecord_2], prev, true); });
                     setCurrentSavedFilterData(savedFilterRecord_2);
                     setCurrentSavedFilterQuery(filterJson);
+                    setCurrentSavedFilterVariables({});
+                    persistActiveSavedFilter(savedFilterRecord_2, filterJson, {});
                     setHasSearched(true);
                     setRefreshKey(function (prev) { return prev + 1; });
-                    setTimeout(function () {
-                        router.push(buildSavedFilterUrl(result_1.data.id));
-                    }, 500);
                     _l.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
@@ -1345,49 +1355,42 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                 }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "var(--primary-color, var(--primary))" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: ruleCount }), " rules applied"] })] }), _jsx("button", { type: "button", onClick: clearCustomFilter, style: { cursor: "pointer" }, className: "ml-1", children: _jsx(X, { size: 14 }) })] }) }));
     };
     //saved filter related code start
-    var applySavedFilter = function (savedfilter) {
+    var applySavedFilter = function (savedfilter, variables) {
+        if (variables === void 0) { variables = {}; }
+        if (!(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) && !(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey)) {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+            return false;
+        }
+        var filterJson;
+        try {
+            filterJson = parseSavedFilterQueryJson(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.filterQueryJson);
+        }
+        catch (_a) {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+            return false;
+        }
+        var resolved = resolveSavedFilterVariables(filterJson, user === null || user === void 0 ? void 0 : user.id, variables);
+        if (resolved.missingVariables.length > 0) {
+            console.error("Unable to apply saved filter '".concat(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.name, "': missing variables ").concat(resolved.missingVariables.join(", ")));
+            return false;
+        }
         setSearchChips([]);
         setSearchFilter(null);
         setFilterRules(initialState);
         setCustomFilter(null);
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
-        clearFilterObjectFromLocalStorage();
-        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey) {
-            setCurrentSavedFilterData(savedfilter);
-            try {
-                var filterJson = JSON.parse(savedfilter.filterQueryJson);
-                if (filterJson) {
-                    setCurrentSavedFilterQuery(filterJson);
-                }
-            }
-            catch (_a) {
-                console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-            }
-            setShowOverlay(false);
-            setHasSearched(true);
-            setRefreshKey(function (prev) { return prev + 1; });
-            return;
-        }
-        // push the savedQuery=1 in url 
-        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
-            router.push(buildSavedFilterUrl(savedfilter.id));
-            setShowOverlay(false);
-        }
-        else {
-            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-        }
-    };
-    var removeSavedFilter = function () {
-        setCurrentSavedFilterData(null);
-        setCurrentSavedFilterQuery(null);
-        setCurrentSavedFilterRules(null);
-        setShowSavedFilterComponent(false);
-        if (searchParams.has("savedQuery")) {
-            router.replace(buildSavedFilterUrl(null));
-        }
+        setCurrentSavedFilterData(savedfilter);
+        setCurrentSavedFilterQuery(filterJson);
+        setCurrentSavedFilterVariables(variables);
+        persistActiveSavedFilter(savedfilter, filterJson, variables);
+        setShowOverlay(false);
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
+        return true;
+    };
+    var removeSavedFilter = function () {
+        clearActiveSavedFilter();
     };
     var SavedFiltersChip = function () {
         return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () {
@@ -1543,7 +1546,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 predefined: p,
             }); })
             : [];
-        var saved = (availableSavedFilters || []).map(function (s) { return ({
+        var saved = (selectableSavedFilters || []).map(function (s) { return ({
             id: "saved:".concat(s.id),
             kind: "saved",
             saved: s,
@@ -1559,7 +1562,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 }]
             : [];
         return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], fields, true), predefined, true), saved, true), custom, true), grouping, true);
-    }, [inputValue, searchableFields, predefinedSearches, availableSavedFilters, viewType]);
+    }, [inputValue, searchableFields, predefinedSearches, selectableSavedFilters, viewType]);
     var handleKeyDown = function (e) {
         var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
         var applyFieldOption = function (value) {
@@ -1628,7 +1631,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 setPredefinedSearchChip(null);
                 setPredefinedSearchBaseFilter(null);
             }
-            else if (activeSavedFilter) {
+            else if (currentSavedFilterData) {
                 removeSavedFilter();
             }
             setHasSearched(true);
@@ -1742,10 +1745,10 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                                 e.preventDefault();
                                                                 handlePredefinedSearch(predefinedSearch);
                                                             }, onMouseEnter: function () { return setFocusedIndex(searchableFields.length + index); }, children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsxs("span", { className: "font-bold text-color pr-1", children: [inputValue, " "] })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)); })] })] }))] })) :
-                                    _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 solid-search-overlay-empty", children: _jsxs("div", { className: "solid-search-overlay-panel-callout", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Search, { size: 13 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-empty-title", children: "Start typing to search" }), _jsxs("div", { className: "solid-search-overlay-empty-subtitle", children: ["Start typing in search input to see all fields on which you can search ", searchableEntityLabel, " by."] })] })] }) }), _jsx("div", { className: "solid-filter-dialog-sep" })] }), availableSavedFilters.length > 0 &&
-                                    _jsx(_Fragment, { children: _jsxs("div", { className: "p-3 solid-search-overlay-section", children: [_jsxs("div", { className: "solid-search-overlay-panel-callout solid-search-overlay-panel-callout-compact", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Bookmark, { size: 13 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("p", { className: "solid-search-overlay-heading solid-search-overlay-section-title", children: "Saved filters" }), _jsx("div", { className: "solid-search-overlay-empty-subtitle", children: "Reusable filter sets available for this view." })] })] }), _jsx("div", { className: "flex flex-col solid-search-overlay-saved-list", children: availableSavedFilters.map(function (savedfilter, index) {
+                                    _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 solid-search-overlay-empty", children: _jsxs("div", { className: "solid-search-overlay-panel-callout", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Search, { size: 13 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-empty-title", children: "Start typing to search" }), _jsxs("div", { className: "solid-search-overlay-empty-subtitle", children: ["Start typing in search input to see all fields on which you can search ", searchableEntityLabel, " by."] })] })] }) }), _jsx("div", { className: "solid-filter-dialog-sep" })] }), selectableSavedFilters.length > 0 &&
+                                    _jsx(_Fragment, { children: _jsxs("div", { className: "p-3 solid-search-overlay-section", children: [_jsxs("div", { className: "solid-search-overlay-panel-callout solid-search-overlay-panel-callout-compact", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Bookmark, { size: 13 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("p", { className: "solid-search-overlay-heading solid-search-overlay-section-title", children: "Saved filters" }), _jsx("div", { className: "solid-search-overlay-empty-subtitle", children: "Reusable filter sets available for this view." })] })] }), _jsx("div", { className: "flex flex-col solid-search-overlay-saved-list", children: selectableSavedFilters.map(function (savedfilter, index) {
                                                         var _a;
-                                                        return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter || (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.systemKey) || (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id), applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible, isFocused: ((_a = overlayOptions[focusedIndex]) === null || _a === void 0 ? void 0 : _a.id) === "saved:".concat(savedfilter.id), onMouseEnter: function () {
+                                                        return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilterReference: (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.systemKey) || (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id), applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible, isFocused: ((_a = overlayOptions[focusedIndex]) === null || _a === void 0 ? void 0 : _a.id) === "saved:".concat(savedfilter.id), onMouseEnter: function () {
                                                                 var optIndex = overlayOptions.findIndex(function (o) { return o.id === "saved:".concat(savedfilter.id); });
                                                                 if (optIndex !== -1)
                                                                     setFocusedIndex(optIndex);