From 8ff5f78bc650d9dd8bbaf8aa49c59e6978af9b01 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamalqureshi98@gmail.com>
Date: Wed, 16 Jul 2025 12:15:56 +0500
Subject: [PATCH 1/2] Dropdown in User Groups to filter roles

---
 .../packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 .../permission/groupUsersPermission.tsx       | 40 +++++++++++++++----
 .../lowcoder/src/util/pagination/type.ts      |  3 +-
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index f644df665..62470a286 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -3021,6 +3021,7 @@ export const en = {
     "joinTimeColumn": "Joining Time",
     "actionColumn": "Operation",
     "roleColumn": "Role",
+    "filterByRole": "Filter by role",
     "exitGroup": "Exit Group",
     "moveOutGroup": "Remove from Group",
     "inviteUser": "Invite Members",
diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
index 1ce015530..70d736c90 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
@@ -1,6 +1,6 @@
-import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles } from "constants/orgConstants";
+import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles, RoleIdType } from "constants/orgConstants";
 import { User } from "constants/userConstants";
-import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, Search, SuperUserIcon } from "lowcoder-design";
+import { AddIcon, ArrowIcon, CustomSelect, Dropdown, PackUpIcon, Search, SuperUserIcon } from "lowcoder-design";
 import { trans } from "i18n";
 import ProfileImage from "pages/common/profileImage";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -84,6 +84,7 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
     setElements
   } = props;
   const [searchValue, setSearchValue] = useState("")
+  const [roleFilter, setRoleFilter] = useState<RoleIdType | "">("")
   const dispatch = useDispatch();
 
   const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
@@ -99,9 +100,23 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
     });
   }, [groupUsers]);
 
+ const roleFilterOptions = useCallback(() => {
+  const filterOptions = [
+    ...TacoRoles.map(role => ({
+      label: GroupRoleInfo[role].name,
+      value: role as RoleIdType | ""
+    })),
+    {
+      label: "All",
+      value: "" as RoleIdType | ""
+    }
+  ]
+  return filterOptions;
+ }, [])
+
   const debouncedFetchPotentialMembers = useCallback(
-    debounce((searchVal: string) => {
-      fetchGroupUsrPagination({groupId: group.groupId, search: searchVal})
+    debounce((searchVal: string, roleFilter: string) => {
+      fetchGroupUsrPagination({groupId: group.groupId, search: searchVal, role: roleFilter})
       .then(result => {  
         if (result.success) {
           setElements({
@@ -115,13 +130,13 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
   );
 
   useEffect(() => {
-    if (searchValue.length > 2 || searchValue === "") {
-      debouncedFetchPotentialMembers(searchValue);
+    if (searchValue.length > 2 || searchValue === "" || roleFilter) {
+      debouncedFetchPotentialMembers(searchValue, roleFilter);
     }
     return () => {
       debouncedFetchPotentialMembers.cancel();
     };
-  }, [searchValue, debouncedFetchPotentialMembers]);
+  }, [searchValue, roleFilter, debouncedFetchPotentialMembers]);
 
   return (
     <>
@@ -137,6 +152,17 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
         </HeaderBack>
         {isGroupAdmin(currentUserGroupRole) && !group.syncGroup && (
           <OptionsHeader>
+            <Dropdown
+              options={roleFilterOptions()}
+              value={roleFilter || ""}
+              onChange={(value) => {
+                setRoleFilter(value);
+              }}
+              style={{
+                minWidth: "100px"
+              }}
+              placeholder={trans("memberSettings.filterByRole")}
+            />
             <Search
               placeholder={trans("memberSettings.searchMember")}
               value={searchValue}
diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts
index 870b35f0d..095224393 100644
--- a/client/packages/lowcoder/src/util/pagination/type.ts
+++ b/client/packages/lowcoder/src/util/pagination/type.ts
@@ -87,7 +87,8 @@ export interface fetchGroupUserRequestType {
     groupId: string;
     pageNum?: number;
     pageSize?: number;
-    search?: string
+    search?: string;
+    role?: string;
 }
 
 export interface fetchQueryLibraryPaginationRequestType {

From 111ef6aa5c2a5251880884af4b64f02508bef718 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamalqureshi98@gmail.com>
Date: Mon, 21 Jul 2025 11:06:22 +0500
Subject: [PATCH 2/2] Updated useCallack to useMemo for optimization

---
 .../pages/setting/permission/groupUsersPermission.tsx    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
index 70d736c90..c2d260fe4 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
@@ -100,8 +100,7 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
     });
   }, [groupUsers]);
 
- const roleFilterOptions = useCallback(() => {
-  const filterOptions = [
+  const roleFilterOptions = useMemo(() => [
     ...TacoRoles.map(role => ({
       label: GroupRoleInfo[role].name,
       value: role as RoleIdType | ""
@@ -110,9 +109,7 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
       label: "All",
       value: "" as RoleIdType | ""
     }
-  ]
-  return filterOptions;
- }, [])
+  ], []);
 
   const debouncedFetchPotentialMembers = useCallback(
     debounce((searchVal: string, roleFilter: string) => {
@@ -153,7 +150,7 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
         {isGroupAdmin(currentUserGroupRole) && !group.syncGroup && (
           <OptionsHeader>
             <Dropdown
-              options={roleFilterOptions()}
+              options={roleFilterOptions}
               value={roleFilter || ""}
               onChange={(value) => {
                 setRoleFilter(value);