@iblai/iblai-js 1.17.24 → 1.17.25

package/dist/web-containers/source/index.esm.js

@@ -88768,7 +88768,7 @@ function UsersTab({ tenant, onInviteClick }) {
     });
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
             }
             else {
@@ -89157,7 +89157,7 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
         platformKey: tenant,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     }, { skip: isTeam });
     const { data: platformGroupsData, isLoading: isLoadingPlatformGroups, isError: isErrorPlatformGroups, refetch: refetchPlatformGroups, } = usePlatformUserGroupsQuery({
         platformKey: tenant,
@@ -89165,12 +89165,12 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
         withPermissions: true,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     }, { skip: !isTeam });
     // Debounce search query
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1); // Reset to first page on new search
             }
@@ -89448,8 +89448,7 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
                 }
                 toast.success(isTeam ? 'Team created' : 'Group created');
             }
-            setIsOpen(false);
-            setEditing(null);
+            closeDialog();
         }
         catch (e) {
             const errorMessage = ((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.detail) || (e === null || e === void 0 ? void 0 : e.message);
@@ -89489,6 +89488,16 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
             setDeletingGroupId(null);
         }
     }
+    // Reset edit state when the dialog closes so re-opening the same group/team
+    // re-triggers the details query and the members-population effect.
+    function closeDialog() {
+        setIsOpen(false);
+        setEditing(null);
+        setEditingGroupId(null);
+        setEditingTeamId(null);
+        setMembers([]);
+        setOriginalMembers([]);
+    }
     function openSharePanel(g) {
         setShareTeamId(g.id);
         setShareTeamName(g.name);
@@ -89496,7 +89505,14 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
     }
     return (jsxs("div", { className: "mt-4", children: [jsxs("div", { className: `flex mb-6 gap-2 ${isTeam ? 'flex-col sm:flex-row sm:items-center sm:justify-between' : 'flex-row items-center justify-between'}`, children: [jsxs("div", { className: "relative max-w-sm w-full sm:w-auto", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: isTeam ? 'Search teams' : 'Search groups', "aria-label": isTeam ? 'Search teams' : 'Search groups', className: "pl-10 pr-10 focus:ring-blue-500 focus:border-blue-500 h-[35px]" }), isLoading && (jsx(LoaderCircle, { "data-testid": "search-spinner", className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 animate-spin", "aria-hidden": "true" }))] }), jsxs("div", { className: "flex gap-2", children: [isTeam && hasInviteUserPermission && onInviteClick && (jsx(Button$1, { onClick: onInviteClick, "aria-label": "Invite users", className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px]", children: "Invite" })), isTeam ? (hasCreateTeamPermission && (jsx(Button$1, { onClick: openNew, "aria-label": "New team", className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px]", children: "New Team" }))) : (jsx(Button$1, { onClick: openNew, "aria-label": "New group", className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px]", children: "New Group" }))] })] }), isLoading && (jsx("div", { className: "flex justify-center items-center h-64", children: jsx("div", { className: "py-8 text-center text-sm text-gray-500 dark:text-gray-400", children: "Loading\u2026" }) })), isError && (jsx("div", { className: "py-8 text-center text-sm text-red-500", children: isTeam ? 'Failed to load teams' : 'Failed to load groups' })), !isLoading && !isError && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-x-auto", children: jsxs("table", { className: "w-full text-sm", children: [jsx("thead", { className: "bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600", children: jsxs("tr", { children: [jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: isTeam ? 'Team Name' : 'Group Name' }), !isTeam && (jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Unique ID" })), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Description" }), jsx("th", { className: "px-6 py-3 text-right font-medium text-gray-500 dark:text-gray-400 w-[120px]" })] }) }), jsxs("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600", children: [groups.map((g) => (jsxs("tr", { children: [jsx("td", { className: "px-6 py-4 text-gray-900 dark:text-gray-100 text-sm", children: g.name }), !isTeam && (jsx("td", { className: "px-6 py-4 text-gray-600 dark:text-gray-300 text-sm", children: g.unique_id })), jsx("td", { className: "px-6 py-4 text-gray-600 dark:text-gray-300 text-sm", children: g.description }), jsx("td", { className: "px-6 py-4", children: jsxs("div", { className: "flex gap-2 justify-end", children: [isTeam && (jsx(WithPermissions, { rbacResource: `/platforms/${tenant}/usergroups/${g.id}/#share_usergroup`, rbacPermissions: rbacPermissions, children: ({ hasPermission }) => (hasPermission || !enableRbac) && (jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => openSharePanel(g), disabled: deletingGroupId === g.id, "aria-label": `Share team ${g.name}`, children: jsx(Share2, { className: "h-4 w-4", "aria-hidden": "true" }) })) })), jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => openEdit(g), disabled: deletingGroupId === g.id, "aria-label": `Edit ${isTeam ? 'team' : 'group'} ${g.name}`, children: jsx(Pencil, { className: "h-4 w-4", "aria-hidden": "true" }) }), jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, children: jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => onDelete(g), className: "text-red-600 hover:text-red-700", disabled: deletingGroupId === g.id ||
                                                                                 g.is_internal ||
