Skip to content

feat(ui): upgrade MUI v7 → v9 (DRC-3277, DRC-3278)#1333

Merged
kentwelcome merged 3 commits into
mainfrom
feature/drc-3278-upgrade-datarecceui-to-mui-v9
Apr 23, 2026
Merged

feat(ui): upgrade MUI v7 → v9 (DRC-3277, DRC-3278)#1333
kentwelcome merged 3 commits into
mainfrom
feature/drc-3278-upgrade-datarecceui-to-mui-v9

Conversation

@gcko
Copy link
Copy Markdown
Contributor

@gcko gcko commented Apr 22, 2026 •
edited
Loading

Summary

  • Run all MUI v9 codemods on @datarecce/ui and storybook (system props → sx, deprecated props → slots/slotProps)
  • Bump @mui/material and @mui/system from ^7.3.9 → ^9.0.0
  • Migrate Alert styleOverrides removed class keys to compound selectors
  • Fix ScreenshotBox system prop (height → sx)
  • Fix missed codemod migration: color system prop left as direct prop on Typography in inlineRenderCell.tsx

Dependency strategy: Keep MUI as direct deps (not peer deps) — simpler for our 2-consumer setup.

Changes

  • 47 files from codemods (system props, deprecated props)
  • 6 files from version bump + manual fixes
  • All quality gates green: type-check, 3686 tests, lint, tsdown build, Next.js build

Closes

  • DRC-3277: Run MUI v9 codemods on @datarecce/ui
  • DRC-3278: Upgrade @datarecce/ui to MUI v9

Test plan

  • pnpm type:check — no TypeScript errors
  • pnpm test — 3686 tests passed, 5 skipped
  • pnpm lint:fix — clean
  • pnpm run build — tsdown + Next.js build succeeded
  • Visual QA with recce server (DRC-3284)

🤖 Generated with Claude Code

gcko and others added 2 commits April 22, 2026 13:45
@gcko @claude
refactor(ui): run MUI v9 codemods on @datarecce/ui and storybook
ef62a56 
Run deprecations/all and v9.0.0/system-props codemods to prepare for
MUI v9 upgrade. System props (color, fontWeight, flexWrap, etc.) are
moved into sx prop objects, and deprecated inputRef props are migrated.
All changes produce v7-compatible code.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jared Scott <jared.scott@datarecce.io>
@gcko @claude
feat(ui): upgrade @mui/material and @mui/system to v9.0.0
8cbe808 
Bump @mui/material and @mui/system from ^7.3.9 to ^9.0.0 in both
@datarecce/ui package and root workspace (including pnpm.overrides).

Manual fixes on top of codemod changes:
- Alert styleOverrides: migrate removed class keys (standardSuccess,
  standardWarning, standardError, standardInfo) to compound selectors
  inside root (&.MuiAlert-standard.MuiAlert-colorSuccess etc.)
- ScreenshotBox: move system prop height="100%" to sx

Dependency strategy: keep MUI as direct deps (not peer deps) for
simplicity — @datarecce/ui is only consumed by two known repos.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jared Scott <jared.scott@datarecce.io>
@gcko gcko self-assigned this Apr 22, 2026
@gcko gcko added enhancement New feature or request dependencies Pull requests that update a dependency file labels Apr 22, 2026
@gcko gcko requested a review from Copilot April 22, 2026 07:53
Copilot AI reviewed Apr 22, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR upgrades the shared React UI package (@datarecce/ui) and Storybook to MUI v9, applying codemods and a few manual theme/component adjustments to align with MUI’s updated styling APIs (notably system props → sx, deprecated props migrations, and Alert override changes).

Changes:

  • Bump @mui/material and @mui/system to ^9.0.0 across the workspace (and update lockfile).
  • Apply codemod-driven migrations from system props to sx across UI components and Storybook.
  • Update theme Alert styleOverrides to use compound selectors compatible with removed class keys; adjust ScreenshotBox usage to avoid removed system prop patterns.

Reviewed changes

Copilot reviewed 51 out of 52 changed files in this pull request and generated no comments.

