fix: update main component and cleanup

cypress/e2e/item/edit/editApp.cy.ts

@@ -53,6 +53,7 @@ describe('Edit App', () => {
       cy.get(`#${EDIT_ITEM_MODAL_CANCEL_BUTTON_ID}`).click();
       cy.get(`#${EDIT_ITEM_MODAL_CANCEL_BUTTON_ID}`).should('not.exist');
       cy.get(`.${ITEM_MAIN_CLASS} .${TEXT_EDITOR_CLASS}`)
+        .scrollIntoView()
         .should('be.visible')
         .and('contain.text', description);
     });

cypress/e2e/item/publish/coEditorSettings.cy.ts

@@ -36,10 +36,9 @@ describe('Co-editor Setting', () => {
     visitItemPage();
 
     Object.values(DISPLAY_CO_EDITORS_OPTIONS).forEach((option) => {
-      const displayTags = cy.get(
-        `#${buildCoEditorSettingsRadioButtonId(option.value)}`,
-      );
-      displayTags.should('be.visible');
+      cy.get(`#${buildCoEditorSettingsRadioButtonId(option.value)}`)
+        .scrollIntoView()
+        .should('be.visible');
     });
   });
 

cypress/e2e/item/settings/itemSettings.cy.ts

@@ -96,10 +96,9 @@ describe('Item Settings', () => {
       cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
       // click on the clear chat button
-      cy.get(`#${CLEAR_CHAT_SETTING_ID}`)
-        .should('exist')
-        .and('be.visible')
-        .click();
+      cy.get(`#${CLEAR_CHAT_SETTING_ID}`).scrollIntoView();
+      cy.get(`#${CLEAR_CHAT_SETTING_ID}`).should('exist').and('be.visible');
+      cy.get(`#${CLEAR_CHAT_SETTING_ID}`).click();
 
       // check that the dialog is open
       cy.get(`#${CLEAR_CHAT_DIALOG_ID}`);

cypress/support/editUtils.ts

@@ -64,6 +64,7 @@ export const editCaptionFromViewPage = ({
   cy.get(`#${buildEditButtonId(id)}`).click();
   cy.get(`#${EDIT_MODAL_ID} .${TEXT_EDITOR_CLASS}`).type(
     `{selectall}${caption}`,
+    { timeout: 100 },
   );
   cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
 };

package.json

@@ -21,7 +21,7 @@
     "@graasp/query-client": "2.4.1",
     "@graasp/sdk": "3.4.1",
     "@graasp/translations": "1.22.1",
-    "@graasp/ui": "4.4.0",
+    "@graasp/ui": "4.5.0",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.19",

src/components/Root.tsx

@@ -37,7 +37,9 @@ const Root = (): JSX.Element => (
         </Router>
       </ThemeProvider>
     </I18nextProvider>
-    {import.meta.env.DEV && <ReactQueryDevtools position="bottom-right" />}
+    {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
+      <ReactQueryDevtools position="bottom-right" />
+    )}
   </QueryClientProvider>
 );
 

src/components/common/EditButton.tsx

@@ -61,7 +61,7 @@ const EditButton = ({ item }: Props): JSX.Element => {
         />
       </Dialog>
       <GraaspEditButton
-        tooltip={translateBuilder(BUILDER.EDIT_ITEM_BUTTON)}
+        title={translateBuilder(BUILDER.EDIT_ITEM_BUTTON)}
         id={buildEditButtonId(item.id)}
         ariaLabel={translateBuilder(BUILDER.EDIT_ITEM_BUTTON)}
         className={EDIT_ITEM_BUTTON_CLASS}

src/components/item/ItemMain.tsx

@@ -3,7 +3,7 @@ import { Box, Divider, Typography, styled } from '@mui/material';
 import { DiscriminatedItem } from '@graasp/sdk';
 import { DrawerHeader } from '@graasp/ui';
 
-import { DRAWER_WIDTH, RIGHT_MENU_WIDTH } from '../../config/constants';
+import { RIGHT_MENU_WIDTH } from '../../config/constants';
 import { useBuilderTranslation } from '../../config/i18n';
 import { ITEM_MAIN_CLASS } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
@@ -13,10 +13,6 @@ import ItemMetadataContent from './ItemMetadataContent';
 import ItemPanel from './ItemPanel';
 import ItemHeader from './header/ItemHeader';
 
-const Container = styled(Box)<{ open: boolean }>(({ open }) => ({
-  width: open ? `calc(100vw - ${DRAWER_WIDTH})` : '100vw',
-}));
-
 const StyledContainer = styled(Box)<{ open: boolean }>(({ theme, open }) => {
   const openStyles = open
     ? {
@@ -29,14 +25,8 @@ const StyledContainer = styled(Box)<{ open: boolean }>(({ theme, open }) => {
     : {};
 
   return {
-    position: 'relative',
-    padding: theme.spacing(1, 2),
     flexGrow: 1,
     marginRight: 0,
-    width: 'unset',
-    // takes the whole screen height minus the header height approximatively
-    // this might have to change
-    minHeight: '85vh',
     display: 'flex',
     flexDirection: 'column',
 
@@ -62,11 +52,10 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
     setIsItemMetadataMenuOpen,
     isChatboxMenuOpen,
     setIsChatboxMenuOpen,
-    isMainMenuOpen,
   } = useLayoutContext();
 
   return (
-    <Container id={id} className={ITEM_MAIN_CLASS} open={isMainMenuOpen}>
+    <Box id={id} className={ITEM_MAIN_CLASS}>
       {isChatboxMenuOpen && (
         <ItemPanel open={isChatboxMenuOpen}>
           <DrawerHeader
@@ -105,7 +94,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
 
         {children}
       </StyledContainer>
-    </Container>
+    </Box>
   );
 };
 

src/components/main/Main.tsx

@@ -1,11 +1,9 @@
 import { Link } from 'react-router-dom';
 
-import { Grid, Typography, styled } from '@mui/material';
-import Box from '@mui/material/Box';
+import { Stack, styled } from '@mui/material';
 
 import { Context } from '@graasp/sdk';
 import {
-  GraaspLogo,
   Main as GraaspMain,
   Platform,
   PlatformSwitch,
@@ -15,8 +13,9 @@ import {
 } from '@graasp/ui';
 
 import { HOST_MAP } from '@/config/externalPaths';
+import { useBuilderTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
 
-import { APP_NAME, GRAASP_LOGO_HEADER_HEIGHT } from '../../config/constants';
 import { HOME_PATH, ITEM_ID_PARAMS } from '../../config/paths';
 import {
   APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
@@ -35,7 +34,9 @@ const StyledLink = styled(Link)(() => ({
   display: 'flex',
   alignItems: 'center',
 }));
-type Props = { children: JSX.Element | (JSX.Element & string) };
+const LinkComponent = ({ children }: { children: JSX.Element }) => (
+  <StyledLink to={HOME_PATH}>{children}</StyledLink>
+);
 
 // small converter for HOST_MAP into a usePlatformNavigation mapper
 export const platformsHostsMap = defaultHostsMapper({
@@ -44,8 +45,11 @@ export const platformsHostsMap = defaultHostsMapper({
   [Platform.Analytics]: HOST_MAP.analytics,
 });
 
+type Props = { children: JSX.Element | (JSX.Element & string) };
+
 const Main = ({ children }: Props): JSX.Element => {
-  const { isMainMenuOpen, setIsMainMenuOpen } = useLayoutContext();
+  const { isMainMenuOpen } = useLayoutContext();
+  const { t } = useBuilderTranslation();
 
   const itemId = useShortenURLParams(ITEM_ID_PARAMS);
 
@@ -69,47 +73,29 @@ const Main = ({ children }: Props): JSX.Element => {
     },
   };
 
-  const leftContent = (
-    <Box display="flex" ml={2}>
-      <StyledLink to={HOME_PATH}>
-        <GraaspLogo height={GRAASP_LOGO_HEADER_HEIGHT} sx={{ fill: 'white' }} />
-        <Typography variant="h6" color="inherit" mr={2} ml={1}>
-          {APP_NAME}
-        </Typography>
-      </StyledLink>
-      <PlatformSwitch
-        id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
-        selected={Platform.Builder}
-        platformsProps={platformProps}
-      />
-    </Box>
-  );
-
   const rightContent = (
-    <Grid container>
-      <Grid item>
-        <NotificationButton />
-      </Grid>
-      <Grid item>
-        <UserSwitchWrapper />
-      </Grid>
-    </Grid>
+    <Stack direction="row" alignItems="center">
+      <NotificationButton />
+      <UserSwitchWrapper />
+    </Stack>
   );
 
   return (
     <GraaspMain
       context={Context.Builder}
-      handleDrawerOpen={() => {
-        setIsMainMenuOpen(true);
-      }}
-      handleDrawerClose={() => {
-        setIsMainMenuOpen(false);
-      }}
       headerId={HEADER_APP_BAR_ID}
-      headerLeftContent={leftContent}
+      drawerOpenAriaLabel={t(BUILDER.ARIA_OPEN_DRAWER)}
       headerRightContent={rightContent}
-      sidebar={<MainMenu />}
+      drawerContent={<MainMenu />}
       open={isMainMenuOpen}
+      LinkComponent={LinkComponent}
+      PlatformComponent={
+        <PlatformSwitch
+          id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
+          selected={Platform.Builder}
+          platformsProps={platformProps}
+        />
+      }
     >
       <CookiesBanner />
       {children}

src/langs/constants.ts

@@ -362,6 +362,7 @@ export const BUILDER = {
   EMPTY_FOLDER_CHILDREN_FOR_THIS_ITEM: 'EMPTY_FOLDER_CHILDREN_FOR_THIS_ITEM',
   TO_FOLDER: 'TO_FOLDER',
   ROOT: 'ROOT',
+  ARIA_OPEN_DRAWER: 'ARIA_OPEN_DRAWER',
   // temporary message
   "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.":
     "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.",

src/langs/en.json

@@ -303,6 +303,7 @@
   "EMPTY_FOLDER_CHILDREN_FOR_THIS_ITEM": "This item does not contain any folder.",
   "TO_FOLDER": "to {{name}}",
   "ROOT": "Root",
+  "ARIA_OPEN_DRAWER": "open drawer",
   "ITEM_SELECTION_NAVIGATION_RECENT_ITEMS": "Recent Items",
   "ITEM_SELECTION_NAVIGATION_PARENT": "Move above"
 }

src/langs/fr.json

@@ -298,5 +298,6 @@
   "SHORT_LINK_UNKNOWN_ERROR": "Il y a une erreur inconnue.",
   "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.": "Les éléments de cette page sont aussi disponibles dans ''Mon Graasp''. Cette page ''Eléments Partagés'' sera bientôt indisponible.",
   "ITEM_SELECTION_NAVIGATION_RECENT_ITEMS": "Éléments Récents",
-  "ITEM_SELECTION_NAVIGATION_PARENT": "Déplacer au-dessus"
+  "ITEM_SELECTION_NAVIGATION_PARENT": "Déplacer au-dessus",
+  "ARIA_OPEN_DRAWER": "ouvrir la bare latérale"
 }

yarn.lock

@@ -1308,9 +1308,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.4.0":
-  version: 4.4.0
-  resolution: "@graasp/ui@npm:4.4.0"
+"@graasp/ui@npm:4.5.0":
+  version: 4.5.0
+  resolution: "@graasp/ui@npm:4.5.0"
   dependencies:
     "@graasp/sdk": "npm:3.5.0"
     http-status-codes: "npm:2.3.0"
@@ -1344,7 +1344,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 2b037daec606f5de34079a36560991efc9ebe044b26f472a272ca480e21083109304a978a2fbe74a23de1e70de19d2e814e434f7665a828bbdaa5ef93538a65f
+  checksum: eecd53f0d9d7824c526179b84db29ff303c70f0405d19ad74fc48c5b4966ed47620da06fdda981bfc7ed70eba08d02d1bc9f3e3a958ec430c556fa6b191f5878
   languageName: node
   linkType: hard
 
@@ -6333,7 +6333,7 @@ __metadata:
     "@graasp/query-client": "npm:2.4.1"
     "@graasp/sdk": "npm:3.4.1"
     "@graasp/translations": "npm:1.22.1"
-    "@graasp/ui": "npm:4.4.0"
+    "@graasp/ui": "npm:4.5.0"
     "@mui/icons-material": "npm:5.14.19"
     "@mui/lab": "npm:5.0.0-alpha.151"
     "@mui/material": "npm:5.14.19"