feat: disable guest row in membership table

graasp · Sep 24, 2024 · 26fb9d1 · 26fb9d1
1 parent 3e519f5
commit 26fb9d1
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 18 deletions.
diff --git a/src/components/item/sharing/membershipTable/GuestItemMembershipTableRow.tsx b/src/components/item/sharing/membershipTable/GuestItemMembershipTableRow.tsx
@@ -1,36 +1,71 @@
-import { TableCell, Typography } from '@mui/material';
+import { TableCell, Tooltip, Typography } from '@mui/material';
 
-import { DiscriminatedItem, ItemMembership } from '@graasp/sdk';
+import {
+  DiscriminatedItem,
+  ItemLoginSchema,
+  ItemMembership,
+} from '@graasp/sdk';
 
-import { useEnumsTranslation } from '@/config/i18n';
+import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
 
 import { buildItemMembershipRowId } from '../../../../config/selectors';
 import DeleteItemMembershipButton from './DeleteItemMembershipButton';
 import { StyledTableRow } from './StyledTableRow';
 
+const DISABLED_COLOR = '#a5a5a5';
+
 const GuestItemMembershipTableRow = ({
   data,
   itemId,
+  itemLoginSchema,
 }: {
   data: ItemMembership;
   itemId: DiscriminatedItem['id'];
+  itemLoginSchema?: ItemLoginSchema;
 }): JSX.Element => {
   const { t: translateEnums } = useEnumsTranslation();
+  const { t: translateBuilder } = useBuilderTranslation();
+
+  let isDisabled = false;
+  if (!itemLoginSchema) {
+    isDisabled = true;
+  }
 
   return (
-    <StyledTableRow data-cy={buildItemMembershipRowId(data.id)} key={data.id}>
-      <TableCell>
-        <Typography noWrap fontWeight="bold">
-          {data.account.name}
-        </Typography>
-      </TableCell>
-      <TableCell align="right">
-        <Typography>{translateEnums(data.permission)}</Typography>
-      </TableCell>
-      <TableCell align="right">
-        <DeleteItemMembershipButton itemId={itemId} data={data} />
-      </TableCell>
-    </StyledTableRow>
+    <Tooltip
+      title={
+        isDisabled
+          ? translateBuilder(
+              BUILDER.ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE,
+            )
+          : undefined
+      }
+    >
+      <StyledTableRow data-cy={buildItemMembershipRowId(data.id)} key={data.id}>
+        <TableCell>
+          <Typography
+            sx={{ color: isDisabled ? DISABLED_COLOR : undefined }}
+            noWrap
+            fontWeight="bold"
+          >
+            {data.account.name}
+          </Typography>
+        </TableCell>
+        <TableCell align="right">
+          {isDisabled ? (
+            <Typography sx={{ color: DISABLED_COLOR }}>
+              {translateBuilder('disabled')}
+            </Typography>
+          ) : (
+            <Typography>{translateEnums(data.permission)}</Typography>
+          )}
+        </TableCell>
+        <TableCell align="right">
+          <DeleteItemMembershipButton itemId={itemId} data={data} />
+        </TableCell>
+      </StyledTableRow>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/item/sharing/membershipTable/ItemMembershipsTable.tsx b/src/components/item/sharing/membershipTable/ItemMembershipsTable.tsx
@@ -63,6 +63,9 @@ const ItemMembershipsTable = ({ showEmail = true }: Props): JSX.Element => {
     hasOnlyOneAdmin,
     isLoading: isMembershipsLoading,
   } = useHighestMemberships({ canAdmin, item });
+  const { data: itemLoginSchema } = hooks.useItemLoginSchema({
+    itemId: item.id,
+  });
 
   if (memberships) {
     // map memberships to corresponding row layout and meaningful data to sort
@@ -86,7 +89,12 @@ const ItemMembershipsTable = ({ showEmail = true }: Props): JSX.Element => {
             }
           />
         ) : (
-          <GuestItemMembershipTableRow key={im.id} itemId={item.id} data={im} />
+          <GuestItemMembershipTableRow
+            itemLoginSchema={itemLoginSchema}
+            key={im.id}
+            itemId={item.id}
+            data={im}
+          />
         ),
     }));
 

diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -593,4 +593,6 @@ export const BUILDER = {
   REQUEST_ACCESS_BUTTON: 'REQUEST_ACCESS_BUTTON',
   REQUEST_ACCESS_SENT_BUTTON: 'REQUEST_ACCESS_SENT_BUTTON',
   ACCESS_MANAGEMENT_TITLE: 'ACCESS_MANAGEMENT_TITLE',
+  ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE:
+    'ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -491,5 +491,6 @@
   "REQUEST_ACCESS_TITLE": "Request access to this item",
   "REQUEST_ACCESS_BUTTON": "Request access",
   "REQUEST_ACCESS_SENT_BUTTON": "Request sent",
-  "ACCESS_MANAGEMENT_TITLE": "Access Management"
+  "ACCESS_MANAGEMENT_TITLE": "Access Management",
+  "ITEM_LOGIN_SCHEMA_DISABLED_GUEST_ACCESS_MESSAGE": "This guest cannot login because pseudonymized access is disabled."
 }