fix: MemberModal UI

packages/web/components/common/Icon/constants.ts

@@ -360,6 +360,7 @@ export const iconPaths = {
   'modal/selectSource': () => import('./icons/modal/selectSource.svg'),
   'modal/setting': () => import('./icons/modal/setting.svg'),
   'modal/teamPlans': () => import('./icons/modal/teamPlans.svg'),
+  'modal/key': () => import('./icons/modal/key.svg'),
   'model/BAAI': () => import('./icons/model/BAAI.svg'),
   'model/alicloud': () => import('./icons/model/alicloud.svg'),
   'model/baichuan': () => import('./icons/model/baichuan.svg'),

packages/web/i18n/en/user.json

@@ -46,6 +46,7 @@
   "password.to_login": "Go to Login",
   "password.verification_code": "Verification Code",
   "permission.Manage": "Admin",
+  "permission.Add": "Add Permissions",
   "permission.Manage tip": "Team admin with full permissions",
   "permission.Read": "Read Only",
   "permission.Read desc": "Members can only read related resources, cannot create new resources",
@@ -57,6 +58,7 @@
   "permission_des.manage": "Can create resources, invite, and delete members",
   "permission_des.read": "Members can only read related resources and cannot create new resources.",
   "permission_des.write": "In addition to readable resources, you can also create new resources",
+  "permission_add_tip": "After adding, you can check the permissions for them.",
   "permissions": "Permissions",
   "personal_information": "Me",
   "personalization": "Personalization",
@@ -81,6 +83,7 @@
   "team.Update Team": "Update team information",
   "team.add_collaborator": "Add Collaborator",
   "team.add_writer": "Add writable members",
+  "team.add_permission": "Add permissions",
   "team.avatar_and_name": "avatar",
   "team.belong_to_group": "Member group",
   "team.group.avatar": "Group avatar",
@@ -102,7 +105,7 @@
   "team.group.role.admin": "administrator",
   "team.group.role.member": "member",
   "team.group.role.owner": "owner",
-  "team.group.search_placeholder": "Search member/group name",
+  "team.group.search_placeholder": "Search member/group/org name",
   "team.group.set_as_admin": "Set as administrator",
   "team.group.toast.can_not_delete_owner": "Owner cannot be deleted, please transfer first",
   "team.group.transfer_owner": "transfer owner",

packages/web/i18n/zh-CN/user.json

@@ -49,6 +49,7 @@
   "permission.Manage tip": "团队管理员，拥有全部权限",
   "permission.Read": "仅读",
   "permission.Read desc": "成员仅可阅读相关资源，无法新建资源",
+  "permission.Add": "添加权限",
   "permission.Write": "可写",
   "permission.Write tip": "除了可读资源外，还可以新建新的资源",
   "permission.only_collaborators": "仅协作者访问",
@@ -57,6 +58,7 @@
   "permission_des.manage": "可创建资源、邀请、删除成员",
   "permission_des.read": "成员仅可阅读相关资源，无法新建资源",
   "permission_des.write": "除了可读资源外，还可以新建新的资源",
+  "permission_add_tip": "添加后，您可为其勾选权限。",
   "permissions": "权限",
   "personal_information": "个人信息",
   "personalization": "个性化",
@@ -81,6 +83,7 @@
   "team.Update Team": "更新团队信息",
   "team.add_collaborator": "添加协作者",
   "team.add_writer": "添加可写成员",
+  "team.add_permission": "添加权限",
   "team.avatar_and_name": "头像 & 名称",
   "team.belong_to_group": "所属群组",
   "team.group.avatar": "群头像",
@@ -102,7 +105,7 @@
   "team.group.role.admin": "管理员",
   "team.group.role.member": "成员",
   "team.group.role.owner": "所有者",
-  "team.group.search_placeholder": "搜索成员/群组名称",
+  "team.group.search_placeholder": "搜索成员/部门/群组名称",
   "team.group.set_as_admin": "设为管理员",
   "team.group.toast.can_not_delete_owner": "不能删除所有者, 请先转让",
   "team.group.transfer_owner": "转让所有者",

packages/web/i18n/zh-Hant/user.json

@@ -49,6 +49,7 @@
   "permission.Manage tip": "團隊管理員，擁有完整權限",
   "permission.Read": "唯讀",
   "permission.Read desc": "成員僅能閱讀相關資源，無法建立新資源",
+  "permission.Add": "新增權限",
   "permission.Write": "可寫入",
   "permission.Write tip": "除了可讀取資源外，還可以建立新的資源",
   "permission.only_collaborators": "僅協作者可存取",
@@ -57,6 +58,7 @@
   "permission_des.manage": "可建立資源、邀請及刪除成員",
   "permission_des.read": "成員僅能閱讀相關資源，無法建立新資源",
   "permission_des.write": "除了可讀取資源外，還可以建立新的資源",
+  "permission_add_tip": "添加後，您可為其勾選權限。",
   "permissions": "權限",
   "personal_information": "個人資料",
   "personalization": "個人化",
@@ -81,6 +83,7 @@
   "team.Update Team": "更新團隊資訊",
   "team.add_collaborator": "新增協作者",
   "team.add_writer": "新增可寫入成員",
+  "team.add_permission": "新增權限",
   "team.avatar_and_name": "頭像與名稱",
   "team.belong_to_group": "所屬成員群組",
   "team.group.avatar": "群組頭像",
@@ -102,7 +105,7 @@
   "team.group.role.admin": "管理員",
   "team.group.role.member": "成員",
   "team.group.role.owner": "擁有者",
-  "team.group.search_placeholder": "搜尋成員/群組名稱",
+  "team.group.search_placeholder": "搜尋成員/部門/群組名稱",
   "team.group.set_as_admin": "設為管理員",
   "team.group.toast.can_not_delete_owner": "無法刪除擁有者，請先轉移擁有權",
   "team.group.transfer_owner": "轉移擁有者",

projects/app/src/components/support/permission/MemberManager/MemberModal.tsx

@@ -35,7 +35,13 @@ const HoverBoxStyle = {
   cursor: 'pointer'
 };
 
-function MemberModal({ onClose }: { onClose: () => void }) {
+function MemberModal({
+  onClose,
+  addPermissionOnly: addOnly = false
+}: {
+  onClose: () => void;
+  addPermissionOnly?: boolean;
+}) {
   const { t } = useTranslation();
   const { userInfo, loadAndGetTeamMembers, loadAndGetGroups, myGroups, loadAndGetOrgs } =
     useUserStore();
@@ -195,8 +201,8 @@ function MemberModal({ onClose }: { onClose: () => void }) {
     <MyModal
       isOpen
       onClose={onClose}
-      iconSrc="modal/AddClb"
-      title={t('user:team.add_collaborator')}
+      iconSrc={addOnly ? 'modal/key' : 'modal/AddClb'}
+      title={addOnly ? t('user:team.add_permission') : t('user:team.add_collaborator')}
       minW="800px"
       h={'100%'}
       maxH={'90vh'}
@@ -219,7 +225,7 @@ function MemberModal({ onClose }: { onClose: () => void }) {
             p="4"
           >
             <SearchInput
-              placeholder={t('user:search_user')}
+              placeholder={t('user:team.group.search_placeholder')}
               bgColor="myGray.50"
               onChange={(e) => setSearchText(e.target.value)}
             />
@@ -289,15 +295,17 @@ function MemberModal({ onClose }: { onClose: () => void }) {
 
               <Flex flexDirection={'column'} gap={1} userSelect={'none'}>
                 {filterMembers.map((member) => {
+                  const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
+                  const disabled = addOnly && collaborator !== undefined;
                   const onChange = () => {
+                    if (disabled) return;
                     setSelectedMembers((state) => {
                       if (state.includes(member.tmbId)) {
                         return state.filter((v) => v !== member.tmbId);
                       }
                       return [...state, member.tmbId];
                     });
                   };
-                  const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
                   return (
                     <HStack
                       justifyContent="space-between"
@@ -310,27 +318,32 @@ function MemberModal({ onClose }: { onClose: () => void }) {
                       onClick={onChange}
                     >
                       <Checkbox
-                        isChecked={selectedMemberIdList.includes(member.tmbId)}
+                        isDisabled={disabled}
+                        isChecked={disabled || selectedMemberIdList.includes(member.tmbId)}
                         pointerEvents="none"
                       />
                       <MyAvatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
                       <Box w="full" ml="2">
                         {member.memberName}
                       </Box>
-                      <PermissionTags permission={collaborator?.permission.value} />
+                      <PermissionTags
+                        permission={addOnly ? undefined : collaborator?.permission.value}
+                      />
                     </HStack>
                   );
                 })}
                 {filterOrgs.map((org) => {
+                  const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
+                  const disabled = addOnly && collaborator !== undefined;
                   const onChange = () => {
+                    if (disabled) return;
                     setSelectedOrgIdList((state) => {
                       if (state.includes(org._id)) {
                         return state.filter((v) => v !== org._id);
                       }
                       return [...state, org._id];
                     });
                   };
-                  const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
                   return (
                     <HStack
                       justifyContent="space-between"
@@ -343,7 +356,8 @@ function MemberModal({ onClose }: { onClose: () => void }) {
                       onClick={onChange}
                     >
                       <Checkbox
-                        isChecked={selectedOrgIdList.includes(org._id)}
+                        isDisabled={disabled}
+                        isChecked={disabled || selectedOrgIdList.includes(org._id)}
                         pointerEvents="none"
                       />
                       <MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} />
@@ -357,7 +371,9 @@ function MemberModal({ onClose }: { onClose: () => void }) {
                           </>
                         )}
                       </HStack>
-                      <PermissionTags permission={collaborator?.permission.value} />
+                      <PermissionTags
+                        permission={addOnly ? undefined : collaborator?.permission.value}
+                      />
                       {org.count && (
                         <MyIcon
                           name="core/chat/chevronRight"
@@ -367,7 +383,8 @@ function MemberModal({ onClose }: { onClose: () => void }) {
                           _hover={{
                             bgColor: 'myGray.200'
                           }}
-                          onClick={() => {
+                          onClick={(e) => {
+                            e.stopPropagation();
                             setParentPath(getOrgChildrenPath(org));
                           }}
                         />
@@ -376,15 +393,17 @@ function MemberModal({ onClose }: { onClose: () => void }) {
                   );
                 })}
                 {filterGroups.map((group) => {
+                  const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
+                  const disabled = addOnly && collaborator !== undefined;
                   const onChange = () => {
+                    if (disabled) return;
                     setSelectedGroupIdList((state) => {
                       if (state.includes(group._id)) {
                         return state.filter((v) => v !== group._id);
                       }
                       return [...state, group._id];
                     });
                   };
-                  const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
                   return (
                     <HStack
                       justifyContent="space-between"
@@ -397,14 +416,17 @@ function MemberModal({ onClose }: { onClose: () => void }) {
                       onClick={onChange}
                     >
                       <Checkbox
-                        isChecked={selectedGroupIdList.includes(group._id)}
+                        isDisabled={disabled}
+                        isChecked={disabled || selectedGroupIdList.includes(group._id)}
                         pointerEvents="none"
                       />
                       <MyAvatar src={group.avatar} w="1.5rem" borderRadius={'50%'} />
                       <Box ml="2" w="full">
                         {group.name === DefaultGroupName ? userInfo?.team.teamName : group.name}
                       </Box>
-                      <PermissionTags permission={collaborator?.permission.value} />
+                      <PermissionTags
+                        permission={addOnly ? undefined : collaborator?.permission.value}
+                      />
                     </HStack>
                   );
                 })}
@@ -450,7 +472,7 @@ function MemberModal({ onClose }: { onClose: () => void }) {
         </Grid>
       </ModalBody>
       <ModalFooter>
-        {!!permissionList && (
+        {!addOnly && !!permissionList && (
           <PermissionSelect
             value={selectedPermission}
             Button={
@@ -470,6 +492,12 @@ function MemberModal({ onClose }: { onClose: () => void }) {
             onChange={(v) => setSelectedPermission(v)}
           />
         )}
+        {addOnly && (
+          <HStack bg={'blue.50'} color={'blue.600'} padding={'6px 12px'} rounded={'5px'}>
+            <MyIcon name="common/info" w="1rem" h="1rem" />
+            <Text fontSize="12px">{t('user:permission_add_tip')}</Text>
+          </HStack>
+        )}
         <Button isLoading={isUpdating} ml="4" h={'32px'} onClick={onConfirm}>
           {t('common:common.Confirm')}
         </Button>

projects/app/src/components/support/permission/MemberManager/context.tsx

@@ -80,12 +80,14 @@ const CollaboratorContextProvider = ({
   refetchResource,
   refreshDeps = [],
   isInheritPermission,
-  hasParent
+  hasParent,
+  addPermissionOnly
 }: MemberManagerInputPropsType & {
   children: (props: ChildrenProps) => ReactNode;
   refetchResource?: () => void;
   isInheritPermission?: boolean;
   hasParent?: boolean;
+  addPermissionOnly?: boolean;
 }) => {
   const onUpdateCollaboratorsThen = async (props: UpdateClbPermissionProps) => {
     await onUpdateCollaborators(props);
@@ -209,6 +211,7 @@ const CollaboratorContextProvider = ({
             onCloseAddMember();
             refetchResource?.();
           }}
+          addPermissionOnly={addPermissionOnly}
         />
       )}
       {isOpenManageModal && (

projects/app/src/pages/account/team/components/PermissionManage/index.tsx

@@ -52,7 +52,6 @@ function PermissionManage({
 }) {
   const { t } = useTranslation();
   const { userInfo } = useUserStore();
-  const [searchKey, setSearchKey] = useState('');
 
   const collaboratorList = useContextSelector(
     CollaboratorContext,
@@ -144,7 +143,7 @@ function PermissionManage({
             leftIcon={<MyIcon name="common/add2" w={'14px'} />}
             onClick={onOpenAddMember}
           >
-            {t('common:common.Add')}
+            {t('user:permission.Add')}
           </Button>
         )}
       </Flex>
@@ -418,6 +417,7 @@ export const Render = ({ Tabs }: { Tabs: React.ReactNode }) => {
       onUpdateCollaborators={updateMemberPermission}
       onDelOneCollaborator={deleteMemberPermission}
       refreshDeps={[userInfo?.team.teamId]}
+      addPermissionOnly={true}
     >
       {({ onOpenAddMember }) => <PermissionManage Tabs={Tabs} onOpenAddMember={onOpenAddMember} />}
     </CollaboratorContextProvider>