-                                                                                !g.permissions.object.delete, "aria-label": `Delete ${isTeam ? 'team' : 'group'} ${g.name}`, children: deletingGroupId === g.id ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" })) : (jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" })) }) }) }), g.is_internal && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete internal ", isTeam ? 'teams' : 'groups'] }) })), !g.permissions.object.delete && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete ", isTeam ? 'teams' : 'groups'] }) }))] }) })] }) })] }, g.id))), groups.length === 0 && (jsx("tr", { children: jsx("td", { colSpan: isTeam ? 3 : 4, className: "px-6 py-8 text-center text-gray-500 dark:text-gray-400", children: isTeam ? 'No teams found' : 'No groups found' }) }))] })] }) })), !isLoading && !isError && (jsx(AdvancedPagination, { variant: "footer", className: "-mx-6 -mb-6 mt-4 rounded-b-lg", totalPages: totalPages, currentPage: page, onPageChange: (newPage) => handlePageChange(newPage), totalCount: data === null || data === void 0 ? void 0 : data.count, itemsPerPage: 10, itemLabel: "groups" })), jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: jsxs(DialogContent, { "aria-describedby": undefined, className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: editing ? (isTeam ? 'Edit Team' : 'Edit Group') : isTeam ? 'New Team' : 'New Group' }) }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { htmlFor: "g-name", children: isTeam ? 'Team Name' : 'Group Name' }), jsx(Input, { id: "g-name", value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }), placeholder: isTeam ? 'Enter team name' : 'Enter group name', required: true })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { htmlFor: "g-desc", children: "Description" }), jsx(Input, { id: "g-desc", value: form.description, onChange: (e) => setForm({ ...form, description: e.target.value }), placeholder: isTeam ? 'Enter team description' : 'Enter group description' })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { children: isTeam ? 'Team Members' : 'Group Members' }), jsx("div", { className: "space-y-2", children: members.length > 0 ? (jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-md p-2", children: members.map((member) => (jsxs("div", { className: "flex items-center justify-between bg-gray-50 dark:bg-gray-800 p-2 rounded-md", children: [jsxs("div", { className: "flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: member.name || member.username }), member.email && (jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: member.email }))] }), jsx(Button$1, { type: "button", variant: "ghost", size: "sm", onClick: () => removeMember(member.id), className: "h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20", "aria-label": `Remove ${member.name}`, children: jsx(X$1, { className: "h-4 w-4" }) })] }, member.id))) })) : (jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400 p-4 text-center border border-dashed border-gray-300 dark:border-gray-600 rounded-md", children: "No members added yet" })) })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { htmlFor: "user-search", children: "Add Members" }), jsxs("div", { className: "relative", children: [jsx(Input, { id: "user-search", value: userSearch, onChange: (e) => {
+                                                                                !g.permissions.object.delete, "aria-label": `Delete ${isTeam ? 'team' : 'group'} ${g.name}`, children: deletingGroupId === g.id ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" })) : (jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" })) }) }) }), g.is_internal && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete internal ", isTeam ? 'teams' : 'groups'] }) })), !g.permissions.object.delete && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete ", isTeam ? 'teams' : 'groups'] }) }))] }) })] }) })] }, g.id))), groups.length === 0 && (jsx("tr", { children: jsx("td", { colSpan: isTeam ? 3 : 4, className: "px-6 py-8 text-center text-gray-500 dark:text-gray-400", children: isTeam ? 'No teams found' : 'No groups found' }) }))] })] }) })), !isLoading && !isError && (jsx(AdvancedPagination, { variant: "footer", className: "-mx-6 -mb-6 mt-4 rounded-b-lg", totalPages: totalPages, currentPage: page, onPageChange: (newPage) => handlePageChange(newPage), totalCount: data === null || data === void 0 ? void 0 : data.count, itemsPerPage: 10, itemLabel: "groups" })), jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
+                    if (open) {
+                        setIsOpen(true);
+                    }
+                    else {
+                        closeDialog();
+                    }
+                }, children: jsxs(DialogContent, { "aria-describedby": undefined, className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: editing ? (isTeam ? 'Edit Team' : 'Edit Group') : isTeam ? 'New Team' : 'New Group' }) }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { htmlFor: "g-name", children: isTeam ? 'Team Name' : 'Group Name' }), jsx(Input, { id: "g-name", value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }), placeholder: isTeam ? 'Enter team name' : 'Enter group name', required: true })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { htmlFor: "g-desc", children: "Description" }), jsx(Input, { id: "g-desc", value: form.description, onChange: (e) => setForm({ ...form, description: e.target.value }), placeholder: isTeam ? 'Enter team description' : 'Enter group description' })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { children: isTeam ? 'Team Members' : 'Group Members' }), jsx("div", { className: "space-y-2", children: members.length > 0 ? (jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-md p-2", children: members.map((member) => (jsxs("div", { className: "flex items-center justify-between bg-gray-50 dark:bg-gray-800 p-2 rounded-md", children: [jsxs("div", { className: "flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: member.name || member.username }), member.email && (jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: member.email }))] }), jsx(Button$1, { type: "button", variant: "ghost", size: "sm", onClick: () => removeMember(member.id), className: "h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20", "aria-label": `Remove ${member.name}`, children: jsx(X$1, { className: "h-4 w-4" }) })] }, member.id))) })) : (jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400 p-4 text-center border border-dashed border-gray-300 dark:border-gray-600 rounded-md", children: "No members added yet" })) })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label$2, { htmlFor: "user-search", children: "Add Members" }), jsxs("div", { className: "relative", children: [jsx(Input, { id: "user-search", value: userSearch, onChange: (e) => {
                                                         setUserSearch(e.target.value);
                                                         setShowUserSearch(e.target.value.length > 0);
                                                     }, onFocus: () => setShowUserSearch(userSearch.length > 0), placeholder: "Type to search users...", className: "w-full" }), showUserSearch && availableUsers.length > 0 && (jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg max-h-48 overflow-y-auto z-50", children: availableUsers.map((user) => (jsxs("button", { type: "button", onClick: () => {
@@ -89507,7 +89523,7 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
                                                                 email: user.email,
                                                                 username: user.username,
                                                             });
