Fixed an issue that does not display 'Add member' button and 'Remove from Group' in group members table.

Author: Imiss-U1025

client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx

@@ -3,7 +3,7 @@ import { User } from "constants/userConstants";
 import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, SuperUserIcon } from "lowcoder-design";
 import { trans } from "i18n";
 import ProfileImage from "pages/common/profileImage";
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useDispatch } from "react-redux";
 import {
   deleteGroupUserAction,
@@ -41,7 +41,6 @@ type GroupPermissionProp = {
   group: OrgGroup;
   orgId: string;
   groupUsers: GroupUser[];
-  groupUsersFetching: boolean;
   currentUserGroupRole: string;
   currentUser: User;
   setModify?: any;
@@ -50,7 +49,7 @@ type GroupPermissionProp = {
 
 function GroupUsersPermission(props: GroupPermissionProp) {
   const { Column } = TableStyled;
-  const { group, orgId, groupUsersFetching, groupUsers, currentUserGroupRole, currentUser , setModify, modify} = props;
+  const { group, orgId,  groupUsers, currentUserGroupRole, currentUser , setModify, modify} = props;
   const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
   const sortedGroupUsers = useMemo(() => {
     return [...groupUsers].sort((a, b) => {

client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx

@@ -14,11 +14,10 @@ import {
 import { trans, transToNode } from "i18n";
 import InviteDialog from "pages/common/inviteDialog";
 import ProfileImage from "pages/common/profileImage";
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   deleteOrgUserAction,
-  fetchOrgUsersAction,
   quitOrgAction,
   updateUserOrgRoleAction,
 } from "redux/reduxActions/orgActions";
@@ -56,15 +55,14 @@ const StyledMembersIcon = styled(MembersIcon)`
 type UsersPermissionProp = {
   orgId: string;
   orgUsers: OrgUser[];
-  orgUsersFetching: boolean;
   currentUser: User;
   setModify?: any;
   modify?: boolean;
 };
 
 function OrgUsersPermission(props: UsersPermissionProp) {
   const { Column } = TableStyled;
-  const { orgId, orgUsers, orgUsersFetching, currentUser , setModify, modify} = props;
+  const { orgId, orgUsers, currentUser , setModify, modify} = props;
   const adminCount = orgUsers.filter(
     (user) => user.role === ADMIN_ROLE || user.role === SUPER_ADMIN_ROLE,
   ).length;

client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx

@@ -7,7 +7,6 @@ import GroupPermission from "./groupUsersPermission";
 import UsersPermission from "./orgUsersPermission";
 import { getOrgGroups } from "redux/selectors/orgSelectors";
 import { useParams } from "react-router-dom";
-import { AppState } from "redux/reducers";
 import {fetchGroupUsrPagination, fetchOrgUsrPagination} from "@lowcoder-ee/util/pagination/axios";
 import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
 
@@ -25,18 +24,15 @@ const All_Users = "users";
 
 export default function PermissionSetting() {  const user = useSelector(getUser);
 
-  const [elements, setElements] = useState<any>({ elements: [], total: 0 });
+  const [elements, setElements] = useState<any>({ elements: [], total: 0, role: "" });
   const [orgMemberElements, setOrgMemberElements] = useState<any>({ elements: [], total: 0 })
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [modify, setModify] = useState(false);
 
   const orgId = user.currentOrgId;
   const orgGroups = useSelector(getOrgGroups);
-  const groupUsersFetching = useSelector((state: AppState) => state.ui.org.groupUsersFetching);
-  const currentUserGroupRole = useSelector((state: AppState) => state.ui.org.currentUserGroupRole);
   const currentUser = useSelector(getUser);
-  const orgUsersFetching = useSelector((state: AppState) => state.ui.org.orgUsersFetching);
 
   const groupIdMap = new Map(orgGroups.map((group) => [group.groupId, group]));
   const dispatch = useDispatch();
@@ -47,7 +43,6 @@ export default function PermissionSetting() {  const user = useSelector(getUser)
     }
     dispatch(fetchGroupsAction(orgId));
   }, [orgId]);
-
   useEffect( () => {
     if (selectKey !== "users" && !!groupIdMap.get(selectKey))
       fetchGroupUsrPagination(
@@ -58,27 +53,29 @@ export default function PermissionSetting() {  const user = useSelector(getUser)
         }
         ).then(result => {
           if (result.success){
-            setElements({elements: result.data || [], total: result.total || 1})
+            setElements({elements: result.data || [], total: result.total || 1, role: result.visitorRole || ""})
           }
           else
             console.error("ERROR: fetchFolderElements", result.error)
         }
         )
     else
+    {
       fetchOrgUsrPagination(
-          {
-            orgId: orgId,
-            pageNum: currentPage,
-            pageSize: pageSize,
-          }
+        {
+          orgId: orgId,
+          pageNum: currentPage,
+          pageSize: pageSize,
+        }
       ).then(result => {
-            if (result.success){
-              setOrgMemberElements({elements: result.data || [], total: result.total || 1})
-            }
-            else
-              console.error("ERROR: fetchFolderElements", result.error)
+          if (result.success){
+            setOrgMemberElements({elements: result.data || [], total: result.total || 1})
           }
+          else
+            console.error("ERROR: fetchFolderElements", result.error)
+        }
       )
+    }
       },
       [currentPage, pageSize, modify, groupIdMap.get(selectKey)]
   )
@@ -93,7 +90,6 @@ export default function PermissionSetting() {  const user = useSelector(getUser)
             <>
               <UsersPermission
                   orgId={orgId}
-                  orgUsersFetching={orgUsersFetching}
                   // orgUsers={!orgMemberElements.elements.members ? [] : orgMemberElements.elements.members}
                   orgUsers={orgMemberElements.elements}
                   currentUser={currentUser}
@@ -109,8 +105,7 @@ export default function PermissionSetting() {  const user = useSelector(getUser)
                       group={groupIdMap.get(selectKey)!}
                       orgId={orgId}
                       groupUsers={elements.elements}
-                      groupUsersFetching={groupUsersFetching}
-                      currentUserGroupRole={currentUserGroupRole}
+                      currentUserGroupRole={elements.role}
                       currentUser={currentUser}
                       setModify={setModify}
                       modify={modify}

client/packages/lowcoder/src/util/pagination/axios.ts

@@ -87,7 +87,8 @@ export const fetchGroupUsrPagination = async (request: fetchGroupUserRequestType
         return {
             success: true,
             data: response.data.data.members,
-            total: response.data.data.total
+            total: response.data.data.total,
+            visitorRole: response.data.data.visitorRole
         }
     } catch (error: any) {
         console.error('Failed to fetch data:', error);