Cosmo-Tech · esasova · Nov 7, 2024 · Oct 3, 2024 · Oct 4, 2024 · Oct 5, 2024
diff --git a/package.json b/package.json
@@ -33,10 +33,12 @@
     "@eslint/compat": "^1.2.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.13.0",
-    "@mui/icons-material": "^5.16.5",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.16.5",
-    "@mui/styles": "^5.16.5",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/styles": "^6.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
@@ -48,6 +50,7 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "babel-jest": "^29.7.0",
     "eslint": "^9.13.0",
+    "dayjs": "^1.11.13",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.8.3",
@@ -79,10 +82,9 @@
   "peerDependencies": {
     "@cosmotech/azure": "^2.0.1",
     "@cosmotech/core": "^1.19.1",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.117",
-    "@mui/material": "^5.11.6",
-    "@mui/styles": "^5.11.2",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/styles": "^6.0.0",
     "prop-types": "^15.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -91,7 +93,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^7.0.0",
     "@nosferatu500/react-sortable-tree": "^3.0.6",
     "ag-grid-community": "~32.2.2",
     "ag-grid-react": "~32.2.2",
@@ -100,7 +102,6 @@
     "cytoscape-bubblesets": "^3.2.2",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-layers": "^2.4.5",
-    "eslint-plugin-testing-library": "^6.3.0",
     "powerbi-client-react": "^1.4.0",
     "react-cytoscapejs": "^2.0.0",
     "react-lottie-player": "^2.1.0",

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -35,7 +35,6 @@ export default {
     'react-virtualized',
     '@mui/material',
     '@mui/icons-material',
-    '@mui/lab',
     '@mui/styles',
     'react-i18next',
     'react-router-dom',

diff --git a/src/buttons/CreateScenarioButton/components/CreateScenarioDialog/CreateScenarioDialog.js b/src/buttons/CreateScenarioButton/components/CreateScenarioDialog/CreateScenarioDialog.js
@@ -10,7 +10,7 @@ import {
   DialogContent,
   DialogTitle,
   FormControlLabel,
-  Grid,
+  Grid2 as Grid,
   TextField,
   Autocomplete,
   Chip,
@@ -197,7 +197,7 @@ const CreateScenarioDialog = ({
       <DialogTitle id="form-dialog-title">{dialogLabels.title}</DialogTitle>
       <DialogContent className={classes.dialogContent}>
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <TextField
               data-cy="create-scenario-dialog-name-textfield"
               variant="standard"
@@ -212,7 +212,7 @@ const CreateScenarioDialog = ({
               fullWidth
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <BasicTextInput
               id="new-scenario-description"
               label={dialogLabels.scenarioDescription ?? 'Description'}
@@ -225,7 +225,7 @@ const CreateScenarioDialog = ({
               }}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Autocomplete
               id="new-scenario-tags"
               freeSolo
@@ -248,10 +248,10 @@ const CreateScenarioDialog = ({
               onChange={(event, values) => setScenarioTags(values)}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormControlLabel control={getMasterScenarioCheckBox()} label={dialogLabels.scenarioMaster} />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Autocomplete
               data-cy="create-scenario-dialog-type-select"
               ListboxProps={{ 'data-cy': 'create-scenario-dialog-type-select-options' }}
@@ -271,7 +271,7 @@ const CreateScenarioDialog = ({
               )}
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             {isMaster || !currentScenarioSelected ? (
               <Autocomplete
                 data-cy="create-scenario-dialog-dataset-select"

diff --git a/src/buttons/RolesEditionButton/components/RolesEditionDialog/RolesEditionDialog.js b/src/buttons/RolesEditionButton/components/RolesEditionDialog/RolesEditionDialog.js
@@ -9,7 +9,7 @@ import {
   Dialog,
   DialogTitle,
   DialogContent,
-  Grid,
+  Grid2 as Grid,
   TextField,
   DialogActions,
   Button,
@@ -137,7 +137,7 @@ export const RolesEditionDialog = ({
       <DialogContent>
         <Grid container spacing={2}>
           {!isReadOnly && (
-            <Grid item xs={12}>
+            <Grid size={12}>
               <Autocomplete
                 data-cy="share-scenario-dialog-agents-select"
                 ListboxProps={{ 'data-cy': 'share-scenario-dialog-agents-select-options' }}
@@ -163,7 +163,7 @@ export const RolesEditionDialog = ({
               />
             </Grid>
           )}
-          <Grid item xs={12} className={classes.rolesEditorContainer}>
+          <Grid className={classes.rolesEditorContainer} size={12}>
             <Typography variant="subtitle1">{labels.usersAccess}</Typography>
             {newAccessControlList.length > 0 &&
               newAccessControlList.map((agent) => (
@@ -188,12 +188,12 @@ export const RolesEditionDialog = ({
           </Grid>
           <Grid container>
             {hasNoAdmin && (
-              <Typography data-cy="no-admin-error-message" variant="caption" color="error" paragraph={true}>
+              <Typography data-cy="no-admin-error-message" variant="caption" color="error" sx={{ mb: 2 }}>
                 {labels.noAdminError}
               </Typography>
             )}
           </Grid>
-          <Grid item xs={12} className={classes.rolesEditorContainer}>
+          <Grid className={classes.rolesEditorContainer} size={12}>
             <Typography variant="subtitle1">{labels.generalAccess}</Typography>
             <RoleEditor
               agentName={defaultAccessScope}

diff --git a/src/buttons/RolesEditionButton/components/RolesEditionDialog/components/RolesAddingDialog.js b/src/buttons/RolesEditionButton/components/RolesEditionDialog/components/RolesAddingDialog.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import CheckIcon from '@mui/icons-material/Check';
 import {
   DialogContent,
-  Grid,
+  Grid2 as Grid,
   TextField,
   DialogActions,
   Button,
@@ -74,7 +74,7 @@ export const RolesAddingDialog = ({
           )}
         />
         <Grid container spacing={2}>
-          <Grid item xs={4}>
+          <Grid size={4}>
             {!selectedRole && (
               <Typography variant="body2" color="textSecondary">
                 {labels.rolesHelperText}
@@ -103,10 +103,10 @@ export const RolesAddingDialog = ({
               ))}
             </RadioGroup>
           </Grid>
-          <Grid item xs={1}>
+          <Grid size={1}>
             <Divider orientation="vertical" variant="middle" />
           </Grid>
-          <Grid item xs={7}>
+          <Grid size={7}>
             <Typography variant="subtitle2">{labels.grantedPermissions}</Typography>
             {sortedPermissions.granted.map((permission) => (
               <Chip

diff --git a/src/buttons/SignInButton/SignInButton.js b/src/buttons/SignInButton/SignInButton.js
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Typography, Avatar } from '@mui/material';
+import { Grid2 as Grid, Typography, Avatar } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
@@ -36,11 +36,11 @@ export const SignInButton = (props) => {
 
   return (
     <button className={classes.root} onClick={onClick} data-cy={'sign-in-with-' + id + '-button'}>
-      <Grid container spacing={0} direction="row" alignItems="center" justifyContent="flex-start">
-        <Grid item>
+      <Grid container spacing={0} direction="row" sx={{ alignItems: 'center', justifyContent: 'flex-start' }}>
+        <Grid>
           <Avatar className={classes.logo} variant="square" src={logo} />
         </Grid>
-        <Grid item zeroMinWidth>
+        <Grid>
           <Typography noWrap className={classes.label}>
             {label}
           </Typography>

diff --git a/src/cards/ScenarioNode/ScenarioNode.js b/src/cards/ScenarioNode/ScenarioNode.js
@@ -246,7 +246,7 @@ export const ScenarioNode = ({
                   </Typography>
                 </Typography>
               </FadingTooltip>
-              <Typography variant="subtitle2" component="span" mx={0.5}>
+              <Typography variant="subtitle2" component="span" sx={{ mx: 0.5 }}>
                 |
               </Typography>
               <FadingTooltip title={labels.dataset + ' ' + datasetNames}>
@@ -289,7 +289,7 @@ export const ScenarioNode = ({
 
   const getScenarioHeader = () => {
     return (
-      <Box className={classes.scenarioHeader} flexGrow={1}>
+      <Box className={classes.scenarioHeader} sx={{ flexGrow: 1 }}>
         {isExpanded ? getScenarioCreationData() : getScenarioDetailNameLine(false)}
       </Box>
     );

diff --git a/src/cards/ScenarioNode/components/EditableLink/EditableLink.js b/src/cards/ScenarioNode/components/EditableLink/EditableLink.js
@@ -10,7 +10,7 @@ import {
   Link,
   CircularProgress,
   IconButton,
-  Grid,
+  Grid2 as Grid,
   Typography,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';

diff --git a/src/charts/CytoViz/CytoViz.js b/src/charts/CytoViz/CytoViz.js
@@ -538,13 +538,15 @@ export const CytoViz = (props) => {
                       helperText={explorationDepthFieldHasError ? labels.accordion.exploreGraph.limitDepthError : ''}
                       value={explorationDepth}
                       onChange={checkExplorationDepth}
-                      InputProps={{
-                        inputProps: {
-                          max: 1000,
-                          min: 1,
+                      variant="standard"
+                      slotProps={{
+                        input: {
+                          inputProps: {
+                            max: 1000,
+                            min: 1,
+                          },
                         },
                       }}
-                      variant="standard"
                     />
                     <div>
                       <p>{labels.accordion.exploreGraph.flowDirection}</p>

diff --git a/src/charts/CytoViz/components/TabPanel/TabPanel.js b/src/charts/CytoViz/components/TabPanel/TabPanel.js
@@ -15,7 +15,7 @@ const TabPanel = (props) => {
       aria-labelledby={`drawer-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </div>
   );
 };

diff --git a/src/charts/Dashboard/components/DashboardPlaceholder/DashboardPlaceholder.js b/src/charts/Dashboard/components/DashboardPlaceholder/DashboardPlaceholder.js
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography, Grid, Button, LinearProgress } from '@mui/material';
+import { Typography, Grid2 as Grid, Button, LinearProgress } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
@@ -30,23 +30,25 @@ const DashboardPlaceholder = (props) => {
     <Grid
       container
       direction="column"
-      justifyContent="center"
       wrap="nowrap"
-      alignItems="center"
       className={classes.gridContainer}
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
     >
       <Grid>
         <Typography variant="h3">{title}</Typography>
       </Grid>
-      <Grid item>
+      <Grid>
         {icon !== undefined && <div className={classes.iconContainer}>{icon}</div>}
-        <Typography data-cy="dashboard-placeholder" color="textSecondary" variant="body1" className={classes.label}>
+        <Typography data-cy="dashboard-placeholder" variant="body1" className={classes.label} color="textSecondary">
           {label}
         </Typography>
         {inProgress && <LinearProgress data-cy="dashboard-in-progress" className={classes.linearProgress} />}
       </Grid>
       {downloadLogsFile && (
-        <Grid item>
+        <Grid>
           <Button variant="contained" color="primary" onClick={downloadLogsFile}>
             {downloadLabel}
           </Button>