-                                                        }, className: "w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: user.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: user.email })] }, user.user_id))) })), showUserSearch && userSearch.length > 2 && availableUsers.length === 0 && (jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg p-3 z-50", children: jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No users found" }) }))] }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Type at least 3 characters to search for users" })] })] }), formError && (jsx("div", { className: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: formError }) })), jsxs(DialogFooter, { className: "mt-6", children: [jsx(Button$1, { variant: "outline", onClick: () => setIsOpen(false), children: "Cancel" }), (!isTeam || !editing || (isTeam && hasEditTeamPermission)) && (jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, children: jsxs(Button$1, { onClick: onSubmit, disabled: isSubmitting || (!!editing && (entityDetails === null || entityDetails === void 0 ? void 0 : entityDetails.is_internal)), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: [isSubmitting ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin mr-2", "aria-hidden": "true" })) : null, editing
+                                                        }, className: "w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: user.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: user.email })] }, user.user_id))) })), showUserSearch && userSearch.length > 2 && availableUsers.length === 0 && (jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg p-3 z-50", children: jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No users found" }) }))] }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Type at least 3 characters to search for users" })] })] }), formError && (jsx("div", { className: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: formError }) })), jsxs(DialogFooter, { className: "mt-6", children: [jsx(Button$1, { variant: "outline", onClick: closeDialog, children: "Cancel" }), (!isTeam || !editing || (isTeam && hasEditTeamPermission)) && (jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, children: jsxs(Button$1, { onClick: onSubmit, disabled: isSubmitting || (!!editing && (entityDetails === null || entityDetails === void 0 ? void 0 : entityDetails.is_internal)), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: [isSubmitting ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin mr-2", "aria-hidden": "true" })) : null, editing
                                                                 ? isTeam
                                                                     ? 'Save Team'
                                                                     : 'Save Group'
@@ -89528,7 +89544,7 @@ function RolesTab({ tenant }) {
         platformKey: tenant,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     });
     const [createRole] = useCreateRbacRoleMutation();
     const [updateRole] = useUpdateRbacRoleMutation();
@@ -89536,7 +89552,7 @@ function RolesTab({ tenant }) {
     // Debounce search query
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1); // Reset to first page on new search
             }
@@ -89678,7 +89694,7 @@ function PoliciesTab({ tenant }) {
         platformKey: tenant,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     });
     const [createPolicy] = useCreateRbacPolicyMutation();
     const [updatePolicy] = useUpdateRbacPolicyMutation();
@@ -89686,7 +89702,7 @@ function PoliciesTab({ tenant }) {
     // Debounce search query
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1); // Reset to first page on new search
             }
@@ -89713,6 +89729,7 @@ function PoliciesTab({ tenant }) {
     const [selectedGroups, setSelectedGroups] = useState([]);
     const [originalGroups, setOriginalGroups] = useState([]);
     const [roleSearch, setRoleSearch] = useState('');
+    const [debouncedRoleSearch, setDebouncedRoleSearch] = useState('');
     const [userSearch, setUserSearch] = useState('');
     const [groupSearch, setGroupSearch] = useState('');
     const [showRoleSearch, setShowRoleSearch] = useState(false);
@@ -89721,8 +89738,18 @@ function PoliciesTab({ tenant }) {
     const [deletingPolicyId, setDeletingPolicyId] = useState(null);
     // Fetch policy details when editing
     const { data: policyDetails } = useGetRbacPolicyDetailsQuery({ id: editingPolicyId, platform_key: tenant }, { skip: !editingPolicyId });
-    // Fetch roles for autocomplete
-    const { data: rolesData } = useGetRbacRolesQuery({ platformKey: tenant });
+    // Debounce role search and query the roles endpoint with the search term
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedRoleSearch(roleSearch.trim());
+        }, 300);
+        return () => clearTimeout(handler);
+    }, [roleSearch]);
+    // Fetch roles for autocomplete (server-side filtered by name)
+    const { data: rolesData } = useGetRbacRolesQuery({
+        platformKey: tenant,
+        ...(debouncedRoleSearch.length > 0 && { name: debouncedRoleSearch }),
+    });
     // Fetch groups for autocomplete
     const { data: groupsData } = useGetRbacGroupsQuery({ platformKey: tenant });
     // Fetch users for search
@@ -89744,14 +89771,11 @@ function PoliciesTab({ tenant }) {
     }, [data]);
     // Calculate total pages
     const totalPages = data ? Math.ceil(data.count / 10) : 0;
