Search bar for User group members

kamalqureshi · kamalqureshi · commit ddd9fe19161c · 2025-06-28T01:02:02.000+05:00
diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
@@ -1,9 +1,9 @@
 import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles } from "constants/orgConstants";
 import { User } from "constants/userConstants";
-import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, SuperUserIcon } from "lowcoder-design";
+import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, Search, SuperUserIcon } from "lowcoder-design";
 import { trans } from "i18n";
 import ProfileImage from "pages/common/profileImage";
-import React, { useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 import {
   deleteGroupUserAction,
@@ -20,7 +20,6 @@ import {
   GroupNameView,
   HeaderBack,
   LAST_ADMIN_QUIT,
-  PermissionHeaderWrapper,
   QuestionTooltip,
   RoleSelectSubTitle,
   RoleSelectTitle,
@@ -31,13 +30,35 @@ import {
 import history from "util/history";
 import { PERMISSION_SETTING } from "constants/routesURL";
 import Column from "antd/es/table/Column";
+import { debounce } from "lodash";
+import { fetchGroupUsrPagination } from "@lowcoder-ee/util/pagination/axios";
 
 const StyledAddIcon = styled(AddIcon)`
   g path {
     fill: #ffffff;
   }
 `;
 
+const PermissionHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 16px;
+`;
+
+const OptionsHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+type ElementsState = {
+  elements: any[];
+  total: number;
+  role: string;
+};
+
 type GroupPermissionProp = {
   group: OrgGroup;
   orgId: string;
@@ -47,11 +68,24 @@ type GroupPermissionProp = {
   setModify?: any;
   modify?: boolean;
   loading?: boolean;
+  setElements: React.Dispatch<React.SetStateAction<ElementsState>>;
 };
 
-function GroupUsersPermission(props: GroupPermissionProp) {
-  // const { Column } = TableStyled;
-  const { group, orgId, groupUsers, currentUserGroupRole, currentUser, setModify, modify, loading } = props;
+const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
+  const { 
+    group, 
+    orgId, 
+    groupUsers, 
+    currentUserGroupRole, 
+    currentUser, 
+    setModify, 
+    modify, 
+    loading,
+    setElements
+  } = props;
+  const [searchValue, setSearchValue] = useState("")
+  const dispatch = useDispatch();
+
   const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
   const sortedGroupUsers = useMemo(() => {
     return [...groupUsers].sort((a, b) => {
@@ -64,7 +98,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
       }
     });
   }, [groupUsers]);
-  const dispatch = useDispatch();
+
+  const debouncedFetchPotentialMembers = useCallback(
+    debounce((searchVal: string) => {
+      fetchGroupUsrPagination({groupId: group.groupId, search: searchVal})
+      .then(result => {  
+        if (result.success) {
+          setElements({
+            elements: result.data || [], 
+            total: result.total || 0,
+            role: result.visitorRole || ""
+          });
+        }
+      })
+    }, 500), [dispatch]
+  );
+
+  useEffect(() => {
+    if (searchValue.length > 2 || searchValue === "") {
+      debouncedFetchPotentialMembers(searchValue);
+    }
+    return () => {
+      debouncedFetchPotentialMembers.cancel();
+    };
+  }, [searchValue, debouncedFetchPotentialMembers]);
+
   return (
     <>
       <PermissionHeaderWrapper>
@@ -78,19 +136,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
           )}
         </HeaderBack>
         {isGroupAdmin(currentUserGroupRole) && !group.syncGroup && (
-          <AddGroupUserDialog
-            groupUsers={groupUsers}
-            orgId={orgId}
-            groupId={group.groupId}
-            setModify={setModify}
-            modify={modify}
-            trigger={
-              <AddMemberButton buttonType="primary" icon={<StyledAddIcon />}>
-                {trans("memberSettings.addMember")}
-              </AddMemberButton>
-            }
-            style={{ marginLeft: "auto" }}
-          />
+          <OptionsHeader>
+            <Search
+              placeholder={trans("memberSettings.searchMember")}
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              style={{ 
+                width: "20%", 
+                minWidth: "160px",
+                height: "32px", 
+                marginTop: 'auto'
+              }}
+            />
+            <AddGroupUserDialog
+              groupUsers={groupUsers}
+              orgId={orgId}
+              groupId={group.groupId}
+              setModify={setModify}
+              modify={modify}
+              trigger={
+                <AddMemberButton buttonType="primary" icon={<StyledAddIcon />}>
+                  {trans("memberSettings.addMember")}
+                </AddMemberButton>
+              }
+            />
+          </OptionsHeader>
         )}
       </PermissionHeaderWrapper>
       <TableStyled
diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
@@ -3,9 +3,8 @@ import { useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
 import styled from "styled-components";
 import GroupPermission from "./groupUsersPermission";
-import UsersPermission from "./orgUsersPermission";
 import { useParams } from "react-router-dom";
-import {fetchGroupUsrPagination, fetchOrgGroups, fetchOrgUsrPagination} from "@lowcoder-ee/util/pagination/axios";
+import {fetchGroupUsrPagination, fetchOrgGroups } from "@lowcoder-ee/util/pagination/axios";
 import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 import {OrgGroup} from "@lowcoder-ee/constants/orgConstants";
 
@@ -19,13 +18,17 @@ const PermissionContent = styled.div`
   width: 100%;
 `;
 
+export enum GroupUserKey {
+  USERS = "users",
+  ALL_USERS = "All Users"
+}
+
 export default function PermissionSetting(props: {currentPageProp: number, pageSizeProp: number}) {
 
   const {currentPageProp, pageSizeProp} = props;
   const user = useSelector(getUser);
   const [elements, setElements] = useState<any>({ elements: [], total: 0, role: "" });
-  const [group, setGrouop] = useState<OrgGroup>();
-  const [orgMemberElements, setOrgMemberElements] = useState<any>({ elements: [], total: 0 })
+  const [group, setGroup] = useState<OrgGroup>();
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [modify, setModify] = useState(false);
@@ -44,7 +47,11 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
         }
       ).then(result => {
         if (result.success && !!result.data){
-          setGrouop(result.data.find(group => group.groupId === selectKey))
+          if(selectKey === GroupUserKey.USERS) {
+            setGroup(result.data.find(group => group.groupName == GroupUserKey.ALL_USERS))
+          } else {
+            setGroup(result.data.find(group => group.groupId === selectKey))
+          }
         }
         else
           console.error("ERROR: fetchFolderElements", result.error)
@@ -53,13 +60,13 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
   )
 
   useEffect( () => {
-    if (selectKey !== "users" && selectKey) {
+    if (selectKey && group) {
       setLoading(true);
       setError(null);
       
       fetchGroupUsrPagination(
         {
-          groupId: selectKey,
+          groupId: selectKey === GroupUserKey.USERS ? group.groupId : selectKey,
           pageNum: currentPage,
           pageSize: pageSize,
         }
@@ -79,33 +86,8 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
         setLoading(false);
         setError("Failed to load group users. Please try again.");
       });
-    } else {
-      setLoading(true);
-      setError(null);
-      
-      fetchOrgUsrPagination(
-        {
-          orgId: orgId,
-          pageNum: currentPage,
-          pageSize: pageSize,
-        }
-      ).then(result => {
-        setLoading(false);
-        if (result.success){
-          setOrgMemberElements({
-            elements: result.data || [], 
-            total: result.total || 0
-          });
-        }
-        else {
-          setError("Failed to load organization users. Please try again.");
-        }
-      }).catch(err => {
-        setLoading(false);
-        setError("Failed to load organization users. Please try again.");
-      });
-    }
-  }, [currentPage, pageSize, modify, selectKey, orgId]);
+    } 
+  }, [currentPage, pageSize, modify, selectKey, orgId, group]);
 
   if (!orgId) {
     return null;
@@ -118,36 +100,23 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
             {error}
           </div>
         )}
-        
-        {selectKey === "users" ? (
+        {elements && 
+            group && (
             <>
-              <UsersPermission
+              <GroupPermission
+                  group={group}
                   orgId={orgId}
-                  orgUsers={orgMemberElements.elements}
+                  groupUsers={elements.elements}
+                  currentUserGroupRole={elements.role}
                   currentUser={currentUser}
                   setModify={setModify}
                   modify={modify}
                   loading={loading}
+                  setElements={setElements}
               />
-              <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={orgMemberElements.total} />
+              <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={elements.total} />
             </>
-        ) : (
-          group && (
-                <>
-                  <GroupPermission
-                      group={group}
-                      orgId={orgId}
-                      groupUsers={elements.elements}
-                      currentUserGroupRole={elements.role}
-                      currentUser={currentUser}
-                      setModify={setModify}
-                      modify={modify}
-                      loading={loading}
-                  />
-                  <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={elements.total} />
-                </>
-            )
-        )}
+          )}
       </PermissionContent>
   );
 }
diff --git a/client/packages/lowcoder/src/util/pagination/type.ts b/client/packages/lowcoder/src/util/pagination/type.ts
@@ -87,6 +87,7 @@ export interface fetchGroupUserRequestType {
     groupId: string;
     pageNum?: number;
     pageSize?: number;
+    search?: string
 }
 
 export interface fetchQueryLibraryPaginationRequestType {

Original file line number	Diff line number	Diff line change
`@@ -87,6 +87,7 @@ export interface fetchGroupUserRequestType {`
`87`	`87`	`groupId: string;`
`88`	`88`	`pageNum?: number;`
`89`	`89`	`pageSize?: number;`
	`90`	`+ search?: string`
`90`	`91`	`}`
`91`	`92`
`92`	`93`	`export interface fetchQueryLibraryPaginationRequestType {`