feat: create item information page

graasp · Jan 25, 2024 · ec96e0e · ec96e0e
1 parent dc54416
commit ec96e0e
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 108 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -12,6 +12,7 @@ import { SIGN_IN_PATH } from '@/config/externalPaths';
 import {
   FAVORITE_ITEMS_PATH,
   HOME_PATH,
+  INFORMATION_PATH,
   ITEMS_PATH,
   PUBLISHED_ITEMS_PATH,
   PUBLISH_PATH,
@@ -29,6 +30,7 @@ import SharedItems from './SharedItems';
 import { useCurrentUserContext } from './context/CurrentUserContext';
 import FavoriteItems from './main/FavoriteItems';
 import Home from './main/Home';
+import ItemInformationScreen from './main/ItemScreens/ItemInformationScreen';
 import ItemScreen from './main/ItemScreens/ItemScreen';
 import ItemScreenLayout from './main/ItemScreens/ItemScreenLayout';
 import PublishItemScreen from './main/ItemScreens/PublishItemScreen';
@@ -94,6 +96,7 @@ const App = (): JSX.Element => {
           <Route path={SHARE_PATH} element={<ShareItemScreen />} />
           <Route path={PUBLISH_PATH} element={<PublishItemScreen />} />
           <Route path={SETTINGS_PATH} element={<SettingsItemScreen />} />
+          <Route path={INFORMATION_PATH} element={<ItemInformationScreen />} />
         </Route>
         <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />
         <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />

diff --git a/src/components/common/ItemMetadataButton.tsx b/src/components/common/ItemMetadataButton.tsx
@@ -1,37 +1,27 @@
+import { useNavigate } from 'react-router';
+
 import InfoIcon from '@mui/icons-material/Info';
 import { IconButton, Tooltip } from '@mui/material';
 
+import { buildItemInformationPath } from '@/config/paths';
+
 import { useBuilderTranslation } from '../../config/i18n';
-import {
-  ITEM_INFORMATION_BUTTON_ID,
-  ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
-} from '../../config/selectors';
+import { ITEM_INFORMATION_BUTTON_ID } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { useLayoutContext } from '../context/LayoutContext';
 
-const ItemMetadataButton = (): JSX.Element => {
+const ItemMetadataButton = ({ id }: { id: string }): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    isItemMetadataMenuOpen,
-    setIsItemMetadataMenuOpen,
-    setIsChatboxMenuOpen,
-  } = useLayoutContext();
+
+  const navigate = useNavigate();
 
   const onClick = () => {
-    setIsItemMetadataMenuOpen(!isItemMetadataMenuOpen);
-    setIsChatboxMenuOpen(false);
+    navigate(buildItemInformationPath(id));
   };
 
   return (
     <Tooltip title={translateBuilder(BUILDER.ITEM_METADATA_TITLE)}>
       <span>
-        <IconButton
-          id={ITEM_INFORMATION_BUTTON_ID}
-          onClick={onClick}
-          className={
-            isItemMetadataMenuOpen ? ITEM_INFORMATION_ICON_IS_OPEN_CLASS : ''
-          }
-        >
+        <IconButton id={ITEM_INFORMATION_BUTTON_ID} onClick={onClick}>
           <InfoIcon />
         </IconButton>
       </span>

diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx
@@ -12,8 +12,6 @@ interface LayoutContextInterface {
   setEditingItemId: (itemId: string | null) => void;
   isMainMenuOpen: boolean;
   setIsMainMenuOpen: (isOpen: boolean) => void;
-  isItemMetadataMenuOpen: boolean;
-  setIsItemMetadataMenuOpen: (isOpen: boolean) => void;
   isChatboxMenuOpen: boolean;
   setIsChatboxMenuOpen: (isOpen: boolean) => void;
 }
@@ -31,10 +29,6 @@ export const LayoutContext = createContext<LayoutContextInterface>({
   setIsMainMenuOpen: () => {
     // do nothing
   },
-  isItemMetadataMenuOpen: false,
-  setIsItemMetadataMenuOpen: () => {
-    // do nothing
-  },
   isChatboxMenuOpen: false,
   setIsChatboxMenuOpen: () => {
     // do nothing
@@ -55,7 +49,6 @@ export const LayoutContextProvider = ({
 
   const [isMainMenuOpen, setIsMainMenuOpen] = useState(true);
 
-  const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false);
   // check query params to see if chat should be open
   const chatIsOpen =
     new URLSearchParams(window.location.search).get('chat') === ChatStatus.Open;
@@ -69,18 +62,10 @@ export const LayoutContextProvider = ({
       setEditingItemId,
       isMainMenuOpen,
       setIsMainMenuOpen,
-      isItemMetadataMenuOpen,
-      setIsItemMetadataMenuOpen,
       isChatboxMenuOpen,
       setIsChatboxMenuOpen,
     }),
-    [
-      editingItemId,
-      isChatboxMenuOpen,
-      isItemMetadataMenuOpen,
-      isMainMenuOpen,
-      mode,
-    ],
+    [editingItemId, isChatboxMenuOpen, isMainMenuOpen, mode],
   );
 
   return (

diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
@@ -9,7 +9,6 @@ import { ITEM_MAIN_CLASS } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 import Chatbox from '../common/Chatbox';
 import { useLayoutContext } from '../context/LayoutContext';
-import ItemMetadataContent from './ItemMetadataContent';
 import ItemPanel from './ItemPanel';
 import ItemHeader from './header/ItemHeader';
 
@@ -57,13 +56,8 @@ type Props = {
 
 const ItemMain = ({ id, children, item }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    isItemMetadataMenuOpen,
-    setIsItemMetadataMenuOpen,
-    isChatboxMenuOpen,
-    setIsChatboxMenuOpen,
-    isMainMenuOpen,
-  } = useLayoutContext();
+  const { isChatboxMenuOpen, setIsChatboxMenuOpen, isMainMenuOpen } =
+    useLayoutContext();
 
   return (
     <Container id={id} className={ITEM_MAIN_CLASS} open={isMainMenuOpen}>
@@ -84,23 +78,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
           <Chatbox item={item} />
         </ItemPanel>
       )}
-      <ItemPanel open={isItemMetadataMenuOpen}>
-        <DrawerHeader
-          handleDrawerClose={() => {
-            setIsItemMetadataMenuOpen(false);
-          }}
-          // todo
-          direction="rtl"
-        >
-          <Typography variant="h6">
-            {translateBuilder(BUILDER.ITEM_METADATA_TITLE)}
-          </Typography>
-        </DrawerHeader>
-        <Divider />
-        <ItemMetadataContent item={item} />
-      </ItemPanel>
-
-      <StyledContainer open={isChatboxMenuOpen || isItemMetadataMenuOpen}>
+      <StyledContainer open={isChatboxMenuOpen}>
         <ItemHeader showNavigation />
 
         {children}

diff --git a/src/components/item/ItemMemberships.tsx b/src/components/item/ItemMemberships.tsx
@@ -17,15 +17,10 @@ import { useCurrentUserContext } from '../context/CurrentUserContext';
 
 type Props = {
   id?: string;
-  onClick: () => void;
   maxAvatar?: number;
 };
 
-const ItemMemberships = ({
-  id,
-  maxAvatar = 2,
-  onClick,
-}: Props): JSX.Element | null => {
+const ItemMemberships = ({ id, maxAvatar = 2 }: Props): JSX.Element | null => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { data: memberships, isError } = hooks.useItemMemberships(id);
   const { data: currentUser } = useCurrentUserContext();
@@ -57,7 +52,7 @@ const ItemMemberships = ({
           })}
           aria-label={translateBuilder(BUILDER.SHARED_MEMBERS_LABEL)}
         >
-          <AvatarGroup max={maxAvatar} spacing={3} onClick={onClick}>
+          <AvatarGroup max={maxAvatar} spacing={3}>
             {filteredMemberships.map(({ member, permission }) => {
               const badgeContent =
                 permission === PermissionLevel.Read ? (

diff --git a/src/components/item/ItemMetadataContent.tsx b/src/components/item/ItemMetadataContent.tsx
@@ -1,3 +1,4 @@
+import { Container } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -24,8 +25,8 @@ import {
   ITEM_PANEL_TABLE_ID,
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { useLayoutContext } from '../context/LayoutContext';
 import ItemMemberships from './ItemMemberships';
+import ThumbnailSetting from './settings/ThumbnailSetting';
 
 const { useMember } = hooks;
 
@@ -37,13 +38,8 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { t: translateCommon } = useCommonTranslation();
 
-  const { setIsItemMetadataMenuOpen } = useLayoutContext();
   const { data: creator } = useMember(item?.creator?.id);
 
-  const onClick = () => {
-    setIsItemMetadataMenuOpen(true);
-  };
-
   let size = null;
   let mimetype = null;
   if (item.type === ItemType.S3_FILE) {
@@ -75,7 +71,9 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
   };
 
   return (
-    <>
+    <Container>
+      <ThumbnailSetting item={item} />
+
       <TableContainer sx={{ p: 2, boxSizing: 'border-box' }}>
         <Typography variant="h5" id={ITEM_PANEL_NAME_ID} noWrap>
           {item.name}
@@ -132,8 +130,8 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
           </TableBody>
         </Table>
       </TableContainer>
-      <ItemMemberships id={item.id} maxAvatar={5} onClick={onClick} />
-    </>
+      <ItemMemberships id={item.id} maxAvatar={5} />
+    </Container>
   );
 };
 

diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx
@@ -32,12 +32,8 @@ type Props = {
 
 const ItemHeaderActions = ({ item }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    editingItemId,
-    isChatboxMenuOpen,
-    setIsChatboxMenuOpen,
-    setIsItemMetadataMenuOpen,
-  } = useLayoutContext();
+  const { editingItemId, isChatboxMenuOpen, setIsChatboxMenuOpen } =
+    useLayoutContext();
 
   const { data: member } = useCurrentUserContext();
 
@@ -55,7 +51,6 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => {
 
   const onClickChatbox = () => {
     setIsChatboxMenuOpen(!isChatboxMenuOpen);
-    setIsItemMetadataMenuOpen(false);
   };
 
   const renderItemActions = () => {
@@ -101,7 +96,7 @@ const ItemHeaderActions = ({ item }: Props): JSX.Element => {
         // show only for content with tables : root or folders
         (item?.type === ItemType.FOLDER || !item?.id) && <ModeButton />
       }
-      {item?.id && <ItemMetadataButton />}
+      {item?.id && <ItemMetadataButton id={item.id} />}
     </Stack>
   );
 };

diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx
@@ -1,12 +1,21 @@
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import InfoIcon from '@mui/icons-material/Info';
-import { FormControlLabel, FormGroup, Switch, Tooltip } from '@mui/material';
+import {
+  Alert,
+  FormControlLabel,
+  FormGroup,
+  Switch,
+  Tooltip,
+} from '@mui/material';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
+import { buildItemInformationPath } from '@/config/paths';
+
 import {
   DEFAULT_COLLAPSIBLE_SETTING,
   DEFAULT_PINNED_SETTING,
@@ -27,7 +36,6 @@ import { BUILDER } from '../../../langs/constants';
 import AdminChatSettings from './AdminChatSettings';
 import FileSettings from './FileSettings';
 import LinkSettings from './LinkSettings';
-import ThumbnailSetting from './ThumbnailSetting';
 
 type Props = {
   item: DiscriminatedItem;
@@ -203,6 +211,12 @@ const ItemSettings = ({ item }: Props): JSX.Element => {
 
   return (
     <Container disableGutters sx={{ mt: 2 }}>
+      <Alert severity="warning" sx={{ marginBottom: 2 }}>
+        {translateBuilder(BUILDER.UPDATE_THUMBNAIL_AT_INFO_ALERT)}{' '}
+        <Link to={buildItemInformationPath(item.id)}>
+          {translateBuilder(BUILDER.UPDATE_THUMBNAIL_LINK_TEXT)}
+        </Link>
+      </Alert>
       <Typography variant="h4">
         {translateBuilder(BUILDER.SETTINGS_TITLE)}
       </Typography>
@@ -215,7 +229,6 @@ const ItemSettings = ({ item }: Props): JSX.Element => {
         {renderSaveActionsSetting()}
       </FormGroup>
       {renderSettingsPerType()}
-      <ThumbnailSetting item={item} />
       <AdminChatSettings item={item} />
     </Container>
   );

diff --git a/src/components/item/settings/ThumbnailSetting.tsx b/src/components/item/settings/ThumbnailSetting.tsx
@@ -120,22 +120,10 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
       {uppy && (
         <StatusBar uppy={uppy} handleClose={handleClose} open={openStatusBar} />
       )}
-      <Stack spacing={3} mb={3}>
+      <Stack spacing={2} mb={3}>
         <Typography variant="h5">
           {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_TITLE)}
         </Typography>
-        <Typography variant="body1">
-          {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_SETTINGS_INFORMATIONS)}
-        </Typography>
-        <input
-          type="file"
-          accept="image/*"
-          onInput={onSelectFile}
-          // onChange is successfully triggered in test
-          onChange={onSelectFile}
-          ref={inputRef}
-          className={THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME}
-        />
         <Thumbnail
           id={itemId}
           isLoading={isLoading}
@@ -149,6 +137,18 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
           maxWidth={THUMBNAIL_SETTING_MAX_WIDTH}
           maxHeight={THUMBNAIL_SETTING_MAX_HEIGHT}
         />
+        <input
+          type="file"
+          accept="image/*"
+          onInput={onSelectFile}
+          // onChange is successfully triggered in test
+          onChange={onSelectFile}
+          ref={inputRef}
+          className={THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME}
+        />
+        <Typography variant="caption">
+          {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_SETTINGS_INFORMATIONS)}
+        </Typography>
       </Stack>
       {fileSource && (
         <CropModal