-    // Filter available roles
+    // Roles list (filtering happens server-side via the name query param)
     const availableRoles = useMemo(() => {
         var _a, _b, _c;
-        const rolesList = (_c = (_b = (_a = rolesData === null || rolesData === void 0 ? void 0 : rolesData.results) !== null && _a !== void 0 ? _a : rolesData === null || rolesData === void 0 ? void 0 : rolesData.data) !== null && _b !== void 0 ? _b : rolesData) !== null && _c !== void 0 ? _c : [];
-        if (!roleSearch)
-            return rolesList;
-        return rolesList.filter((role) => role.name.toLowerCase().includes(roleSearch.toLowerCase()));
-    }, [rolesData, roleSearch]);
+        return (_c = (_b = (_a = rolesData === null || rolesData === void 0 ? void 0 : rolesData.results) !== null && _a !== void 0 ? _a : rolesData === null || rolesData === void 0 ? void 0 : rolesData.data) !== null && _b !== void 0 ? _b : rolesData) !== null && _c !== void 0 ? _c : [];
+    }, [rolesData]);
     // Filter available groups
     const availableGroups = useMemo(() => {
         var _a, _b, _c;
@@ -89992,7 +90016,7 @@ function AlertsTab$1({ tenant }) {
     const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1);
             }

package/dist/web-containers/source/next/index.esm.js

@@ -125995,7 +125995,7 @@ function UsersTab({ tenant, onInviteClick }) {
     });
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
             }
             else {
@@ -126384,7 +126384,7 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
         platformKey: tenant,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     }, { skip: isTeam });
     const { data: platformGroupsData, isLoading: isLoadingPlatformGroups, isError: isErrorPlatformGroups, refetch: refetchPlatformGroups, } = usePlatformUserGroupsQuery({
         platformKey: tenant,
@@ -126392,12 +126392,12 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
         withPermissions: true,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     }, { skip: !isTeam });
     // Debounce search query
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1); // Reset to first page on new search
             }