Show a summary per file
File Description
js/pnpm-lock.yaml Locks MUI v9 and related dependency graph changes.
js/package.json Updates workspace-level MUI dependencies to ^9.0.0 and aligns overrides.
js/packages/ui/package.json Updates @datarecce/ui direct dependencies to MUI v9.
js/packages/ui/src/theme/theme.ts Updates Alert theme overrides to compound selectors compatible with MUI v9.
js/packages/ui/src/hooks/ScreenShot.tsx Migrates Stack layout props to sx for MUI v9 compatibility.
js/packages/ui/src/components/views/ChecksView.tsx Replaces Typography color prop usage with sx styling.
js/packages/ui/src/components/ui/dataGrid/inlineRenderCell.tsx Migrates Box/Typography system props to sx.
js/packages/ui/src/components/ui/Toaster.tsx Migrates fontWeight to sx on Typography instances.
js/packages/ui/src/components/ui/DropdownValuesInput.tsx Migrates Box system props to sx and removes stray whitespace.
js/packages/ui/src/components/top-k/TopKDiffResultView.tsx Migrates Stack alignItems to sx.
js/packages/ui/src/components/summary/ChangeSummary.tsx Migrates Stack layout props to sx and consolidates styling.
js/packages/ui/src/components/run/RunView.tsx Migrates Stack alignment props to sx.
js/packages/ui/src/components/run/RunResultPane.tsx Migrates inline system props to sx and removes extra blank lines.
js/packages/ui/src/components/run/RunProgress.tsx Migrates Typography color props to sx.
js/packages/ui/src/components/run/RunList.tsx Migrates Stack alignItems to sx.
js/packages/ui/src/components/result/createResultView.tsx Updates ScreenshotBox usage to use sx for height instead of system prop.
js/packages/ui/src/components/query/SetupConnectionGuide.tsx Migrates Stack alignment props to sx.
js/packages/ui/src/components/query/QueryPageOss.tsx Migrates Stack alignItems and fontSize to sx.
js/packages/ui/src/components/query/QueryForm.tsx Migrates Stack alignment props to sx.
js/packages/ui/src/components/lineage/topbar/LineageViewTopBar.tsx Migrates various Typography/Stack system props to sx.
js/packages/ui/src/components/lineage/states/LineageViewStates.tsx Migrates Stack alignment props to sx.
js/packages/ui/src/components/lineage/nodes/NodeRunsAggregated.tsx Migrates Stack alignment props to sx in multiple render branches.
js/packages/ui/src/components/lineage/controls/ColumnLevelLineageControl.tsx Migrates Stack alignItems to sx.
js/packages/ui/src/components/lineage/SingleEnvironmentQueryView.tsx Migrates Stack alignItems to sx.
js/packages/ui/src/components/lineage/SetupConnectionBanner.tsx Migrates Stack alignment/font styling to sx.
js/packages/ui/src/components/lineage/SandboxView.tsx Migrates Stack alignment/justify props to sx.
js/packages/ui/src/components/lineage/NodeView.tsx Migrates multiple Stack/Typography system props to sx.
js/packages/ui/src/components/lineage/NodeTag.tsx Migrates Stack alignment props to sx in multiple render branches.
js/packages/ui/src/components/lineage/LineageView.tsx Replaces Typography color prop usage with sx styling.
js/packages/ui/src/components/check/timeline/TimelineEventOss.tsx Migrates Stack/Typography system props to sx.
js/packages/ui/src/components/check/timeline/TimelineEvent.tsx Migrates Stack/Typography system props to sx.
js/packages/ui/src/components/check/timeline/CommentInput.tsx Migrates Stack layout props to sx.
js/packages/ui/src/components/check/CheckListOss.tsx Consolidates Box styling into a single sx object.
js/packages/ui/src/components/check/CheckList.tsx Replaces Typography color prop usage with sx styling.
js/packages/ui/src/components/check/CheckEmptyState.tsx Migrates Stack alignment to sx.
js/packages/ui/src/components/check/CheckDetailOss.tsx Migrates Box/TYpography system props to sx.
js/packages/ui/src/components/check/CheckDetail.tsx Migrates Typography color prop to sx and removes extra blank line.
js/packages/ui/src/components/check/CheckDescription.tsx Migrates Typography system props to sx.
js/packages/ui/src/components/app/TopBarOss.tsx Migrates Stack alignment to sx and removes extra blank line.
js/packages/ui/src/components/app/StateSynchronizer.tsx Migrates Stack alignment in Radio labels to sx.
js/packages/ui/src/components/app/StateSharing.tsx Migrates Stack alignment to sx.
js/packages/ui/src/components/app/StateImporter.tsx Migrates Stack alignment to sx.
js/packages/ui/src/components/app/NavBarOss.tsx Migrates Box system props to sx.
js/packages/ui/src/components/app/Filename.tsx Migrates Stack alignment/justify props to sx.
js/packages/ui/src/components/app/CloudUploadDialogOss.tsx Migrates Stack alignment/padding props to sx and removes extra blank lines.
js/packages/ui/src/components/app/CloudShareButtonOss.tsx Migrates Stack alignment props to sx and removes extra blank line.
js/packages/ui/src/components/app/AvatarDropdown.tsx Migrates Typography color/fontWeight props to sx.
js/packages/ui/src/components/app/AuthModal.tsx Migrates Stack alignment/padding to sx.
js/packages/storybook/stories/lineage/ZoomLegibility.stories.tsx Migrates Typography color to sx.
js/packages/storybook/stories/lineage/NodeView.stories.tsx Migrates Typography color to sx.
js/packages/storybook/stories/lineage/LineageCanvas.stories.tsx Migrates Typography color/fontWeight to sx and removes extra blank lines.
js/packages/storybook/stories/lineage/CllExperience.stories.tsx Migrates Typography color to sx and removes extra blank lines.
Files not reviewed (1)
  • js/pnpm-lock.yaml: Language not supported

