feat: disable options for downgrading the only admin (#931)

fix: #935

---------

Co-authored-by: spaenleh <spaenleh@gmail.com>

package.json

@@ -21,7 +21,7 @@
     "@graasp/query-client": "2.2.1",
     "@graasp/sdk": "3.3.0",
     "@graasp/translations": "1.21.1",
-    "@graasp/ui": "4.2.0",
+    "@graasp/ui": "4.3.0",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.19",

src/components/item/sharing/ItemMembershipSelect.tsx

@@ -15,12 +15,31 @@ import {
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
 
+/**
+ * Type of the `disabled` prop which allows to disable a subset of the options.
+ * Undefined keys are considered as not disabled.
+ */
+type DisabledMap = {
+  [key in PermissionLevel]?: boolean;
+};
+
+const defaultDisabledMap: DisabledMap = {
+  admin: false,
+  read: false,
+  write: false,
+};
+
 export type ItemMembershipSelectProps = {
   value: string;
   onChange?: SelectProps['onChange'];
   color?: SelectProps['color'];
   showLabel?: boolean;
   displayEmpty?: boolean;
+  /**
+   * This prop allows to disable the select when passed the value `true`
+   * or to disable only certain options when passed an object where the keys are the values of the options
+   */
+  disabled?: boolean | DisabledMap;
 };
 
 const ItemMembershipSelect = ({
@@ -29,14 +48,16 @@ const ItemMembershipSelect = ({
   color,
   showLabel = true,
   displayEmpty = false,
+  disabled = false,
 }: ItemMembershipSelectProps): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { t: enumT } = useEnumsTranslation();
   const [permission, setPermission] = useState(value);
   const label = showLabel
     ? translateBuilder(BUILDER.ITEM_MEMBERSHIP_PERMISSION_LABEL)
     : undefined;
-
+  const disabledMap =
+    typeof disabled === 'boolean' ? defaultDisabledMap : disabled;
   useEffect(() => {
     if (permission !== value) {
       setPermission(value);
@@ -50,7 +71,9 @@ const ItemMembershipSelect = ({
       values={Object.values(PermissionLevel).map((v) => ({
         value: v,
         text: enumT(v),
+        disabled: disabledMap[v],
       }))}
+      disabled={typeof disabled === 'boolean' ? disabled : undefined}
       buildOptionId={buildPermissionOptionId}
       value={permission}
       defaultValue={permission}

src/components/item/sharing/ItemMembershipsTable.tsx

@@ -207,7 +207,7 @@ const ItemMembershipsTable = ({
       },
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [item, showEmail, readOnly]);
+  }, [item, showEmail, readOnly, memberships]);
 
   const countTextFunction = (selected: string[]) =>
     translateBuilder(BUILDER.ITEMS_TABLE_SELECTION_TEXT, {

src/components/item/sharing/TableRowPermissionRenderer.tsx

@@ -55,7 +55,12 @@ function TableRowPermissionRenderer<
     const handleClose = () => {
       setOpen(false);
     };
+    const isEditingOwnPermission =
+      instance?.member && instance?.member?.id === currentMember?.id;
 
+    const isEditingTheOnlyAdmin = Boolean(
+      hasOnlyOneAdmin && instance.permission === PermissionLevel.Admin,
+    );
     const isParentMembership = useIsParentInstance({
       instance,
       item,
@@ -74,8 +79,7 @@ function TableRowPermissionRenderer<
       if (
         (value === PermissionLevel.Read || value === PermissionLevel.Write) &&
         instance.permission === PermissionLevel.Admin &&
-        instance?.member &&
-        instance?.member?.id === currentMember?.id
+        isEditingOwnPermission
       ) {
         setOpen(true);
       } else {
@@ -90,6 +94,7 @@ function TableRowPermissionRenderer<
         <ItemMembershipSelect
           value={instance.permission}
           showLabel={false}
+          disabled={isEditingTheOnlyAdmin}
           onChange={onChangePermission}
         />
         <Dialog