@@ -126675,8 +126675,7 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
                 }
                 toast.success(isTeam ? 'Team created' : 'Group created');
             }
-            setIsOpen(false);
-            setEditing(null);
+            closeDialog();
         }
         catch (e) {
             const errorMessage = ((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.detail) || (e === null || e === void 0 ? void 0 : e.message);
@@ -126716,6 +126715,16 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
             setDeletingGroupId(null);
         }
     }
+    // Reset edit state when the dialog closes so re-opening the same group/team
+    // re-triggers the details query and the members-population effect.
+    function closeDialog() {
+        setIsOpen(false);
+        setEditing(null);
+        setEditingGroupId(null);
+        setEditingTeamId(null);
+        setMembers([]);
+        setOriginalMembers([]);
+    }
     function openSharePanel(g) {
         setShareTeamId(g.id);
         setShareTeamName(g.name);
@@ -126723,7 +126732,14 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
     }
     return (jsxs("div", { className: "mt-4", children: [jsxs("div", { className: `flex mb-6 gap-2 ${isTeam ? 'flex-col sm:flex-row sm:items-center sm:justify-between' : 'flex-row items-center justify-between'}`, children: [jsxs("div", { className: "relative max-w-sm w-full sm:w-auto", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: isTeam ? 'Search teams' : 'Search groups', "aria-label": isTeam ? 'Search teams' : 'Search groups', className: "pl-10 pr-10 focus:ring-blue-500 focus:border-blue-500 h-[35px]" }), isLoading && (jsx(LoaderCircle, { "data-testid": "search-spinner", className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 animate-spin", "aria-hidden": "true" }))] }), jsxs("div", { className: "flex gap-2", children: [isTeam && hasInviteUserPermission && onInviteClick && (jsx(Button$1, { onClick: onInviteClick, "aria-label": "Invite users", className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px]", children: "Invite" })), isTeam ? (hasCreateTeamPermission && (jsx(Button$1, { onClick: openNew, "aria-label": "New team", className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px]", children: "New Team" }))) : (jsx(Button$1, { onClick: openNew, "aria-label": "New group", className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white h-[35px]", children: "New Group" }))] })] }), isLoading && (jsx("div", { className: "flex justify-center items-center h-64", children: jsx("div", { className: "py-8 text-center text-sm text-gray-500 dark:text-gray-400", children: "Loading\u2026" }) })), isError && (jsx("div", { className: "py-8 text-center text-sm text-red-500", children: isTeam ? 'Failed to load teams' : 'Failed to load groups' })), !isLoading && !isError && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-x-auto", children: jsxs("table", { className: "w-full text-sm", children: [jsx("thead", { className: "bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600", children: jsxs("tr", { children: [jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: isTeam ? 'Team Name' : 'Group Name' }), !isTeam && (jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Unique ID" })), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: "Description" }), jsx("th", { className: "px-6 py-3 text-right font-medium text-gray-500 dark:text-gray-400 w-[120px]" })] }) }), jsxs("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600", children: [groups.map((g) => (jsxs("tr", { children: [jsx("td", { className: "px-6 py-4 text-gray-900 dark:text-gray-100 text-sm", children: g.name }), !isTeam && (jsx("td", { className: "px-6 py-4 text-gray-600 dark:text-gray-300 text-sm", children: g.unique_id })), jsx("td", { className: "px-6 py-4 text-gray-600 dark:text-gray-300 text-sm", children: g.description }), jsx("td", { className: "px-6 py-4", children: jsxs("div", { className: "flex gap-2 justify-end", children: [isTeam && (jsx(WithPermissions, { rbacResource: `/platforms/${tenant}/usergroups/${g.id}/#share_usergroup`, rbacPermissions: rbacPermissions, children: ({ hasPermission }) => (hasPermission || !enableRbac) && (jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => openSharePanel(g), disabled: deletingGroupId === g.id, "aria-label": `Share team ${g.name}`, children: jsx(Share2, { className: "h-4 w-4", "aria-hidden": "true" }) })) })), jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => openEdit(g), disabled: deletingGroupId === g.id, "aria-label": `Edit ${isTeam ? 'team' : 'group'} ${g.name}`, children: jsx(Pencil, { className: "h-4 w-4", "aria-hidden": "true" }) }), jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, children: jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => onDelete(g), className: "text-red-600 hover:text-red-700", disabled: deletingGroupId === g.id ||
                                                                                 g.is_internal ||
-                                                                                !g.permissions.object.delete, "aria-label": `Delete ${isTeam ? 'team' : 'group'} ${g.name}`, children: deletingGroupId === g.id ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" })) : (jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" })) }) }) }), g.is_internal && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete internal ", isTeam ? 'teams' : 'groups'] }) })), !g.permissions.object.delete && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete ", isTeam ? 'teams' : 'groups'] }) }))] }) })] }) })] }, g.id))), groups.length === 0 && (jsx("tr", { children: jsx("td", { colSpan: isTeam ? 3 : 4, className: "px-6 py-8 text-center text-gray-500 dark:text-gray-400", children: isTeam ? 'No teams found' : 'No groups found' }) }))] })] }) })), !isLoading && !isError && (jsx(AdvancedPagination, { variant: "footer", className: "-mx-6 -mb-6 mt-4 rounded-b-lg", totalPages: totalPages, currentPage: page, onPageChange: (newPage) => handlePageChange(newPage), totalCount: data === null || data === void 0 ? void 0 : data.count, itemsPerPage: 10, itemLabel: "groups" })), jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: jsxs(DialogContent, { "aria-describedby": undefined, className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: editing ? (isTeam ? 'Edit Team' : 'Edit Group') : isTeam ? 'New Team' : 'New Group' }) }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { htmlFor: "g-name", children: isTeam ? 'Team Name' : 'Group Name' }), jsx(Input, { id: "g-name", value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }), placeholder: isTeam ? 'Enter team name' : 'Enter group name', required: true })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { htmlFor: "g-desc", children: "Description" }), jsx(Input, { id: "g-desc", value: form.description, onChange: (e) => setForm({ ...form, description: e.target.value }), placeholder: isTeam ? 'Enter team description' : 'Enter group description' })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { children: isTeam ? 'Team Members' : 'Group Members' }), jsx("div", { className: "space-y-2", children: members.length > 0 ? (jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-md p-2", children: members.map((member) => (jsxs("div", { className: "flex items-center justify-between bg-gray-50 dark:bg-gray-800 p-2 rounded-md", children: [jsxs("div", { className: "flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: member.name || member.username }), member.email && (jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: member.email }))] }), jsx(Button$1, { type: "button", variant: "ghost", size: "sm", onClick: () => removeMember(member.id), className: "h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20", "aria-label": `Remove ${member.name}`, children: jsx(X$2, { className: "h-4 w-4" }) })] }, member.id))) })) : (jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400 p-4 text-center border border-dashed border-gray-300 dark:border-gray-600 rounded-md", children: "No members added yet" })) })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { htmlFor: "user-search", children: "Add Members" }), jsxs("div", { className: "relative", children: [jsx(Input, { id: "user-search", value: userSearch, onChange: (e) => {
+                                                                                !g.permissions.object.delete, "aria-label": `Delete ${isTeam ? 'team' : 'group'} ${g.name}`, children: deletingGroupId === g.id ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" })) : (jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" })) }) }) }), g.is_internal && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete internal ", isTeam ? 'teams' : 'groups'] }) })), !g.permissions.object.delete && (jsx(TooltipContent, { children: jsxs("p", { children: ["Cannot delete ", isTeam ? 'teams' : 'groups'] }) }))] }) })] }) })] }, g.id))), groups.length === 0 && (jsx("tr", { children: jsx("td", { colSpan: isTeam ? 3 : 4, className: "px-6 py-8 text-center text-gray-500 dark:text-gray-400", children: isTeam ? 'No teams found' : 'No groups found' }) }))] })] }) })), !isLoading && !isError && (jsx(AdvancedPagination, { variant: "footer", className: "-mx-6 -mb-6 mt-4 rounded-b-lg", totalPages: totalPages, currentPage: page, onPageChange: (newPage) => handlePageChange(newPage), totalCount: data === null || data === void 0 ? void 0 : data.count, itemsPerPage: 10, itemLabel: "groups" })), jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
+                    if (open) {
+                        setIsOpen(true);
+                    }
+                    else {
+                        closeDialog();
+                    }
+                }, children: jsxs(DialogContent, { "aria-describedby": undefined, className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: editing ? (isTeam ? 'Edit Team' : 'Edit Group') : isTeam ? 'New Team' : 'New Group' }) }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { htmlFor: "g-name", children: isTeam ? 'Team Name' : 'Group Name' }), jsx(Input, { id: "g-name", value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }), placeholder: isTeam ? 'Enter team name' : 'Enter group name', required: true })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { htmlFor: "g-desc", children: "Description" }), jsx(Input, { id: "g-desc", value: form.description, onChange: (e) => setForm({ ...form, description: e.target.value }), placeholder: isTeam ? 'Enter team description' : 'Enter group description' })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { children: isTeam ? 'Team Members' : 'Group Members' }), jsx("div", { className: "space-y-2", children: members.length > 0 ? (jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-md p-2", children: members.map((member) => (jsxs("div", { className: "flex items-center justify-between bg-gray-50 dark:bg-gray-800 p-2 rounded-md", children: [jsxs("div", { className: "flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: member.name || member.username }), member.email && (jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: member.email }))] }), jsx(Button$1, { type: "button", variant: "ghost", size: "sm", onClick: () => removeMember(member.id), className: "h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20", "aria-label": `Remove ${member.name}`, children: jsx(X$2, { className: "h-4 w-4" }) })] }, member.id))) })) : (jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400 p-4 text-center border border-dashed border-gray-300 dark:border-gray-600 rounded-md", children: "No members added yet" })) })] }), jsxs("div", { className: "grid gap-1.5", children: [jsx(Label, { htmlFor: "user-search", children: "Add Members" }), jsxs("div", { className: "relative", children: [jsx(Input, { id: "user-search", value: userSearch, onChange: (e) => {
                                                         setUserSearch(e.target.value);
                                                         setShowUserSearch(e.target.value.length > 0);
                                                     }, onFocus: () => setShowUserSearch(userSearch.length > 0), placeholder: "Type to search users...", className: "w-full" }), showUserSearch && availableUsers.length > 0 && (jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg max-h-48 overflow-y-auto z-50", children: availableUsers.map((user) => (jsxs("button", { type: "button", onClick: () => {
@@ -126734,7 +126750,7 @@ function GroupsTab({ tenant, isTeam = false, hasInviteUserPermission = false, ha
                                                                 email: user.email,
                                                                 username: user.username,
                                                             });
-                                                        }, className: "w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: user.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: user.email })] }, user.user_id))) })), showUserSearch && userSearch.length > 2 && availableUsers.length === 0 && (jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg p-3 z-50", children: jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No users found" }) }))] }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Type at least 3 characters to search for users" })] })] }), formError && (jsx("div", { className: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: formError }) })), jsxs(DialogFooter, { className: "mt-6", children: [jsx(Button$1, { variant: "outline", onClick: () => setIsOpen(false), children: "Cancel" }), (!isTeam || !editing || (isTeam && hasEditTeamPermission)) && (jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, children: jsxs(Button$1, { onClick: onSubmit, disabled: isSubmitting || (!!editing && (entityDetails === null || entityDetails === void 0 ? void 0 : entityDetails.is_internal)), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: [isSubmitting ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin mr-2", "aria-hidden": "true" })) : null, editing
+                                                        }, className: "w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex flex-col", children: [jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: user.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: user.email })] }, user.user_id))) })), showUserSearch && userSearch.length > 2 && availableUsers.length === 0 && (jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg p-3 z-50", children: jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No users found" }) }))] }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Type at least 3 characters to search for users" })] })] }), formError && (jsx("div", { className: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: formError }) })), jsxs(DialogFooter, { className: "mt-6", children: [jsx(Button$1, { variant: "outline", onClick: closeDialog, children: "Cancel" }), (!isTeam || !editing || (isTeam && hasEditTeamPermission)) && (jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, children: jsxs(Button$1, { onClick: onSubmit, disabled: isSubmitting || (!!editing && (entityDetails === null || entityDetails === void 0 ? void 0 : entityDetails.is_internal)), className: "bg-gradient-to-r from-[#2563EB] to-[#93C5FD] hover:opacity-90 text-white", children: [isSubmitting ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin mr-2", "aria-hidden": "true" })) : null, editing
                                                                 ? isTeam
                                                                     ? 'Save Team'
                                                                     : 'Save Group'
@@ -126755,7 +126771,7 @@ function RolesTab({ tenant }) {
         platformKey: tenant,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     });
     const [createRole] = useCreateRbacRoleMutation();
     const [updateRole] = useUpdateRbacRoleMutation();
