chore: [PROD-13949] upgrade Grid to Grid2

nborde-CSM · nborde-CSM · commit fa654db7fd31 · 2024-11-06T11:12:35.000+01:00
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,
@@ -120,7 +120,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' }}
@@ -146,7 +146,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) => (
@@ -176,7 +176,7 @@ export const RolesEditionDialog = ({
               </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,
@@ -63,7 +63,7 @@ export const RolesAddingDialog = ({
           )}
         />
         <Grid container spacing={2}>
-          <Grid item xs={4}>
+          <Grid size={4}>
             {!selectedRole && (
               <Typography variant="body2" color="textSecondary">
                 {labels.rolesHelperText}
@@ -92,10 +92,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) => ({
@@ -37,10 +37,10 @@ export const SignInButton = (props) => {
   return (
     <button className={classes.root} onClick={onClick} data-cy={'sign-in-with-' + id + '-button'}>
       <Grid container spacing={0} direction="row" sx={{ alignItems: 'center', justifyContent: 'flex-start' }}>
-        <Grid item>
+        <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/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/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) => ({
@@ -40,15 +40,15 @@ const DashboardPlaceholder = (props) => {
       <Grid>
         <Typography variant="h3">{title}</Typography>
       </Grid>
-      <Grid item>
+      <Grid>
         {icon !== undefined && <div className={classes.iconContainer}>{icon}</div>}
         <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>
diff --git a/src/inputs/BasicInputs/BasicTextInput/BasicTextInput.js b/src/inputs/BasicInputs/BasicTextInput/BasicTextInput.js
@@ -32,9 +32,7 @@ export const BasicTextInput = (props) => {
       direction="row"
       spacing={1}
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
-      sx={{
-        alignItems: 'center',
-      }}
+      sx={{ alignItems: 'center' }}
     >
       <TextField
         {...textFieldProps}
diff --git a/src/inputs/DescriptionEditor/DescriptionEditor.js b/src/inputs/DescriptionEditor/DescriptionEditor.js
@@ -3,7 +3,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import EditIcon from '@mui/icons-material/Edit';
-import { Grid, Stack, TextField, Typography } from '@mui/material';
+import { Grid2 as Grid, Stack, TextField, Typography } from '@mui/material';
 
 export const DescriptionEditor = (props) => {
   const { onChange, readOnly, value, labels } = props;
diff --git a/src/inputs/RoleEditor/RoleEditor.js b/src/inputs/RoleEditor/RoleEditor.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';
 import { DefaultAvatar } from '../../misc';
 import { getIdentifierFromUserEmail } from '../../utils';
@@ -38,8 +38,8 @@ export const RoleEditor = ({
   const classes = useStyles();
   const avatar = icon ? <Avatar>{icon}</Avatar> : <DefaultAvatar userName={agentName} />;
   return (
-    <Grid data-cy={`role-editor-${getIdentifierFromUserEmail(agentName)}`} item xs={12} className={classes.rolesEditor}>
-      <Grid item xs={7} className={classes.agentGroup}>
+    <Grid data-cy={`role-editor-${getIdentifierFromUserEmail(agentName)}`} className={classes.rolesEditor} size={12}>
+      <Grid className={classes.agentGroup} size={7}>
         {avatar}
         <div className={classes.nameGroup}>
           <Typography data-cy="role-editor-agent-name" variant="body1">
@@ -52,7 +52,7 @@ export const RoleEditor = ({
           )}
         </div>
       </Grid>
-      <Grid item xs={5}>
+      <Grid size={5}>
         <SelectWithAction
           isReadOnly={isReadOnly}
           options={allRoles}
diff --git a/src/inputs/TagsEditor/TagsEditor.js b/src/inputs/TagsEditor/TagsEditor.js
@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import EditIcon from '@mui/icons-material/Edit';
-import { Chip, Grid, TextField, Typography } from '@mui/material';
+import { Chip, Grid2 as Grid, TextField, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 const DEFAULT_LABELS = {
@@ -113,7 +113,7 @@ export const TagsEditor = (props) => {
       onMouseOver={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <Grid item>
+      <Grid>
         <Grid
           container
           sx={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', flexWrap: 'nowrap' }}
@@ -124,7 +124,7 @@ export const TagsEditor = (props) => {
           {values.length === 0 ? addTagIcon : null}
         </Grid>
       </Grid>
-      <Grid item data-cy={`${id}-tags`} sx={{ ml: 1 }}>
+      <Grid data-cy={`${id}-tags`} sx={{ ml: 1 }}>
         <Grid
           data-cy="tags-container"
           container
diff --git a/src/misc/LoadingLine/LoadingLine.js b/src/misc/LoadingLine/LoadingLine.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import Lottie from 'react-lottie-player/dist/LottiePlayerLight';
 import PropTypes from 'prop-types';
-import { Grid, Typography } from '@mui/material';
+import { Grid2 as Grid, Typography } from '@mui/material';
 
 export const LoadingLine = (props) => {
   const { title, isLoading, hasError, animations, style } = props;
@@ -16,10 +16,10 @@ export const LoadingLine = (props) => {
   return (
     <>
       <Grid container direction="row" sx={{ alignItems: 'center' }}>
-        <Grid item>
+        <Grid>
           <Typography variant={style.variant}>{title}</Typography>
         </Grid>
-        <Grid item>
+        <Grid>
           {isLoading ? (
             <Lottie animationData={animations.dataLoading} style={spinnerStyle} loop play />
           ) : (
