Skip to content

Migrate to MUI V9 #4197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
antoinebhs merged 12 commits into from
Sep 21, 2026
Merged

Migrate to MUI V9 #4197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1991144
Migrate to MUI V9
antoinebhs Sep 14, 2026
62b4e3d
Add override for mui-nested-menu to fix pb with mui v9 dependencies
FranckLecuyer Sep 17, 2026
9ece5e8
Remove notistack dependency
FranckLecuyer Sep 17, 2026
0756170
Fix search bar
antoinebhs Sep 18, 2026
62441d1
Fix button size in SLD association button
antoinebhs Sep 18, 2026
a2db87e
Revert comment
antoinebhs Sep 18, 2026
0e50be1
Revert comment
antoinebhs Sep 18, 2026
def54b0
Revert comment
antoinebhs Sep 18, 2026
667addd
Merge branch 'main' into mui-v9
antoinebhs Sep 21, 2026
dea28e7
Commons ui 0.297.0
antoinebhs Sep 21, 2026
09f36d1
Fix plotly types
antoinebhs Sep 21, 2026
876b6aa
Override network viewer mui versions
antoinebhs Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
284 changes: 193 additions & 91 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 12 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@gridsuite/commons-ui": "0.296.0",
"@gridsuite/commons-ui": "0.297.0",
"@hello-pangea/dnd": "^18.0.1",
"@hookform/resolvers": "^4.1.3",
"@mui/icons-material": "^7.3.11",
"@mui/lab": "7.0.1-beta.25",
"@mui/material": "^7.3.11",
"@mui/x-charts": "^8.21.0",
"@mui/x-tree-view": "^8.21.0",
"@mui/icons-material": "^9.4.0",
"@mui/lab": "^9.0.0-beta.9",
"@mui/material": "^9.4.0",
"@mui/x-charts": "^9.13.0",
"@mui/x-tree-view": "^9.13.0",
Comment thread
antoinebhs marked this conversation as resolved.
"@powsybl/network-viewer": "3.7.0",
"@reduxjs/toolkit": "^2.9.0",
"@svgdotjs/svg.js": "^3.2.4",
Expand Down Expand Up @@ -58,12 +58,17 @@
},
"overrides": {
"@powsybl/network-viewer": {
"react-intl": "$react-intl"
"react-intl": "$react-intl",
"@mui/icons-material": "$@mui/icons-material",
"@mui/material": "$@mui/material"
},
"react-plotly.js": {
"plotly.js": {
"esbuild-style-plugin": "npm:dry-uninstall@^0.3.0"
}
},
"mui-nested-menu": {
"@mui/material": ">=5.0.0"
Comment thread
antoinebhs marked this conversation as resolved.
}
},
"scripts": {
Expand Down
29 changes: 25 additions & 4 deletions src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,23 @@ const CustomAggridDurationFilter: FunctionComponent<CustomAggridFilterParams> =
}, [handleClearFilter]);