@@ -126763,7 +126779,7 @@ function RolesTab({ tenant }) {
     // Debounce search query
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1); // Reset to first page on new search
             }
@@ -126905,7 +126921,7 @@ function PoliciesTab({ tenant }) {
         platformKey: tenant,
         page,
         pageSize: 10,
-        ...(debouncedSearchQuery.length > 3 && { name: debouncedSearchQuery }),
+        ...(debouncedSearchQuery.length > 2 && { name: debouncedSearchQuery }),
     });
     const [createPolicy] = useCreateRbacPolicyMutation();
     const [updatePolicy] = useUpdateRbacPolicyMutation();
@@ -126913,7 +126929,7 @@ function PoliciesTab({ tenant }) {
     // Debounce search query
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1); // Reset to first page on new search
             }
@@ -126940,6 +126956,7 @@ function PoliciesTab({ tenant }) {
     const [selectedGroups, setSelectedGroups] = useState([]);
     const [originalGroups, setOriginalGroups] = useState([]);
     const [roleSearch, setRoleSearch] = useState('');
+    const [debouncedRoleSearch, setDebouncedRoleSearch] = useState('');
     const [userSearch, setUserSearch] = useState('');
     const [groupSearch, setGroupSearch] = useState('');
     const [showRoleSearch, setShowRoleSearch] = useState(false);
@@ -126948,8 +126965,18 @@ function PoliciesTab({ tenant }) {
     const [deletingPolicyId, setDeletingPolicyId] = useState(null);
     // Fetch policy details when editing
     const { data: policyDetails } = useGetRbacPolicyDetailsQuery({ id: editingPolicyId, platform_key: tenant }, { skip: !editingPolicyId });
-    // Fetch roles for autocomplete
-    const { data: rolesData } = useGetRbacRolesQuery({ platformKey: tenant });
+    // Debounce role search and query the roles endpoint with the search term
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedRoleSearch(roleSearch.trim());
+        }, 300);
+        return () => clearTimeout(handler);
+    }, [roleSearch]);
+    // Fetch roles for autocomplete (server-side filtered by name)
+    const { data: rolesData } = useGetRbacRolesQuery({
+        platformKey: tenant,
+        ...(debouncedRoleSearch.length > 0 && { name: debouncedRoleSearch }),
+    });
     // Fetch groups for autocomplete
     const { data: groupsData } = useGetRbacGroupsQuery({ platformKey: tenant });
     // Fetch users for search