@gcko
Copy link
Copy Markdown
Contributor Author

gcko commented Apr 22, 2026

Code Review — PR #1333

Summary

MUI v7 → v9 migration via codemods + manual fixes. The codemod work is thorough and correct across 47+ files. One system prop was missed by the codemods — now fixed in-place.

Findings

[Fixed] Incomplete codemod migration — color left as direct prop on Typography

File: js/packages/ui/src/components/ui/dataGrid/inlineRenderCell.tsx:189-194
Issue: The codemod moved fontSize into sx but left color={netChange >= 0 ? "green.600" : "red.600"} as a direct prop. In MUI v9, theme palette path values like "green.600" passed as direct color props are deprecated system props and should be in sx. This was the only instance across the entire ui/src and storybook directories — all other system props were correctly migrated.
Status: Fixed — moved color into the existing sx block alongside fontSize.

Verification Results

Check Result
pnpm type:check Pass
pnpm test 3686 passed, 5 skipped
pnpm lint Clean (607 files checked)
System prop scan (fontWeight=, fontSize=, alignItems=, justifyContent=, flexWrap=, color="text.*") No remaining instances found

Notes

  • Alert theme migration is correct — standardSuccess/standardWarning/etc. class keys replaced with compound selectors (&.MuiAlert-standard.MuiAlert-colorSuccess) nested under root.
  • ScreenshotBox backgroundColor prop in createResultView.tsx is intentionally a direct prop — ScreenshotBox is a custom component that explicitly destructures backgroundColor and applies it to an inner Box. Not a migration miss.
  • Dependency strategy is sound — MUI stays in dependencies (not peerDependencies) in @datarecce/ui, consistent with the 2-consumer setup.
  • Blank line removals throughout the diff are cosmetic whitespace cleanup, not functional changes.

Verdict

✅ Approved — one missed codemod migration fixed, no other issues found.

🤖 Generated with Claude Code

