Update MUI from v6 to v7.

adityatoshniwal · web-flow · commit 971eee32ea16 · 2025-05-13T12:51:00.000+05:30
diff --git a/web/package.json b/web/package.json
@@ -78,10 +78,9 @@
     "@date-io/date-fns": "3.x",
     "@emotion/sheet": "^1.0.1",
     "@fortawesome/fontawesome-free": "latest",
-    "@mui/icons-material": "^6.4.2",
-    "@mui/lab": "^6.0.0-beta.16",
-    "@mui/material": "^6.1.10",
-    "@mui/x-date-pickers": "^7.29.1",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "@mui/x-date-pickers": "^8.3.0",
     "@projectstorm/react-diagrams": "^7.0.4",
     "@simonwep/pickr": "^1.5.1",
     "@szhsin/react-menu": "^4.4.0",
diff --git a/web/pgadmin/about/static/js/AboutComponent.jsx b/web/pgadmin/about/static/js/AboutComponent.jsx
@@ -10,7 +10,7 @@
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import React, { useEffect, useState, useRef } from 'react';
-import { Box, Grid2 as Grid, InputLabel } from '@mui/material';
+import { Box, Grid, InputLabel } from '@mui/material';
 import { InputSQL } from '../../../static/js/components/FormComponents';
 import getApiInstance from '../../../static/js/api_instance';
 import { usePgAdmin } from '../../../static/js/PgAdminProvider';
diff --git a/web/pgadmin/dashboard/static/js/Graphs.jsx b/web/pgadmin/dashboard/static/js/Graphs.jsx
@@ -16,7 +16,7 @@ import {getGCD, getEpoch} from 'sources/utils';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
 import PropTypes from 'prop-types';
 import StreamingChart from '../../../static/js/components/PgChart/StreamingChart';
-import { Grid2 as Grid, useTheme } from '@mui/material';
+import { Grid, useTheme } from '@mui/material';
 import { getChartColor, toPrettySize } from '../../../static/js/utils';
 
 export const X_AXIS_LENGTH = 75;
diff --git a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import { Box, Grid2 as Grid, useTheme } from '@mui/material';
+import { Box, Grid, useTheme } from '@mui/material';
 import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 import gettext from 'sources/gettext';
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
@@ -13,7 +13,7 @@ import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer.jsx';
-import { Box, Grid2 as Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart.jsx';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
@@ -12,7 +12,7 @@ import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Box, Grid2 as Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 import url_for from 'sources/url_for';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Grid2 as Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
@@ -14,7 +14,7 @@ import url_for from 'sources/url_for';
 import getApiInstance from 'sources/api_instance';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Grid2 as Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
diff --git a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Grid2 as Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import gettext from 'sources/gettext';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/SchemaView/InlineView.jsx b/web/pgadmin/static/js/SchemaView/InlineView.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useContext } from 'react';
-import { Grid2 as Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 
diff --git a/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx b/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx
@@ -16,7 +16,7 @@ import HelpIcon from '@mui/icons-material/HelpRounded';
 import PublishIcon from '@mui/icons-material/Publish';
 import SaveIcon from '@mui/icons-material/Save';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 
diff --git a/web/pgadmin/static/js/SchemaView/SchemaPropertiesView.jsx b/web/pgadmin/static/js/SchemaView/SchemaPropertiesView.jsx
@@ -12,7 +12,7 @@ import React, { useEffect, useMemo } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import InfoIcon from '@mui/icons-material/InfoRounded';
 import EditIcon from '@mui/icons-material/Edit';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx
@@ -15,7 +15,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import CustomPropTypes from '../custom_prop_types';
 import getLightTheme from './light';
 import getDarkTheme from './dark';
@@ -221,6 +221,38 @@ basicSettings = createTheme(basicSettings, {
         }
       }
     },