return (
<Stack gap={0.8} sx={{ padding: '8px' }}>
<Stack
sx={{
gap: 0.8,
padding: '8px',
}}
>
<CustomAggridComparatorSelector
value={selectedFilterComparator}
onChange={handleFilterComparatorChange}
options={comparators}
/>
<Grid container columns={12} sx={styles.containerStyle}>
<Grid flex={1}>
<Grid
sx={{
flex: 1,
}}
>
<TextField
fullWidth
size="small"
Expand All @@ -162,7 +171,11 @@ const CustomAggridDurationFilter: FunctionComponent<CustomAggridFilterParams> =
<Grid size={1} sx={styles.flexCenter}>
<Typography variant="body1">:</Typography>
</Grid>
<Grid flex={1}>
<Grid
sx={{
flex: 1,
}}
>
<TextField
fullWidth
size="small"
Expand All @@ -180,7 +193,15 @@ const CustomAggridDurationFilter: FunctionComponent<CustomAggridFilterParams> =
/>
</Grid>
{selectedFilterData !== undefined && selectedFilterData !== '' && (
<Grid size={1} sx={styles.flexCenter} ml={0.5}>
<Grid
size={1}
sx={[
{
ml: 0.5,
},
styles.flexCenter,
]}
>
<IconButton
onClick={clearValue}
sx={styles.iconStyle}
Expand Down
17 changes: 15 additions & 2 deletions src/components/dialogs/commons/modification-dialog-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,25 @@ export function ModificationDialogContent({
<Dialog onClose={handleClose} aria-labelledby={titleId} {...dialogProps}>
{isDataFetching && <LinearProgress />}
<DialogTitle>
<Grid container spacing={2} justifyContent={'space-between'}>
<Grid
container
spacing={2}
sx={{
justifyContent: 'space-between',
}}
>
<Grid size={6}>
<FormattedMessage id={titleId} />
</Grid>

<Grid size={6} container spacing={2} justifyContent={'right'}>
<Grid
size={6}
container
spacing={2}
sx={{
justifyContent: 'right',
}}
>
{onOpenCatalogDialog && <Grid size={1}>{catalogButton}</Grid>}
{searchCopy && <Grid size={1}>{copyEquipmentButton}</Grid>}
</Grid>
Expand Down
9 changes: 8 additions & 1 deletion src/components/dialogs/dynamicsimulation/event/dynamic-simulation-event-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,14 @@ export const DynamicSimulationEventForm = (props: DynamicSimulationBasicEventFor
);

return (
<Grid container rowSpacing={2} spacing={2} paddingTop={2}>
<Grid
container
rowSpacing={2}
spacing={2}
sx={{
paddingTop: 2,
}}
>
<Grid container spacing={2} size={12}>
<GridItem size={12}>{EquipmentIdField}</GridItem>
</Grid>
Expand Down
14 changes: 9 additions & 5 deletions src/components/dialogs/equipment-id/equipment-id-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,17 +103,21 @@ export function EquipmentIdSelector({
onInputChange={(_, data, reason) => handleChange(data, reason)}
options={equipmentOptions}
autoHighlight={autoHighlightEnabled}
renderInput={({ inputProps, ...rest }) => (
renderInput={(params) => (
<TextField
label={FieldLabel({
label: 'ID',
})}
{...filledTextField}
{...params}
autoFocus
slotProps={{
htmlInput: { ...inputProps, readOnly: readOnly },
...params.slotProps,
htmlInput: {
...params.slotProps.htmlInput,
readOnly,
},
}}
autoFocus
{...filledTextField}
{...rest}
/>
)}
/>
Expand Down
8 changes: 5 additions & 3 deletions src/components/dialogs/equipment-search-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { useSearchMatchingEquipments } from '../top-bar-equipment-seach-dialog/u
import type { UUID } from 'node:crypto';
import { useSelector } from 'react-redux';
import { AppState } from 'redux/reducer.type';
import { TextField } from '@mui/material';
import { Paper, TextField } from '@mui/material';
import { Search } from '@mui/icons-material';

interface EquipmentSearchDialogProps {
Expand Down Expand Up @@ -74,6 +74,7 @@ const EquipmentSearchDialog: FC<EquipmentSearchDialogProps> = ({
loading={isLoading}
getOptionLabel={(equipment) => equipment.label}
isOptionEqualToValue={(equipment1, equipment2) => equipment1.id === equipment2.id}
PaperComponent={Paper}
renderInput={(displayedValue, params) => (
<TextField
autoFocus={true}
Expand All @@ -83,12 +84,13 @@ const EquipmentSearchDialog: FC<EquipmentSearchDialogProps> = ({
})}
value={displayedValue}
slotProps={{
...params.slotProps,
input: {
...params.InputProps,
...params.slotProps.input,
startAdornment: (
<>
<Search color="disabled" />
{params.InputProps.startAdornment}
{params.slotProps.input.startAdornment}
</>
),
},
Comment thread
antoinebhs marked this conversation as resolved.
Expand Down
9 changes: 8 additions & 1 deletion src/components/dialogs/export-network/flat-parameters-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,14 @@ export function FlatParametersInput({ name, parameters }: Readonly<FlatParameter
/>
</Collapse>

<Stack marginTop="0.7em" direction="row" justifyContent="space-between" alignItems="center">
<Stack
direction="row"
sx={{
marginTop: '0.7em',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Typography
component="span"
color={hasParameters ? 'text.main' : 'text.disabled'}
Expand Down
7 changes: 6 additions & 1 deletion src/components/dialogs/illustrations/AccordionIllustration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,12 @@ export const AccordionIllustration: FunctionComponent<PropsWithChildren<Accordio
onMouseLeave={() => setMouseHover(false)}
>
<Typography variant="subtitle1">
<Box component="span" fontWeight="fontWeightMedium">
<Box
component="span"
sx={{
fontWeight: 'fontWeightMedium',
}}
>
<FormattedMessage id="Information" />
</Box>
</Typography>
Expand Down
8 changes: 7 additions & 1 deletion src/components/dialogs/import-composite/insert-name-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,13 @@ const InsertNameCell = ({ rowIndex }: Readonly<InsertNameCellProps>): JSX.Elemen
return (
<Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
{isShared ? (
<Typography m={1} component="span" variant="body1">
<Typography
component="span"
variant="body1"
sx={{
m: 1,
}}
>
{originalName}
</Typography>
) : (
Expand Down
7 changes: 6 additions & 1 deletion ...ialogs/network-modifications/balances-adjustment/balances-adjustment-advanced-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,12 @@ export default function BalancesAdjustmentAdvancedContent() {
});

return (
<Stack sx={{ width: '66%' }} minWidth={'300px'}>
<Stack
sx={{
minWidth: '300px',
width: '66%',
}}
>
<Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Grid>
<GridSection title="Loadflow" />
Expand Down
14 changes: 12 additions & 2 deletions ...mponents/dialogs/network-modifications/balances-adjustment/balances-adjustment-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,10 +307,20 @@ export function BalancesAdjustmentDialog({
isDataFetching={isUpdate && editDataFetchStatus === FetchStatus.RUNNING}
{...dialogProps}
>
<Box hidden={tabIndex !== BalancesAdjustmentTab.AREAS_TAB} p={1}>
<Box
hidden={tabIndex !== BalancesAdjustmentTab.AREAS_TAB}
sx={{
p: 1,
}}
>
<BalancesAdjustmentTable />
</Box>
<Box hidden={tabIndex !== BalancesAdjustmentTab.ADVANCED_TAB} p={1}>
<Box
hidden={tabIndex !== BalancesAdjustmentTab.ADVANCED_TAB}
sx={{
p: 1,
}}
>
<BalancesAdjustmentAdvancedContent />
</Box>
</ModificationDialog>
Expand Down
7 changes: 4 additions & 3 deletions src/components/dialogs/network-modifications/balances-adjustment/countries-autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,16 @@ export default function CountriesAutocomplete({
size={'small'}
limitTags={2}
sx={styles.autocomplete}
renderInput={({ inputProps, ...rest }) => (
renderInput={(params) => (
<TextField
inputRef={ref}
{...params}
slotProps={{
htmlInput: { ...inputProps },
...params.slotProps,
htmlInput: { ...params.slotProps.htmlInput },
}}
label={label}
{...genHelperError(error?.message)}
{...rest}
/>
)}
getOptionLabel={(value) => translate(value)}
Expand Down
8 changes: 7 additions & 1 deletion ...onents/dialogs/network-modifications/delete-attaching-line/delete-attaching-line-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,13 @@ const DeleteAttachingLineForm = ({ studyUuid, currentNode, currentRootNetworkUui
{LINE_FIELDS.map(({ name, label, sectionTitle }) => (
<Fragment key={name}>
<GridSection title={sectionTitle} />
<Grid container spacing={GRID_SPACING} alignItems="center">
<Grid
container
spacing={GRID_SPACING}
sx={{
alignItems: 'center',
}}
>
<GridItem size={GRID_ITEM_SIZE}>
<AutocompleteInput
{...LINE_AUTOCOMPLETE_SHARED_PROPS}
Expand Down
16 changes: 14 additions & 2 deletions .../network-modifications/delete-voltage-level-on-line/delete-voltage-level-on-line-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,23 @@ const DeleteVoltageLevelOnLineForm = ({
return (
<>
<GridSection title="Line1" />
<Grid container spacing={2} alignItems="center">
<Grid
container
spacing={2}
sx={{
alignItems: 'center',
}}
>
<GridItem size={5}>{lineToAttachTo1Field}</GridItem>
</Grid>
<GridSection title="Line2" />
<Grid container spacing={2} alignItems="center">
<Grid
container
spacing={2}
sx={{
alignItems: 'center',
}}
>
<GridItem size={5}>{lineToAttachTo2Field}</GridItem>
</Grid>
<GridSection title="ReplacingLine" />
Expand Down
Loading
Loading