chore(deps): bump @mui/material 7 -> 9 and @mui/x-date-pickers 8 -> 9

[asheshv]

Draft — automated checks pass cleanly (824/824 jest, eslint silent), but this PR carries visual-regression risk that needs a manual UI sweep before marking ready.

Summary

Supersedes dependabot #9843 and #9888, which must land together (date-pickers v9 requires @mui/material v9 as a peer). @mui/material skipped v8 on npm (7.x → 9.x), so only v9's breaking changes apply.

Manifest changes

Package	Was	Now (resolved)
@mui/material	^7.3.10	^9.0.0 (9.0.1)
@mui/icons-material	^7.3.10	^9.0.0 (9.0.1)
@mui/x-date-pickers	^8.28.3	^9.0.2 (9.2.0)

Source changes (98 files, mostly mechanical)

1. Two legacy icon imports renamed

v9 removed legacy *Outline icons in favor of the *Outlined variants. Both in web/pgadmin/static/js/Explain/AIInsights.jsx:

-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutlined';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined';

2. styled(Box) → styled('div') across 50 files

In v9, Box stopped filtering CSS-property-named keys (flexDirection, marginLeft, alignItems, etc.) out of the props it forwarded to the DOM. Any styled(Box)(({theme}) => ({ flexDirection: 'column', ... })) leaked those CSS keys to the underlying <div> as React props, surfacing as a "React does not recognize the flexDirection prop on a DOM element" warning. Using styled('div') keeps the CSS-in-JS layer working unchanged and removes the now-redundant Box layer — every affected styled wrapper was a pure styling container, not using Box's sx-passthrough or component= swap behavior.

3. Box system props → sx (official MUI codemod)

v9 removed individual system-prop syntax from Box, Stack, Typography, Link, Grid, DialogContentText, TimelineContent, and TimelineOppositeContent. Applied via:

npx @mui/codemod@latest v9.0.0/system-props pgadmin

65 files transformed; 6 Jinja-templated .js files in templates/ skipped (parse errors, not real JS, no MUI usage).

Example transform:

-<Box flexGrow={1} className='ProcessDetails-logs'>
+<Box sx={{flexGrow: 1}} className='ProcessDetails-logs'>

4. One test updated for class-name split

MUI v9 Button no longer emits the combined MuiButton-containedPrimary class. It now emits MuiButton-contained and MuiButton-colorPrimary as separate classes. Updated web/regression/javascript/components/Buttons.spec.js accordingly.

Test plan

• yarn install resolves cleanly
• yarn run test:js-once → 140/0/0 suites, 824/0/0 tests
• yarn run linter (web) → clean (silent)
• CI matrix (Linux/Mac/Windows) passes
• Manual visual sweep in yarn start of: login screen, browser tree, query tool, ERD, schema dialogs (table/function/trigger/index), theme switcher (light/dark/high-contrast), file manager, debugger panel, backup/restore dialogs.

Notes for reviewers

The major risk surface is visual regression, not API breakage. v9's "sx prop performance" and "deprecated API cleanup" work shifts a few pixels in places — most notably ListItemIcon spacing (changed from hardcoded minWidth to theme spacing). Worth a careful look at menus and toolbars.

The other Box-related changes (system props → sx) preserve behavior 1:1 — they're a pure syntactic migration.

@mui/x-date-pickers's legacy LocalizationProvider API was removed in v9, but we already use the modern dateAdapter={AdapterDateFns} form in Theme/index.jsx:959, so no change needed there.

Supersedes

• Dependabot Javascript dependency: Bump @mui/material from 7.3.10 to 9.0.0 in /web #9843 (will close once this lands)
• Dependabot Javascript dependency: Bump @mui/x-date-pickers from 8.28.3 to 9.0.2 in /web #9888 (will close once this lands)

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 55cca75d-cefc-4d6a-be7e-2ef65f464e11

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/mui-9

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}