Collection members: show admins in the member list.

src/Collections/CollectionMembers.tsx

@@ -9,6 +9,7 @@ import { List, ListItem } from "../widgets/List";
 
 import IconMemberAdd from "@material-ui/icons/PersonAdd";
 import VisibilityIcon from "@material-ui/icons/Visibility";
+import AdminIcon from "@material-ui/icons/SupervisedUserCircle";
 
 import AppBarOverride from "../widgets/AppBarOverride";
 import Container from "../widgets/Container";
@@ -28,13 +29,15 @@ interface PropsType {
 
 export default function CollectionMembers(props: PropsType) {
   const etebase = useCredentials()!;
-  const [members_, setMembers] = React.useState<Etebase.CollectionMember[]>();
+  const [members, setMembers] = React.useState<Etebase.CollectionMember[]>();
-  const [revokeUser, setRevokeUser] = React.useState<string | null>(null);
+  const [revokeUser, setRevokeUser] = React.useState<Etebase.CollectionMember | null>(null);
   const [addMemberOpen, setAddMemberOpen] = React.useState(false);
   const [error, setError] = React.useState<Error>();
 
   const { collection, metadata } = props.collection;
 
+  const revokeUserIsAdmin = revokeUser?.accessLevel === Etebase.CollectionAccessLevel.Admin;
+
   async function fetchMembers() {
     const colMgr = getCollectionManager(etebase);
     const memberManager = colMgr.getMemberManager(collection);
@@ -62,14 +65,10 @@ export default function CollectionMembers(props: PropsType) {
     fetchMembers();
   }, []);
 
-  function onRevokeRequest(user: string) {
-    setRevokeUser(user);
-  }
-
   async function onRevokeDo() {
     const colMgr = getCollectionManager(etebase);
     const memberManager = colMgr.getMemberManager(collection);
-    await memberManager.remove(revokeUser!);
+    await memberManager.remove(revokeUser!.username);
     await fetchMembers();
     setRevokeUser(null);
   }
@@ -81,8 +80,6 @@ export default function CollectionMembers(props: PropsType) {
     setAddMemberOpen(false);
   }
 
-  const members = members_?.filter((x) => x.username !== etebase.user.username);
-
   return (
     <>
       <AppBarOverride title={`${metadata.name} - Members`} />
@@ -98,15 +95,23 @@ export default function CollectionMembers(props: PropsType) {
               Invite user
             </ListItem>
             {(members.length > 0 ?
-              members.map((member) => (
+              members.map((member) => {
+                let rightIcon: React.ReactElement | undefined = undefined;
+                if (member.accessLevel === Etebase.CollectionAccessLevel.ReadOnly) {
+                  rightIcon = (<div title="Read Only"><VisibilityIcon /></div>);
+                } else if (member.accessLevel === Etebase.CollectionAccessLevel.Admin) {
+                  rightIcon = (<div title="Admin"><AdminIcon /></div>);
+                }
+                return (
                   <ListItem
                     key={member.username}
-                  onClick={() => onRevokeRequest(member.username)}
+                    onClick={() => setRevokeUser(member)}
-                  rightIcon={(member.accessLevel === Etebase.CollectionAccessLevel.ReadOnly) ? (<VisibilityIcon />) : undefined}
+                    rightIcon={rightIcon}
                   >
                     {member.username}
                   </ListItem>
-              ))
+                );
+              })
               :
               <ListItem>
                 No members
@@ -121,11 +126,19 @@ export default function CollectionMembers(props: PropsType) {
         title="Remove member"
         labelOk="OK"
         open={revokeUser !== null}
-        onOk={onRevokeDo}
+        onOk={(revokeUserIsAdmin) ? () => setRevokeUser(null) : onRevokeDo}
         onCancel={() => setRevokeUser(null)}
       >
-        Would you like to revoke {revokeUser}'s access?<br />
+        {(revokeUserIsAdmin) ? (
+          <p>
+            Revoking admin access is not allowed.
+          </p>
+        ) : (
+          <p>
+            Would you like to revoke {revokeUser?.username}'s access?<br />
             Please be advised that a malicious user would potentially be able to retain access to encryption keys. Please refer to the FAQ for more information.
+          </p>
+        )}
       </ConfirmationDialog>
 
       {addMemberOpen &&