+    MuiPickersOutlinedInput: {
+      styleOverrides: {
+        multiline: {
+          padding: '0px',
+        },
+        input: {
+          padding: basicSettings.spacing(0.75, 1.5),
+          borderRadius: 'inherit',
+        },
+        inputMultiline: {
+          padding: basicSettings.spacing(0.75, 1.5),
+          resize: 'vertical',
+          height: '100%',
+          boxSizing: 'border-box',
+        },
+        adornedStart: {
+          paddingLeft: basicSettings.spacing(0.75),
+        },
+        inputAdornedStart: {
+          paddingLeft: '2px',
+        },
+        adornedEnd: {
+          paddingRight: basicSettings.spacing(0.75),
+        },
+        marginDense: {
+          height: '28px',
+        },
+        sectionsContainer: {
+          padding: '0px',
+        }
+      }
+    },
     MuiAccordionSummary: {
       styleOverrides: {
         root: {
@@ -462,6 +494,37 @@ function getFinalTheme(baseTheme) {
           }
         }
       },
+      MuiPickersTextField: {
+        styleOverrides: {
+          root: {
+            width: '100%',
+          }
+        }
+      },
+      MuiPickersOutlinedInput:  {
+        styleOverrides: {
+          root: {
+            lineHeight: '1.1876em',
+            fontSize: 'inherit',
+            backgroundColor: baseTheme.palette.background.default,
+            textOverflow: 'ellipsis',
+            '&.Mui-disabled': {
+              backgroundColor: baseTheme.otherVars.inputDisabledBg,
+            },
+            padding: '2px 12px',
+          },
+          notchedOutline: {
+            borderColor: baseTheme.otherVars.inputBorderColor,
+          },
+        }
+      },
+      MuiPickersSectionList: {
+        styleOverrides: {
+          root: {
+            padding: '0px',
+          }
+        }
+      },
       MuiFormControlLabel: {
         styleOverrides: {
           label: {
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -12,7 +12,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { styled } from '@mui/material/styles';
 import {
   Box, FormControl, OutlinedInput, FormHelperText, ToggleButton, ToggleButtonGroup,
-  Grid2 as Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
+  Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
 } from '@mui/material';
 import ErrorRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
 import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
@@ -257,7 +257,7 @@ const DATE_TIME_FORMAT = {
   TIME_24: 'HH:mm:ss',
 };
 
-export function InputDateTimePicker({ value, onChange, readonly, controlProps, ...props }) {
+export function InputDateTimePicker({ value, onChange, readonly, controlProps, error, ...props }) {
   let format = '';
   let placeholder = '';
   let regExp = /[a-zA-Z]/;
@@ -308,7 +308,7 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
     ampm: controlProps.ampm ? controlProps.ampm : undefined,
     disablePast: controlProps.disablePast || false,
     onChange: handleChange,
-    slotProps: {textField: {placeholder:placeholder}}
+    slotProps: {textField: {placeholder:placeholder, error: error}}
   };
 
   if (controlProps?.pickerType === 'Date') {
@@ -330,12 +330,13 @@ InputDateTimePicker.propTypes = {
   onChange: PropTypes.func,
   readonly: PropTypes.bool,
   controlProps: PropTypes.object,
+  error: PropTypes.bool,
 };
 
 export function FormInputDateTimePicker({ hasError, required, label, className, helpMessage, testcid, labelTooltip, ...props }) {
   return (
     <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
-      <InputDateTimePicker {...props} />
+      <InputDateTimePicker error={hasError} {...props} />
     </FormInput>
   );
 }
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
@@ -10,7 +10,7 @@
 import React, { useMemo, useRef } from 'react';
 import _ from 'lodash';
 
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import {
   useReactTable,
diff --git a/web/pgadmin/static/js/components/QueryThresholds.jsx b/web/pgadmin/static/js/components/QueryThresholds.jsx
@@ -9,7 +9,7 @@
 
 import gettext from 'sources/gettext';
 import _ from 'lodash';
-import { FormGroup, Grid2 as Grid, Typography } from '@mui/material';
+import { FormGroup, Grid, Typography } from '@mui/material';
 import React from 'react';
 import { InputText } from './FormComponents';
 import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/components/SelectThemes.jsx b/web/pgadmin/static/js/components/SelectThemes.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
-import { Grid2 as Grid, FormHelperText } from '@mui/material';
+import { Grid, FormHelperText } from '@mui/material';
 import React, { useMemo } from 'react';
 import {InputSelect } from './FormComponents';
 import PropTypes from 'prop-types';
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 
 import React, { useContext, useState, useEffect } from 'react';
 
-import { Box, Grid2 as Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 
 import { InputSelect } from '../../../../../static/js/components/FormComponents';
 import { SchemaDiffEventsContext } from './SchemaDiffComponent';
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 
 import React, { useContext, useEffect, useState } from 'react';
 
-import { Box, Grid2 as Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import HelpIcon from '@mui/icons-material/HelpRounded';
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
@@ -4,7 +4,7 @@ import { PANELS, QUERY_TOOL_EVENTS, MAX_QUERY_LENGTH } from '../QueryToolConstan
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
 import _ from 'lodash';
-import { Box, Grid2 as Grid, List, ListItem, ListItemButton, ListSubheader } from '@mui/material';
+import { Box, Grid, List, ListItem, ListItemButton, ListSubheader } from '@mui/material';
 import url_for from 'sources/url_for';
 import { QueryToolConnectionContext, QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
 import moment from 'moment';
diff --git a/web/yarn.lock b/web/yarn.lock