@gcko @claude
fix(ui): move missed color system prop to sx in inlineRenderCell
4125404 
MUI v9 codemod moved fontSize to sx but left color as a direct prop.
Theme palette paths like "green.600" are system props and must be in sx.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Jared Scott <jared.scott@datarecce.io>
@gcko gcko requested a review from kentwelcome April 22, 2026 09:00
kentwelcome
kentwelcome approved these changes Apr 23, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@kentwelcome kentwelcome left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kentwelcome kentwelcome merged commit aeb90a6 into main Apr 23, 2026
7 checks passed
@kentwelcome kentwelcome deleted the feature/drc-3278-upgrade-datarecceui-to-mui-v9 branch April 23, 2026 06:22
@gcko gcko mentioned this pull request May 28, 2026
Merged
4 tasks
gcko added a commit that referenced this pull request May 28, 2026
@gcko
chore(husky): add pre-commit guard for pinned @biomejs/biome version
e0a000c 
The sister recce-cloud-infra repo has now been bitten twice (PRs #1333,
#1376, #1382) by Dependabot consolidations silently re-bumping a
deliberate @biomejs/biome pin past a known Mac arm64 stack-overflow bug
in 2.4.12 through 2.4.15. The js/biome.json in this repo does not
currently enable the affected nursery rules (noFloatingPromises,
noMisusedPromises, noUnnecessaryConditions), so the bug has not bitten
here yet, but the same consolidation pattern applies, and silent bumps
are easy to miss in lockfile-heavy PRs.

Add a pre-commit guard that reads the staged content of js/package.json,
checks the @biomejs/biome version against an EXPECTED_BIOME constant
(currently 2.4.15, the version this repo runs on today), and blocks the
commit on a mismatch with a clear remediation message. Override with
ALLOW_BIOME_BUMP=1 after verifying biome runs cleanly on macOS arm64
with the nursery rules enabled.

No biome version change here, only the guard. When biome is deliberately
bumped, update EXPECTED_BIOME in this hook in the same commit.

Signed-off-by: Jared Scott <jared.scott@datarecce.io>
even-wei pushed a commit that referenced this pull request May 28, 2026
@gcko @claude
chore(husky): add pre-commit guard for pinned @biomejs/biome version (#…
d71ad92 
…1404)

* chore(husky): add pre-commit guard for pinned @biomejs/biome version

The sister recce-cloud-infra repo has now been bitten twice (PRs #1333,
#1376, #1382) by Dependabot consolidations silently re-bumping a
deliberate @biomejs/biome pin past a known Mac arm64 stack-overflow bug
in 2.4.12 through 2.4.15. The js/biome.json in this repo does not
currently enable the affected nursery rules (noFloatingPromises,
noMisusedPromises, noUnnecessaryConditions), so the bug has not bitten
here yet, but the same consolidation pattern applies, and silent bumps
are easy to miss in lockfile-heavy PRs.

Add a pre-commit guard that reads the staged content of js/package.json,
checks the @biomejs/biome version against an EXPECTED_BIOME constant
(currently 2.4.15, the version this repo runs on today), and blocks the
commit on a mismatch with a clear remediation message. Override with
ALLOW_BIOME_BUMP=1 after verifying biome runs cleanly on macOS arm64
with the nursery rules enabled.

No biome version change here, only the guard. When biome is deliberately
bumped, update EXPECTED_BIOME in this hook in the same commit.

Signed-off-by: Jared Scott <jared.scott@datarecce.io>

* chore(husky): address PR #1404 review — fix infra PR refs, harden biome extraction

- Correct sister-repo PR references: #1376 → #1374 on lines 13 and 66.
  (#1376 is an unrelated docs PR; #1374 is the actual Dependabot
  consolidation re-bump.) Spotted by Copilot and @even-wei.
- Harden the staged-version extraction (Copilot, @even-wei Note 1):
  add `head -1` so a future second `"@biomejs/biome":` occurrence
  (e.g., a pnpm.overrides entry) doesn't yield multi-line output, and
  fail-loud when extraction is empty so a package.json reformat or
  intentional dep removal can no longer silently disable the guard.
  `ALLOW_BIOME_BUMP=1` still overrides both the mismatch and the
  empty-extraction paths.
- Align `--diff-filter=ACM` with the existing JS lint detector below
  for consistency (@even-wei Note 2).

Verified locally via index-blob swap on macOS arm64:
  1. 2.4.99 staged, no override → exit 1, updated error cites #1374
  2. 2.4.99 staged + ALLOW_BIOME_BUMP=1 → exit 0
  3. 2.4.15 staged (current) → exit 0
  4. @biomejs/biome key removed → exit 1, "Could not extract" message
  5. @biomejs/biome key removed + ALLOW_BIOME_BUMP=1 → exit 0
`bash -n` clean; `shellcheck -S warning` silent on the guard block.

Signed-off-by: Jared Scott <jared.scott@reccehq.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jared Scott <jared.scott@datarecce.io>

---------

Signed-off-by: Jared Scott <jared.scott@datarecce.io>
Signed-off-by: Jared Scott <jared.scott@reccehq.com>
Co-authored-by: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@kentwelcome kentwelcome kentwelcome approved these changes

Assignees

@gcko gcko

Labels

dependencies Pull requests that update a dependency file enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@gcko @kentwelcome