feat: add short links view (#664)

- The view is not responsive yet
- Contain problems yet with the SDK and the query-client

package.json

@@ -17,8 +17,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.0.0",
-    "@graasp/query-client": "2.0.0",
-    "@graasp/sdk": "2.0.1",
+    "@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/ui": "4.0.0",
     "@mui/icons-material": "5.14.16",
@@ -147,7 +147,7 @@
     "vite-plugin-istanbul": "5.0.0"
   },
   "resolutions": {
-    "@graasp/sdk": "2.0.1"
+    "@graasp/sdk": "github:graasp/graasp-sdk#664-add-short-links-feature"
   },
   "packageManager": "[email protected]"
 }

src/components/common/QRCode.tsx

@@ -14,9 +14,10 @@ import { BUILDER } from '@/langs/constants';
 
 type Props = {
   value: string;
+  disabled: boolean;
 };
 
-const QRCode = ({ value }: Props): JSX.Element => {
+const QRCode = ({ value, disabled }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const [openQrModal, setOpenQrModal] = useState<boolean>(false);
 
@@ -26,6 +27,7 @@ const QRCode = ({ value }: Props): JSX.Element => {
         <IconButton
           onClick={() => setOpenQrModal(true)}
           id={SHARE_ITEM_QR_BTN_ID}
+          disabled={disabled}
         >
           <QrCode2 />
         </IconButton>

src/components/item/sharing/ConfirmDeleteLink.tsx

@@ -0,0 +1,53 @@
+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';
+
+interface DeleteLinkProps {
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    handleDelete: () => void;
+}
+
+const ConfirmDeleteLink = ({ open, setOpen, handleDelete }: DeleteLinkProps): JSX.Element => {
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleClickDelete = () => {
+    setOpen(false);
+    handleDelete();
+  }
+
+  return (
+    <div>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          Confirm the suppression of the short link ?
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            You are removing the short link, do you want to continue ?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} autoFocus>Cancel</Button>
+          <Button onClick={handleClickDelete} color='error'>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+export default ConfirmDeleteLink;

src/components/item/sharing/ItemSharingTab.tsx

@@ -16,6 +16,7 @@ import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
 import { BUILDER } from '../../../langs/constants';
 import {
+  // isItemAdminAllowedForUser,
   isItemUpdateAllowedForUser,
   isSettingsEditionAllowedForUser,
 } from '../../../utils/membership';
@@ -26,6 +27,7 @@ import InvitationsTable from './InvitationsTable';
 import ItemMembershipsTable from './ItemMembershipsTable';
 import SharingLink from './SharingLink';
 import VisibilitySelect from './VisibilitySelect';
+import ShortLinksRenderer from './ShortLinksRenderer';
 
 type Props = {
   item: DiscriminatedItem;
@@ -50,6 +52,12 @@ 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,
+  // })
+
   if (isLoadingCurrentMember && isItemLoginLoading) {
     return <Loader />;
   }
@@ -134,6 +142,12 @@ 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} />
       <Typography variant="h6">
         {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_TITLE)}
       </Typography>