feat: improve UI, add translations and messages (graasp/graasp#664)

- Update the UI to be more responsive - Update the UI to not allow to edit or create multiple short links at same time - Add membership admin check to hide short links view if forbbiden - Add notifier for short links actions and show error messages to the user
graasp · Nov 10, 2023 · d9b60b0 · d9b60b0
1 parent 8dd93d3
commit d9b60b0
Show file tree

Hide file tree

Showing 14 changed files with 1,070 additions and 648 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@graasp/chatbox": "3.0.0",
     "@graasp/query-client": "github:graasp/graasp-query-client#664-add-short-links-feature",
     "@graasp/sdk": "github:graasp/graasp-sdk#664-add-short-links-feature",
-    "@graasp/translations": "1.19.4",
+    "@graasp/translations": "github:graasp/graasp-translations#664-add-short-links-feature",
     "@graasp/ui": "4.0.0",
     "@mui/icons-material": "5.14.16",
     "@mui/lab": "5.0.0-alpha.151",

diff --git a/src/components/common/QRCode.tsx b/src/components/common/QRCode.tsx
@@ -14,10 +14,10 @@ import { BUILDER } from '@/langs/constants';
 
 type Props = {
   value: string;
-  disabled: boolean;
+  disabled?: boolean;
 };
 
-const QRCode = ({ value, disabled }: Props): JSX.Element => {
+const QRCode = ({ value, disabled = false }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const [openQrModal, setOpenQrModal] = useState<boolean>(false);
 

diff --git a/src/components/item/sharing/ConfirmDeleteLink.tsx b/src/components/item/sharing/ConfirmDeleteLink.tsx
@@ -1,48 +1,69 @@
+import { Dispatch, SetStateAction } from 'react';
+
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import { Dispatch, SetStateAction } from 'react';
+
+import { useBuilderTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
 
 interface DeleteLinkProps {
-    open: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
-    handleDelete: () => void;
+  shortLink: string;
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  handleDelete: () => void;
 }
 
-const ConfirmDeleteLink = ({ open, setOpen, handleDelete }: DeleteLinkProps): JSX.Element => {
+const ConfirmDeleteLink = ({
+  shortLink,
+  open,
+  setOpen,
+  handleDelete,
+}: DeleteLinkProps): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
 
-  const handleClose = () => {
-    setOpen(false);
+  const handleClose = () => setOpen(false);
+
+  const onClose = (_event: Event, reason: string) => {
+    if (reason === 'backdropClick') {
+      return;
+    }
+
+    handleClose();
   };
 
   const handleClickDelete = () => {
     setOpen(false);
     handleDelete();
-  }
+  };
 
   return (
     <div>
       <Dialog
         open={open}
-        onClose={handleClose}
+        onClose={onClose}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
         <DialogTitle id="alert-dialog-title">
-          Confirm the suppression of the short link ?
+          {translateBuilder(BUILDER.CONFIRM_DELETE_SHORT_LINK_TITLE)}
         </DialogTitle>
         <DialogContent>
           <DialogContentText id="alert-dialog-description">
-            You are removing the short link, do you want to continue ?
+            {translateBuilder(BUILDER.CONFIRM_DELETE_SHORT_LINK_MSG, {
+              shortLink,
+            })}
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose} autoFocus>Cancel</Button>
-          <Button onClick={handleClickDelete} color='error'>
-            Delete
+          <Button onClick={handleClose} autoFocus>
+            {translateBuilder(BUILDER.CANCEL_BTN)}
+          </Button>
+          <Button onClick={handleClickDelete} color="error">
+            {translateBuilder(BUILDER.DELETE_BTN)}
           </Button>
         </DialogActions>
       </Dialog>

diff --git a/src/components/item/sharing/ItemSharingTab.tsx b/src/components/item/sharing/ItemSharingTab.tsx
@@ -16,7 +16,7 @@ import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
 import { BUILDER } from '../../../langs/constants';
 import {
-  // isItemAdminAllowedForUser,
+  isItemAdminAllowedForUser,
   isItemUpdateAllowedForUser,
   isSettingsEditionAllowedForUser,
 } from '../../../utils/membership';
@@ -26,8 +26,8 @@ import CsvInputParser from './CsvInputParser';
 import InvitationsTable from './InvitationsTable';
 import ItemMembershipsTable from './ItemMembershipsTable';
 import SharingLink from './SharingLink';
-import VisibilitySelect from './VisibilitySelect';
 import ShortLinksRenderer from './ShortLinksRenderer';
+import VisibilitySelect from './VisibilitySelect';
 
 type Props = {
   item: DiscriminatedItem;
@@ -52,16 +52,31 @@ const ItemSharingTab = ({ item, memberships }: Props): JSX.Element => {
     memberId: currentMember?.id,
   });
 
-  // TODO: check if isItemUpdateAllowedForUser can be reused... why allowing on edit ?
-  // const canAdminShortLinks = isItemAdminAllowedForUser({
-  //   memberships,
-  //   memberId: currentMember?.id,
-  // })
+  const canAdminShortLinks = isItemAdminAllowedForUser({
+    memberships,
+    memberId: currentMember?.id,
+  });
 
   if (isLoadingCurrentMember && isItemLoginLoading) {
     return <Loader />;
   }
 
+  const renderShortLinks = () => {
+    // do not display short links if cannot access memberships
+    if (!memberships || !canAdminShortLinks) {
+      return null;
+    }
+
+    return (
+      <>
+        <Typography variant="h6">
+          {translateBuilder(BUILDER.ITEM_SETTINGS_SHORT_LINK_TITLE)}
+        </Typography>
+        <ShortLinksRenderer itemId={item.id} />
+      </>
+    );
+  };
+
   const renderMembershipSettings = () => {
     // do not display settings if cannot access memberships
     if (!memberships || !canEdit) {
@@ -142,12 +157,7 @@ const ItemSharingTab = ({ item, memberships }: Props): JSX.Element => {
         {translateBuilder(BUILDER.SHARING_TITLE)}
       </Typography>
       <SharingLink itemId={item.id} />
-      <Typography variant="h6">
-        {/* TODO: Translte it */}
-        {/* {translateBuilder(BUILDER.ITEM_SETTINGS_SHORT_LINK_TITLE)} */}
-        Short Links
-      </Typography>
-      <ShortLinksRenderer itemId={item.id} />
+      {renderShortLinks()}
       <Typography variant="h6">
         {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_TITLE)}
       </Typography>