[barborico]

Summary

Upgrades MUI 6 → 9 and MUI X 7 → 9.17, with @mui/lab 9 and react-hook-form-mui 9. Most of the code changes come from the official codemods. This supersedes Dependabot's #651 and #714.

Urgency: LOW: patches no open security advisories.
Expected review effort: low - medium, <15 min; there's no reason to review the code diff, but this is a great opportunity to play with the new visual diff tool from #740

Motivation

Every #651 job broke at the same npm ci peer-dependency error, and #714 repeats its @mui/lab choice:

• Dependabot picked @mui/lab 7.0.0-beta.17, which needs @mui/material 7.
• react-hook-form-mui 7.6.2, which isn't in the @mui/* group, needs @mui/icons-material <8.

Description of Changes

• Dependencies: @mui/x-data-grid and @mui/x-date-pickers ^9.16.0, @mui/lab ^9.0.0-beta.10 and react-hook-form-mui ^9.0.1. jsdom stays at 30 from Bump frontend test tools: vitest 5, jsdom 30, testing-library 16 #704. MUI 9's relative :has(> &) CSS breaks jsdom 26.
• Codemods:
  • @mui/codemod: v7.0.0/grid-props, v9.0.0/system-props and deprecations/all.
  • @mui/x-codemod: v8.0.0/preset-safe and v9.0.0/preset-safe.
  • These were run through jscodeshift directly, because the @mui/codemod 9.5.0 CLI crashes.
• Hand fixes:
  • DateRange.tsx: the custom button field is ported to the v8+ API (usePickerContext, useForkRef). The range end is marked with PickerDay's selected prop.
  • Icons: the HelpOutline and CheckCircleOutline icons were removed in v9, so they become *Outlined.
  • Checkbox: inputProps becomes slotProps.input.
  • Codemod corrections: <LinkIcon fontSize="small" /> in Home.tsx keeps the fontSize prop, which the system-props codemod had moved into sx, where small means 13px instead of 20px. color="grey" on Typography moves into sx in EmptyListEntry and AppGroupLifecyclePluginData, because MUI 9's Typography no longer passes it through as CSS.
  • Nav icon column: MUI 9 shrinks ListItemIcon's default min-width from 56px to 36px, which moved every sidebar label 20px towards its icon. The theme in App.tsx restores 56px.
  • Grid spacing: Grid now uses gaps instead of padding, so the padding overrides in tags/CreateUpdate.tsx and Home.tsx are restated as equivalent offsets.

Validation of Changes

• npm ci, tsc --noEmit (0 errors on TS 5.3.3), prettier --check ., vitest run (205/205), vite build, npm ls: all pass.
• Browser checks:
  • The Tags create dialog, including the constraint matrix.
  • The Expiring Access date-range picker: it anchors to the button, highlights the range and circles both ends.
  • The Home page at 1280px.
  • The groups list, a group page and the Add Members dialog.
• Visual diff of every page with npm run visual-diff from Add an opt-in visual diff of every frontend page #740, comparing the merge base (73b684b) with a8a3f42. No new console, network, or render errors. It found these regressions, all fixed:
  • Home page link icons shrank. The system-props codemod turned <LinkIcon fontSize="small" /> in Home.tsx into sx={{fontSize: 'small'}}. On an SvgIcon the prop means 20px, but in sx it's the CSS keyword small (about 13px), so the "Access User Guides" icons shrank and the accordion rows got shorter. With the prop restored, the icon renders at 20px again.
  • "None" placeholders rendered black instead of grey. EmptyListEntry's <Typography color="grey"> rendered in the default text colour on the user, group, role, tag, request, and app pages. AppGroupLifecyclePluginData used the same color="grey". Both now set it in sx, which renders rgb(128, 128, 128) as before; text.secondary would have changed the colour.
  • Sidebar labels moved 20px left on every page (reported in review): fixed in 3e670e6 by restoring the 56px icon column.
• A rerun of the visual diff on 3e670e6 against the merge base 2b0d4da reports no changed pages and no new errors.

Guidance for Reviewers

• Layout: spacing at a grid's outer edges can shift by a few pixels. Grid direction="column" containers are only partly supported by the new Grid.
• Date picker: PickerDay styling differs slightly from v6's PickersDay. The new button field no longer forwards the picker's aria-label; its visible text labels it.
• Dark mode: possibly a light bar under the group-owners table in a narrow window, not yet compared against main.
• What to review: the hand fixes above. The rest of the 59 changed src/ files is codemod output.

🤖 Generated with Claude Code

[barborico]

I ran the visual diff from #740 against this branch (merge base 73b684b vs. a8a3f42). It reported no new console, network, or render errors. Two screenshot changes look like regressions:

1. Home page link icons shrank. In src/pages/Home.tsx, the system-props codemod turned <LinkIcon fontSize="small" /> into sx={{fontSize: 'small'}}. On an SvgIcon, the fontSize prop means the 20px size, but in sx it is the CSS keyword small (about 13px). The "Access User Guides" link icons shrink and lighten, and the accordion rows get shorter. Restoring the fontSize="small" prop should fix it; this is the only place in the PR with that pattern.
2. "None" placeholders turned black. EmptyListEntry renders <Typography color="grey">. After the upgrade, the empty-table "None" on the user, group, role, tag, request, and app pages renders in the default text colour instead of grey. This is inferred from the screenshots, not from inspecting computed styles. AppGroupLifecyclePluginData uses the same color="grey". color="text.secondary" would probably fix both.

Smaller changes that look like MUI 9 defaults rather than bugs:

• The nav's expand chevrons sit at the drawer's right edge instead of next to the label (on every page; NavItems isn't changed here).
• Chip labels sit about 1px lower.

Nothing else differed beyond antialiasing noise.

🤖 Generated with Claude Code

[Jeff-Rowell]

I used npm run visual-diff -- --open and got this:

They all seem to be failing because of some padding on the text on the left sidebar changing:

Actual:

Expected:

[barborico]

Thanks for running it. MUI 9 shrinks ListItemIcon's default min-width from 56px to 36px, so every sidebar label moved 20px towards its icon, and the nav is on every page. 3e670e6 restores 56px in the theme in App.tsx. QuickSwitcher sets its own 36px, so it doesn't change.

A rerun of npm run visual-diff on 3e670e6 against the merge base 2b0d4da reports no changed pages and no new errors.