fix(core): incorrect permissions displayed in member management (#10269)

packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx

@@ -1,8 +1,14 @@
-import { Menu, MenuItem, MenuTrigger, Tooltip } from '@affine/component';
+import {
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  notify,
+  Tooltip,
+} from '@affine/component';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { DocGrantedUsersService } from '@affine/core/modules/permissions';
 import { ShareInfoService } from '@affine/core/modules/share-doc';
-import { DocRole } from '@affine/graphql';
+import { DocRole, UserFriendlyError } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { InformationIcon } from '@blocksuite/icons/rc';
@@ -47,33 +53,41 @@ export const MembersPermission = ({
   );
   const showTips =
     docDefaultRole === DocRole.Reader || docDefaultRole === DocRole.Editor;
-  const changePermission = useCallback(
+  const changePermission = useAsyncCallback(
     async (docRole: DocRole) => {
+      try {
         track.$.sharePanel.$.modifyDocDefaultRole();
         await docGrantedUsersService.updateDocDefaultRole(docRole);
         shareInfoService.shareInfo.revalidate();
+      } catch (error) {
+        const err = UserFriendlyError.fromAnyError(error);
+        notify.error({
+          title: err.name,
+          message: err.message,
+        });
+      }
     },
     [docGrantedUsersService, shareInfoService.shareInfo]
   );
 
-  const selectManage = useAsyncCallback(async () => {
+  const selectManage = useCallback(() => {
-    await changePermission(DocRole.Manager);
+    changePermission(DocRole.Manager);
   }, [changePermission]);
 
-  const selectEdit = useAsyncCallback(async () => {
+  const selectEdit = useCallback(() => {
     if (hittingPaywall) {
       openPaywallModal?.();
       return;
     }
-    await changePermission(DocRole.Editor);
+    changePermission(DocRole.Editor);
   }, [changePermission, hittingPaywall, openPaywallModal]);
 
-  const selectRead = useAsyncCallback(async () => {
+  const selectRead = useCallback(() => {
     if (hittingPaywall) {
       openPaywallModal?.();
       return;
     }
-    await changePermission(DocRole.Reader);
+    changePermission(DocRole.Reader);
   }, [changePermission, hittingPaywall, openPaywallModal]);
 
   return (

packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/index.tsx

@@ -121,15 +121,21 @@ export const MembersRow = ({ onClick }: { onClick: () => void }) => {
       className={clsx(styles.rowContainerStyle, 'clickable')}
       onClick={onClick}
     >
+      {docOwner ? (
+        <>
           <div className={styles.memberContainerStyle}>
             <Avatar
-          url={docOwner?.user.avatarUrl || ''}
+              url={docOwner.user.avatarUrl || ''}
-          name={docOwner?.user.name}
+              name={docOwner.user.name}
               size={24}
             />
-        <span>{docOwner?.user.name}</span>
+            <span>{docOwner.user.name}</span>
           </div>
           <div className={styles.OwnerStyle}>{t['Owner']()}</div>
+        </>
+      ) : (
+        <div>{t['com.affine.share-menu.invite-editor.manage-members']()}</div>
+      )}
       <div className={styles.IconButtonStyle}>
         <ArrowRightSmallIcon />
       </div>

packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/member-item.tsx

@@ -9,7 +9,6 @@ import {
   useConfirmModal,
 } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { AuthService } from '@affine/core/modules/cloud';
 import { DocService } from '@affine/core/modules/doc';
 import {
   DocGrantedUsersService,
@@ -31,16 +30,15 @@ export const MemberItem = ({
   openPaywallModal,
   hittingPaywall,
   grantedUser,
+  canManageUsers,
 }: {
   grantedUser: GrantedUser;
   hittingPaywall: boolean;
+  canManageUsers: boolean;
   openPaywallModal: () => void;
 }) => {
   const user = grantedUser.user;
-  const session = useService(AuthService).session;
+  const disableManage = grantedUser.role === DocRole.Owner || !canManageUsers;
-  const account = useLiveData(session.account$);
-  const disableManage =
-    account?.id === user.id || grantedUser.role === DocRole.Owner;
 
   const role = useMemo(() => {
     switch (grantedUser.role) {

packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/member-management.tsx

@@ -66,6 +66,7 @@ export const MemberManagement = ({
           grantedUserList={grantedUserList}
           grantedUserCount={grantedUserCount}
           loadMore={loadMore}
+          canManageUsers={canManageUsers}
         />
       ) : (
         <Skeleton className={styles.scrollableRootStyle} />
@@ -90,8 +91,10 @@ const MemberList = ({
   grantedUserList,
   grantedUserCount,
   loadMore,
+  canManageUsers,
 }: {
   hittingPaywall: boolean;
+  canManageUsers: boolean;
   grantedUserList: GrantedUser[];
   grantedUserCount?: number;
   openPaywallModal: () => void;
@@ -105,10 +108,11 @@ const MemberList = ({
           grantedUser={data}
           openPaywallModal={openPaywallModal}
           hittingPaywall={hittingPaywall}
+          canManageUsers={canManageUsers}
         />
       );
     },
-    [hittingPaywall, openPaywallModal]
+    [canManageUsers, hittingPaywall, openPaywallModal]
   );
   return (
     <div className={styles.memberListStyle}>
@@ -119,6 +123,7 @@ const MemberList = ({
             grantedUser={item}
             openPaywallModal={openPaywallModal}
             hittingPaywall={hittingPaywall}
+            canManageUsers={canManageUsers}
           />
         ))
       ) : (