feat(ui): create separate pages for item share, publish and settings

cypress/e2e/item/share/shareItem.cy.ts

@@ -1,6 +1,6 @@
 import { Context, ShortLink, appendPathToUrl } from '@graasp/sdk';
 
-import { buildItemPath } from '@/config/paths';
+import { buildItemPath, buildItemSharePath } from '@/config/paths';
 import { ShortLinkPlatform } from '@/utils/shortLink';
 
 import {
@@ -196,4 +196,22 @@ describe('Share Item Link', () => {
       cy.get(`#${SHARE_ITEM_QR_DIALOG_ID}`).should('exist');
     });
   });
+
+  describe('Without short links', () => {
+    const item = PUBLISHED_ITEM;
+
+    beforeEach(() => {
+      cy.setUpApi({ items: [item] });
+    });
+
+    it('Builder link is correctly displayed', () => {
+      cy.visit(buildItemSharePath(item.id));
+
+      cy.get(`.${SHORT_LINK_COMPONENT}`).should('have.length', 3);
+
+      const context = Context.Builder;
+      checkContainPlatformText(context);
+      checkContainUrlText(context, item.id);
+    });
+  });
 });

src/components/common/BackButton.tsx

@@ -2,6 +2,7 @@ import ArrowCircleLeftRoundedIcon from '@mui/icons-material/ArrowCircleLeftRound
 import { IconButton, Tooltip } from '@mui/material';
 
 import { useBuilderTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
 
 interface Props {
   onClick: () => void;
@@ -10,7 +11,7 @@ const BackButton = ({ onClick }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
 
   return (
-    <Tooltip title={t('Go Back')}>
+    <Tooltip title={t(BUILDER.BACK)}>
       <IconButton onClick={onClick}>
         <ArrowCircleLeftRoundedIcon fontSize="large" />
       </IconButton>

src/components/common/ItemMetadataButton.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import InfoIcon from '@mui/icons-material/Info';
 import { IconButton, Tooltip } from '@mui/material';
@@ -12,19 +12,13 @@ import { BUILDER } from '../../langs/constants';
 const ItemMetadataButton = ({ itemId }: { itemId: string }): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
-  const navigate = useNavigate();
-
-  const onClick = () => {
-    navigate(buildItemInformationPath(itemId));
-  };
-
   return (
     <Tooltip title={translateBuilder(BUILDER.ITEM_METADATA_TITLE)}>
-      <span>
-        <IconButton id={ITEM_INFORMATION_BUTTON_ID} onClick={onClick}>
+      <Link to={buildItemInformationPath(itemId)}>
+        <IconButton id={ITEM_INFORMATION_BUTTON_ID}>
           <InfoIcon />
         </IconButton>
-      </span>
+      </Link>
     </Tooltip>
   );
 };

src/components/common/PublishButton.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -20,26 +20,20 @@ type Props = {
 
 const PublishButton = ({ itemId }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const navigate = useNavigate();
-
-  const onClick = () => {
-    navigate(buildItemPublishPath(itemId));
-  };
 
   const title = translateBuilder(BUILDER.LIBRARY_SETTINGS_BUTTON_TITLE);
 
   return (
     <Tooltip title={title}>
-      <span>
+      <Link to={buildItemPublishPath(itemId)}>
         <IconButton
           aria-label={title}
           className={PUBLISH_ITEM_BUTTON_CLASS}
-          onClick={onClick}
           id={buildPublishButtonId(itemId)}
         >
           <LibraryIcon size={24} showSetting primaryColor="#777" />
         </IconButton>
-      </span>
+      </Link>
     </Tooltip>
   );
 };

src/components/common/ShareButton.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import { ShareButton as GraaspShareButton } from '@graasp/ui';
 
@@ -17,20 +17,16 @@ type Props = {
 
 const ShareButton = ({ itemId }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const navigate = useNavigate();
-
-  const onClick = () => {
-    navigate(buildItemSharePath(itemId));
-  };
 
   return (
-    <GraaspShareButton
-      tooltip={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
-      ariaLabel={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
-      className={SHARE_ITEM_BUTTON_CLASS}
-      onClick={onClick}
-      id={buildShareButtonId(itemId)}
-    />
+    <Link to={buildItemSharePath(itemId)}>
+      <GraaspShareButton
+        tooltip={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
+        ariaLabel={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
+        className={SHARE_ITEM_BUTTON_CLASS}
+        id={buildShareButtonId(itemId)}
+      />
+    </Link>
   );
 };
 

src/components/item/ItemMetadataContent.tsx

@@ -27,7 +27,6 @@ import {
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 import { OutletType } from '../pages/item/type';
-import ItemMemberships from './ItemMemberships';
 import ThumbnailSetting from './settings/ThumbnailSetting';
 
 const { useMember } = hooks;
@@ -129,7 +128,6 @@ const ItemMetadataContent = (): JSX.Element => {
           </TableBody>
         </Table>
       </TableContainer>
-      <ItemMemberships id={item.id} maxAvatar={5} />
     </Container>
   );
 };

src/components/item/settings/ItemSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import SettingsIcon from '@mui/icons-material/Settings';
 import IconButton from '@mui/material/IconButton';
@@ -19,23 +19,16 @@ type Props = {
 
 const ItemSettingsButton = ({ id }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const navigate = useNavigate();
-
-  const onClickSettings = () => {
-    navigate(buildItemSettingsPath(id));
-  };
-
   return (
     <Tooltip title={translateBuilder(BUILDER.SETTINGS_TITLE)}>
-      <span>
+      <Link to={buildItemSettingsPath(id)}>
         <IconButton
-          onClick={onClickSettings}
           className={ITEM_SETTINGS_BUTTON_CLASS}
           id={buildSettingsButtonId(id)}
         >
           <SettingsIcon />
         </IconButton>
-      </span>
+      </Link>
     </Tooltip>
   );
 };

src/components/layout/Navigation.tsx

@@ -34,11 +34,7 @@ const Navigator = (): JSX.Element | null => {
   const { data: item, isLoading: isItemLoading } = useItem(itemId);
   const itemPath = item?.path;
 
-  const location = useLocation();
-
-  const itemSettingsLocation = location.pathname.split(
-    `${buildItemPath(itemId)}/`,
-  )?.[1];
+  const { pathname: location } = useLocation();
 
   const { data: parents, isLoading: areParentsLoading } = useParents({
     id: itemId,
@@ -114,7 +110,7 @@ const Navigator = (): JSX.Element | null => {
 
   const extraItems = buildExtraItems({
     translate: translateBuilder,
-    location: itemSettingsLocation,
+    location,
     itemId,
   });
 

src/components/layout/utils.tsx

@@ -5,19 +5,18 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { LibraryIcon } from '@graasp/ui';
 
 import {
+  ITEM_INFORMATION_PATH,
+  ITEM_PUBLISH_PATH,
+  ITEM_SETTINGS_PATH,
+  ITEM_SHARE_PATH,
   buildItemInformationPath,
+  buildItemPath,
   buildItemPublishPath,
   buildItemSettingsPath,
   buildItemSharePath,
 } from '@/config/paths';
 import { BUILDER } from '@/langs/constants';
 
-const ItemAction = {
-  SETTINGS: 'settings',
-  INFORMATION: 'information',
-  SHARE: 'share',
-  PUBLISH: 'publish',
-};
 export interface MenuItemType {
   name: string;
   path: string;
@@ -41,6 +40,9 @@ export const buildExtraItems = ({
   if (!itemId) {
     return [];
   }
+
+  const page = buildItemPath(location);
+
   // we don't switch to sub pages
   // const menuItems = [
   //   {
@@ -61,8 +63,8 @@ export const buildExtraItems = ({
   //   },
   // ];
 
-  switch (location) {
-    case ItemAction.SETTINGS:
+  switch (true) {
+    case page.includes(ITEM_SETTINGS_PATH):
       return [
         {
           name: translate(BUILDER.SETTINGS_TITLE),
@@ -71,7 +73,7 @@ export const buildExtraItems = ({
           menuItems: [],
         },
       ];
-    case ItemAction.SHARE:
+    case page.includes(ITEM_SHARE_PATH):
       return [
         {
           name: translate(BUILDER.SHARE_ITEM_BUTTON),
@@ -80,7 +82,7 @@ export const buildExtraItems = ({
           menuItems: [],
         },
       ];
-    case ItemAction.PUBLISH:
+    case page.includes(ITEM_PUBLISH_PATH):
       return [
         {
           name: translate(BUILDER.LIBRARY_SETTINGS_PUBLISH_BUTTON),
@@ -89,7 +91,7 @@ export const buildExtraItems = ({
           menuItems: [],
         },
       ];
-    case ItemAction.INFORMATION:
+    case page.includes(ITEM_INFORMATION_PATH):
       return [
         {
           name: translate(BUILDER.ITEM_ACTION_INFORMATION),