@@ -126971,14 +126998,11 @@ function PoliciesTab({ tenant }) {
     }, [data]);
     // Calculate total pages
     const totalPages = data ? Math.ceil(data.count / 10) : 0;
-    // Filter available roles
+    // Roles list (filtering happens server-side via the name query param)
     const availableRoles = useMemo(() => {
         var _a, _b, _c;
-        const rolesList = (_c = (_b = (_a = rolesData === null || rolesData === void 0 ? void 0 : rolesData.results) !== null && _a !== void 0 ? _a : rolesData === null || rolesData === void 0 ? void 0 : rolesData.data) !== null && _b !== void 0 ? _b : rolesData) !== null && _c !== void 0 ? _c : [];
-        if (!roleSearch)
-            return rolesList;
-        return rolesList.filter((role) => role.name.toLowerCase().includes(roleSearch.toLowerCase()));
-    }, [rolesData, roleSearch]);
+        return (_c = (_b = (_a = rolesData === null || rolesData === void 0 ? void 0 : rolesData.results) !== null && _a !== void 0 ? _a : rolesData === null || rolesData === void 0 ? void 0 : rolesData.data) !== null && _b !== void 0 ? _b : rolesData) !== null && _c !== void 0 ? _c : [];
+    }, [rolesData]);
     // Filter available groups
     const availableGroups = useMemo(() => {
         var _a, _b, _c;
@@ -127219,7 +127243,7 @@ function AlertsTab({ tenant }) {
     const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (searchQuery.length > 3) {
+            if (searchQuery.length > 2) {
                 setDebouncedSearchQuery(searchQuery);
                 setPage(1);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "1.17.24",
+  "version": "1.17.25",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {
@@ -66,10 +66,10 @@
     "axios": "1.13.6",
     "dotenv": "16.6.1",
     "winston": "3.19.0",
-    "@iblai/mcp": "1.5.8",
-    "@iblai/web-containers": "1.8.18",
     "@iblai/data-layer": "1.7.5",
-    "@iblai/web-utils": "1.10.10"
+    "@iblai/mcp": "1.5.8",
+    "@iblai/web-containers": "1.8.19",
+    "@iblai/web-utils": "1.10.11"
   },
   "peerDependencies": {
     "@radix-ui/react-dialog": "^1.1.7",