fix: update mui version to v6 (#880)

* fix: udpate mui version to v6 * fix: update deps * fix: tests
graasp · Oct 25, 2024 · d2a9356 · d2a9356
1 parent 581e360
commit d2a9356
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 262 deletions.
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -20,7 +20,6 @@ import {
   mockGetItemChat,
   mockGetItemGeolocation,
   mockGetItemMembershipsForItem,
-  mockGetItemTags,
   mockGetItemsInMap,
   mockGetItemsTags,
   mockGetLoginSchemaType,
@@ -56,8 +55,6 @@ Cypress.Commands.add(
     mockGetItemChat({ chatMessages });
     mockGetItemMembershipsForItem(items, currentMember);
 
-    mockGetItemTags(items, currentMember);
-
     mockGetItemsTags(items, currentMember);
     mockGetLoginSchemaType(itemLogins);
 

diff --git a/cypress/support/server.ts b/cypress/support/server.ts
@@ -1,7 +1,6 @@
 import { API_ROUTES } from '@graasp/query-client';
 import {
   ChatMessage,
-  DiscriminatedItem,
   HttpMethod,
   ItemTag,
   Member,
@@ -21,7 +20,7 @@ import {
   buildGetAppData,
 } from '../fixtures/apps';
 import { MEMBERS } from '../fixtures/members';
-import { MockItem, MockItemTag } from '../fixtures/mockTypes';
+import { MockItem } from '../fixtures/mockTypes';
 import {
   ACCOUNT_HOST,
   ANALYTICS_HOST,
@@ -48,7 +47,6 @@ const {
   buildGetItemLoginSchemaRoute,
   buildGetItemMembershipsForItemsRoute,
   buildGetItemRoute,
-  buildGetItemTagsRoute,
   buildGetMembersByEmailRoute,
   buildGetMembersByIdRoute,
   buildGetCurrentMemberRoute,
@@ -351,48 +349,6 @@ export const mockDefaultDownloadFile = (
   ).as('downloadFile');
 };
 
-export const mockGetItemTags = (
-  items: MockItem[],
-  member: Member | null,
-): void => {
-  cy.intercept(
-    {
-      method: DEFAULT_GET.method,
-      url: new RegExp(`${API_HOST}/${buildGetItemTagsRoute(ID_FORMAT)}$`),
-    },
-    ({ reply, url }) => {
-      const itemId = url.slice(API_HOST.length).split('/')[2];
-      const item = items.find(({ id }) => id === itemId);
-
-      // item does not exist in db
-      if (!item) {
-        return reply({
-          statusCode: StatusCodes.NOT_FOUND,
-        });
-      }
-
-      const error = checkMemberHasAccess({ item, items, member });
-      if (isError(error)) {
-        return reply(error);
-      }
-
-      const itemTags = items
-        .filter((i) => item.path.startsWith(i.path) && (i.public || i.hidden))
-        .map(
-          (i) =>
-            [i.public, i.hidden].filter(Boolean).map((t) => ({
-              ...t,
-              item: i as DiscriminatedItem,
-            })) as ItemTag[],
-        );
-      const result =
-        itemTags.reduce<MockItemTag[]>((acc, tags) => [...acc, ...tags], []) ||
-        [];
-      return reply(result);
-    },
-  ).as('getItemTags');
-};
-
 export const mockGetItemsTags = (
   items: MockItem[],
   member: Member | null,

diff --git a/package.json b/package.json
@@ -37,19 +37,19 @@
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.3.0",
-    "@graasp/query-client": "4.2.0",
+    "@graasp/query-client": "5.0.0",
     "@graasp/sdk": "4.32.1",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.40.0",
-    "@graasp/ui": "5.3.1",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.173",
-    "@mui/material": "5.16.7",
+    "@graasp/ui": "5.4.0",
+    "@mui/icons-material": "6.1.5",
+    "@mui/lab": "6.0.0-beta.13",
+    "@mui/material": "6.1.5",
     "@sentry/react": "7.119.2",
     "axios": "1.7.7",
     "classnames": "2.5.1",
     "date-fns": "4.1.0",
-    "i18next": "23.16.2",
+    "i18next": "23.16.3",
     "katex": "0.16.11",
     "lodash.isarray": "4.0.0",
     "lodash.truncate": "4.4.2",
@@ -79,21 +79,21 @@
     "@types/katex": "^0.16.7",
     "@types/lodash.isarray": "^4.0.9",
     "@types/lodash.truncate": "^4.4.9",
-    "@types/node": "^20.16.12",
+    "@types/node": "^20.17.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-helmet": "^6.1.11",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "8.11.0",
     "@typescript-eslint/parser": "8.11.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.3",
     "commitlint": "19.5.0",
     "concurrently": "9.0.1",
-    "cypress": "13.15.0",
+    "cypress": "13.15.1",
     "cypress-iframe": "1.0.1",
     "cypress-vite": "1.5.0",
     "env-cmd": "10.1.0",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",

diff --git a/src/modules/pages/HomePage.tsx b/src/modules/pages/HomePage.tsx
@@ -1,14 +1,14 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { Helmet } from 'react-helmet';
 
 import {
   Alert,
+  Grid2 as Grid,
   Pagination,
   PaginationItem,
   Stack,
   Typography,
 } from '@mui/material';
-import Grid2 from '@mui/material/Unstable_Grid2';
 
 import { PackedItem } from '@graasp/sdk';
 
@@ -29,10 +29,8 @@ const { useAccessibleItems } = hooks;
 // should be a multiple of 6 to create full pages that split into 2, 3 and 6 columns
 const PAGE_SIZE = 24;
 
-const GridWrapper = ({ children }: { children: JSX.Element }): JSX.Element => (
-  <Grid2 xs={12} sm={6} md={4} xl={2}>
-    {children}
-  </Grid2>
+const GridWrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+  <Grid size={{ xs: 12, sm: 6, md: 4, xl: 2 }}>{children}</Grid>
 );
 
 const DisplayItems = ({
@@ -41,7 +39,7 @@ const DisplayItems = ({
 }: {
   items?: PackedItem[];
   isLoading: boolean;
-}): JSX.Element[] | JSX.Element | null => {
+}): ReactNode | null => {
   const { t } = usePlayerTranslation();
 
   if (items) {
@@ -89,9 +87,9 @@ const HomePage = (): JSX.Element => {
           <Typography variant="h4" component="h1" mb={1}>
             {t(PLAYER.RECENT_ITEMS_TITLE)}
           </Typography>
-          <Grid2 container spacing={3} justifyItems="center">
+          <Grid container spacing={3} justifyItems="center">
             <DisplayItems items={accessibleItems?.data} isLoading={isLoading} />
-          </Grid2>
+          </Grid>
         </Stack>
         <Pagination
           id={HOME_PAGE_PAGINATION_ID}

diff --git a/src/modules/rightPanel/SideContent.tsx b/src/modules/rightPanel/SideContent.tsx
@@ -3,7 +3,7 @@ import { useParams, useSearchParams } from 'react-router-dom';
 
 import EnterFullscreenIcon from '@mui/icons-material/Fullscreen';
 import ExitFullscreenIcon from '@mui/icons-material/FullscreenExit';
-import { Grid, Stack, Tooltip, styled } from '@mui/material';
+import { Stack, Tooltip, styled } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 
 import { DiscriminatedItem } from '@graasp/sdk';
@@ -166,15 +166,15 @@ const SideContent = ({ content, item }: Props): JSX.Element | null => {
     >
       {displayChatbox()}
       {displayPinnedItems()}
-      <Grid id="contentGrid">
+      <Stack id="contentGrid">
         <StyledMain
           isShifted={isChatboxOpen || (isPinnedOpen && pinnedCount > 0)}
         >
           {displayFullscreenButton()}
 
           {content}
         </StyledMain>
-      </Grid>
+      </Stack>
     </Fullscreen>
   );
 };