chore: [PROD-13949] update depreciated props

nborde-CSM · nborde-CSM · commit 9466fdf9ccab · 2024-11-06T11:12:35.000+01:00
diff --git a/src/buttons/RolesEditionButton/components/RolesEditionDialog/RolesEditionDialog.js b/src/buttons/RolesEditionButton/components/RolesEditionDialog/RolesEditionDialog.js
@@ -171,7 +171,7 @@ 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>
             )}
diff --git a/src/buttons/SignInButton/SignInButton.js b/src/buttons/SignInButton/SignInButton.js
@@ -36,7 +36,7 @@ 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 container spacing={0} direction="row" sx={{ alignItems: 'center', justifyContent: 'flex-start' }}>
         <Grid item>
           <Avatar className={classes.logo} variant="square" src={logo} />
         </Grid>
diff --git a/src/cards/ScenarioNode/ScenarioNode.js b/src/cards/ScenarioNode/ScenarioNode.js
@@ -205,7 +205,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}>
@@ -248,7 +248,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/charts/CytoViz/CytoViz.js b/src/charts/CytoViz/CytoViz.js
@@ -494,13 +494,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
@@ -30,17 +30,19 @@ 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>
         {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} />}
diff --git a/src/inputs/BasicInputs/BasicDateInput/BasicDateInput.js b/src/inputs/BasicInputs/BasicDateInput/BasicDateInput.js
@@ -83,8 +83,8 @@ export const BasicDateInput = (props) => {
       data-cy={`date-input-${id}`}
       direction="row"
       spacing={1}
-      alignItems="center"
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+      sx={{ alignItems: 'center' }}
     >
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <DesktopDatePicker
diff --git a/src/inputs/BasicInputs/BasicEnumInput/BasicEnumInput.js b/src/inputs/BasicInputs/BasicEnumInput/BasicEnumInput.js
@@ -47,8 +47,10 @@ export const BasicEnumInput = (props) => {
       data-cy={`enum-input-${id}`}
       direction="row"
       spacing={1}
-      alignItems="center"
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+      sx={{
+        alignItems: 'center',
+      }}
     >
       <TextField
         variant="outlined"
@@ -57,14 +59,16 @@ export const BasicEnumInput = (props) => {
         sx={{ flexGrow: 1 }}
         select
         value={typeof valueKey === 'string' ? valueKey : ''}
-        SelectProps={{
-          renderValue: (key) => (
-            <Box style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{getLabelFromEnumKey(key)}</Box>
-          ), // Prevent extra padding on selected value
-          'data-cy': `enum-input-select-${id}`,
-          MenuProps: { 'data-cy': `enum-input-menu-${id}` },
-        }}
         onChange={(event) => changeEnumField(event.target.value)}
+        slotProps={{
+          select: {
+            renderValue: (key) => (
+              <Box style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{getLabelFromEnumKey(key)}</Box>
+            ), // Prevent extra padding on selected value
+            'data-cy': `enum-input-select-${id}`,
+            MenuProps: { 'data-cy': `enum-input-menu-${id}` },
+          },
+        }}
       >
         {enumValues.map((option) => (
           <MenuItem
diff --git a/src/inputs/BasicInputs/BasicInputPlaceholder/BasicInputPlaceholder.js b/src/inputs/BasicInputs/BasicInputPlaceholder/BasicInputPlaceholder.js
@@ -8,8 +8,14 @@ import { TooltipInfo } from '../../../misc';
 export const BasicInputPlaceholder = ({ id, label, tooltipText, value, ...otherProps }) => {
   return (
     <Stack data-cy={id}>
-      <Stack spacing={1} direction="row" alignItems="center">
-        <Typography data-cy="disabled-input-label" variant="subtitle2" color="textSecondary">
+      <Stack
+        spacing={1}
+        direction="row"
+        sx={{
+          alignItems: 'center',
+        }}
+      >
+        <Typography data-cy="disabled-input-label" variant="subtitle2" sx={{ color: 'textSecondary' }}>
           {label}
         </Typography>
         <TooltipInfo title={tooltipText} />
diff --git a/src/inputs/BasicInputs/BasicNumberInput/BasicNumberInput.js b/src/inputs/BasicInputs/BasicNumberInput/BasicNumberInput.js
@@ -89,8 +89,8 @@ export const BasicNumberInput = (props) => {
       data-cy={`number-input-${id}`}
       direction="row"
       spacing={1}
-      alignItems="center"
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+      sx={{ alignItems: 'center' }}
     >
       <TextField
         id={`number-input-${id}`}
@@ -102,12 +102,12 @@ export const BasicNumberInput = (props) => {
         onChange={handleChangeEvent}
         onBlur={handleBlurEvent}
         onFocus={handleFocusEvent}
-        inputProps={inputProps}
-        InputProps={{
-          inputComponent: NumberFormat,
-        }}
         error={!!error}
         helperText={error?.message ?? ''}
+        slotProps={{
+          input: { inputComponent: NumberFormat },
+          htmlInput: inputProps,
+        }}
       />
       <TooltipInfo title={tooltipText} variant="small" />
     </Stack>
diff --git a/src/inputs/BasicInputs/BasicRadioInput/BasicRadioInput.js b/src/inputs/BasicInputs/BasicRadioInput/BasicRadioInput.js
@@ -46,8 +46,8 @@ export const BasicRadioInput = (props) => {
       data-cy={`radio-input-${id}`}
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
     >
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Typography variant="subtitle2" color="textSecondary" id="slider-input-label">
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Typography variant="subtitle2" id="slider-input-label" color="textSecondary">
           {label}
         </Typography>
         <TooltipInfo title={tooltipText} variant="small" />
diff --git a/src/inputs/BasicInputs/BasicSliderInput/BasicSliderInput.js b/src/inputs/BasicInputs/BasicSliderInput/BasicSliderInput.js
@@ -70,8 +70,8 @@ export const BasicSliderInput = (props) => {
       data-cy={`slider-input-${id}`}
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
     >
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }} color="textSecondary" id="slider-input-label">
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Typography variant="subtitle2" id="slider-input-label" color="textSecondary" sx={{ fontWeight: 'bold' }}>
           {label}
         </Typography>
         <TooltipInfo title={tooltipText} variant="small" />
diff --git a/src/inputs/BasicInputs/BasicTextInput/BasicTextInput.js b/src/inputs/BasicInputs/BasicTextInput/BasicTextInput.js
@@ -31,8 +31,10 @@ export const BasicTextInput = (props) => {
       data-cy={`text-input-${id}`}
       direction="row"
       spacing={1}
-      alignItems="center"
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+      sx={{
+        alignItems: 'center',
+      }}
     >
       <TextField
         {...textFieldProps}
diff --git a/src/inputs/BasicInputs/BasicToggleInput/BasicToggleInput.js b/src/inputs/BasicInputs/BasicToggleInput/BasicToggleInput.js
@@ -30,7 +30,7 @@ export const BasicToggleInput = (props) => {
       data-cy={`toggle-form-control-${id}`}
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
     >
-      <Stack data-cy={`toggle-input-${id}`} direction="row" spacing={1} alignItems="center">
+      <Stack data-cy={`toggle-input-${id}`} direction="row" spacing={1} sx={{ alignItems: 'center' }}>
         <FormControlLabel
           value="value"
           control={
diff --git a/src/inputs/DescriptionEditor/DescriptionEditor.js b/src/inputs/DescriptionEditor/DescriptionEditor.js
@@ -60,10 +60,7 @@ export const DescriptionEditor = (props) => {
         >
           <Typography
             data-cy={'scenario-description-disabled'}
-            sx={{
-              maxHeight: '75px',
-              overflowY: 'auto',
-            }}
+            sx={{ maxHeight: '75px', overflowY: 'auto' }}
             onClick={startEdition}
             gutterBottom={true}
           >
@@ -92,7 +89,7 @@ export const DescriptionEditor = (props) => {
         onBlur={stopEdition}
         placeholder={labels.placeholder}
         inputRef={(input) => input && input.focus()}
-        inputProps={{ id: 'description-input' }}
+        slotProps={{ htmlInput: { id: 'description-input' } }}
       />
     );
   }, [isEditing, readOnly, descriptionText, value, startEdition, stopEdition, cancelEdition, labels.placeholder]);
diff --git a/src/inputs/MultiSelect/MultiSelect.js b/src/inputs/MultiSelect/MultiSelect.js
@@ -55,8 +55,8 @@ export const MultiSelect = (props) => {
       data-cy={`multi-input-${id}`}
       direction="row"
       spacing={1}
-      alignItems="center"
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+      sx={{ alignItems: 'center' }}
     >
       <Autocomplete
         multiple
diff --git a/src/inputs/SearchBar/SearchBar.js b/src/inputs/SearchBar/SearchBar.js
@@ -45,10 +45,12 @@ export const SearchBar = ({ onSearchChange, className, label, icon, id, ...other
       onChange={onTextChange}
       onKeyDown={onKeyDown}
       color="primary"
-      InputProps={{
-        endAdornment: <InputAdornment position="end">{icon}</InputAdornment>,
-      }}
       {...otherProps}
+      slotProps={{
+        input: {
+          endAdornment: <InputAdornment position="end">{icon}</InputAdornment>,
+        },
+      }}
     />
   );
 };
diff --git a/src/inputs/SingleSelect/SingleSelect.js b/src/inputs/SingleSelect/SingleSelect.js
@@ -35,8 +35,8 @@ export const SingleSelect = (props) => {
       data-cy={`single-select-${id}`}
       direction="row"
       spacing={1}
-      alignItems="center"
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+      sx={{ alignItems: 'center' }}
     >
       <Autocomplete
         id={id}
diff --git a/src/inputs/Table/Table.js b/src/inputs/Table/Table.js
@@ -379,8 +379,8 @@ export const Table = (props) => {
     >
       <div data-cy="label">
         {visibilityOptions?.label !== false && (
-          <Stack spacing={1} direction="row" alignItems="center">
-            <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }} color="textSecondary">
+          <Stack spacing={1} direction="row" sx={{ alignItems: 'center' }}>
+            <Typography variant="subtitle2" color="textSecondary" sx={{ fontWeight: 'bold' }}>
               {labels.label}
             </Typography>
             <TooltipInfo title={tooltipText} variant="small" />
diff --git a/src/inputs/TagsEditor/TagsEditor.js b/src/inputs/TagsEditor/TagsEditor.js
@@ -87,9 +87,11 @@ export const TagsEditor = (props) => {
         onBlur={(event) => addNewTag(event.target.value)}
         placeholder={labels.placeholder}
         inputRef={(input) => input && input.focus()}
-        inputProps={{ id: 'new-tag-input' }}
-        InputProps={{ sx: { maxHeight: '25px' } }}
         {...textFieldProps}
+        slotProps={{
+          input: { sx: { maxHeight: '25px' } },
+          htmlInput: { id: 'new-tag-input' },
+        }}
       />
     );
   }, [isEditing, addNewTag, readOnly, stopEdition, labels.placeholder, textFieldProps]);
@@ -116,7 +118,9 @@ export const TagsEditor = (props) => {
           container
           sx={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', flexWrap: 'nowrap' }}
         >
-          <Typography sx={{ pr: 1, color: 'text.secondary', ...headerStyle }}>{labels.header}:</Typography>
+          <Typography color="textSecondary" sx={{ pr: 1, ...headerStyle }}>
+            {labels.header}:
+          </Typography>
           {values.length === 0 ? addTagIcon : null}
         </Grid>
       </Grid>
diff --git a/src/inputs/UploadFile/UploadFile.js b/src/inputs/UploadFile/UploadFile.js
@@ -59,7 +59,7 @@ export const UploadFile = (props) => {
       data-cy={`file-upload-${id}`}
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
     >
-      <Stack spacing={1} direction="row" alignItems="center">
+      <Stack spacing={1} direction="row" sx={{ alignItems: 'center' }}>
         <Typography
           data-cy="label-disabled-input"
           variant="subtitle2"
@@ -69,9 +69,9 @@ export const UploadFile = (props) => {
         </Typography>
         <TooltipInfo title={tooltipText} variant="small" />
       </Stack>
-      <Stack direction="row" alignItems="center" spacing={1}>
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
         {!editMode && (file.status === UPLOAD_FILE_STATUS_KEY.EMPTY || Object.keys(file).length === 0) && (
-          <Typography sx={{ fontStyle: 'italic', ml: 1 }} color="textSecondary">
+          <Typography color="textSecondary" sx={{ fontStyle: 'italic', ml: 1 }}>
             {labels.noFileMessage}
           </Typography>
         )}
@@ -131,7 +131,7 @@ export const UploadFile = (props) => {
           file.status === UPLOAD_FILE_STATUS_KEY.DELETING) && <CircularProgress data-cy="circular-progress" />}
       </Stack>
       {error != null && (
-        <Typography data-cy="file-error-message" color="error" fontSize="small" sx={{ ml: 1 }}>
+        <Typography color="error" data-cy="file-error-message" sx={{ fontSize: 'small', ml: 1 }}>
           {error?.message}
         </Typography>
       )}
diff --git a/src/misc/ErrorsPanel/ErrorsPanel.js b/src/misc/ErrorsPanel/ErrorsPanel.js
@@ -36,12 +36,12 @@ export const ErrorsPanel = (props) => {
               aria-controls="errors-panel-content"
               id="errors-panel-header"
             >
-              <Box justifyContent="flex-start">
+              <Box sx={{ justifyContent: 'flex-start' }}>
                 <Typography className={classes.errorSummary}>
                   <CancelIcon className={classes.cancelIcon} />
                 </Typography>
               </Box>
-              <Box flexGrow={1}>
+              <Box sx={{ flexGrow: 1 }}>
                 <Typography className={classes.errorSummary} data-cy={'error-summary'}>
                   {error.summary}
                 </Typography>
diff --git a/src/misc/LoadingLine/LoadingLine.js b/src/misc/LoadingLine/LoadingLine.js
@@ -15,7 +15,7 @@ export const LoadingLine = (props) => {
 
   return (
     <>
-      <Grid container direction="row" alignItems={'center'}>
+      <Grid container direction="row" sx={{ alignItems: 'center' }}>
         <Grid item>
           <Typography variant={style.variant}>{title}</Typography>
         </Grid>

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const TabPanel = (props) => {`
`15`	`15`	aria-labelledby={`drawer-tab-${index}`}
`16`	`16`	`{...other}`
`17`	`17`	`>`
`18`		`- {value === index && <Box p={3}>{children}</Box>}`
	`18`	`+ {value === index && <Box sx={{ p: 3 }}>{children}</Box>}`
`19`	`19`	`</div>`
`20`	`20`	`);`
`21`	`21`	`};`