[frontend] Migrate Material UI v4 to MUI v5#12925
[frontend] Migrate Material UI v4 to MUI v5#12925jeffspahr wants to merge 4 commits intokubeflow:masterfrom
Conversation
- replace @material-ui/core/icons with @mui/material/icons-material + emotion - migrate theme overrides/styles and update component APIs - refresh tests/snapshots and fix migration regressions - verify with npm run test:ci and npm run build Signed-off-by: Jeff Spahr <spahrj@gmail.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
There was a problem hiding this comment.
Pull request overview
This PR migrates the frontend from Material UI v4 to MUI v5 with Emotion as the styling engine. The migration updates all imports from @material-ui/core and @material-ui/icons to their v5 equivalents (@mui/material and @mui/icons-material), applies API changes across components, updates theme structure to use v5's components.styleOverrides pattern, and fixes transition compatibility issues in the SidePanel component.
Changes:
- Updated package dependencies to MUI v5 (
@mui/material,@mui/icons-material) and added Emotion dependencies - Applied codemod-driven import path updates and API changes throughout the codebase
- Migrated theme override structure from v4's
overridesto v5'scomponents.styleOverridespattern with proper nesting - Fixed MUI v5 Slide transition requirement by wrapping content in a div element
- Updated test snapshots to reflect v5 CSS class naming and DOM structure changes
Reviewed changes
Copilot reviewed 117 out of 131 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/package.json | Added MUI v5 and Emotion dependencies, removed v4 packages |
| frontend/src/index.tsx | Added StyledEngineProvider to ensure proper CSS injection order |
| frontend/src/Css.tsx | Migrated theme structure to v5 components.styleOverrides pattern |
| frontend/src/mlmd/Css.tsx | Migrated MLMD theme structure to v5 components.styleOverrides pattern |
| frontend/src/components/SidePanel.tsx | Wrapped Slide content in div to satisfy v5 transition requirements |
| Multiple component files | Updated imports from @material-ui to @mui namespaces |
| Multiple test files | Updated test selectors from 'button' to 'combobox' for Select components |
| Multiple snapshot files | Updated to reflect v5 CSS class names and DOM structure |
|
Follow-up note on UI visual comparison (Kind-backed smoke test against Observed button-related deltas are small and cosmetic, primarily:
Root cause: expected rendering differences from MUI v4 -> MUI v5 internals (Button/Icon DOM/CSS behavior), not functional regressions. Decision for this PR: accept the new visuals and avoid adding migration-specific styling hacks for pixel parity. This keeps scope focused on correctness/stability and reduces long-term maintenance risk. |
- document SidePanel Slide wrapper requirement for MUI v5 ref handling
- make CardTooltip interactivity explicit with disableInteractive={false}
Signed-off-by: Jeff Spahr <spahrj@gmail.com>
Signed-off-by: Jeff Spahr <spahrj@gmail.com>
Signed-off-by: Jeff Spahr <spahrj@gmail.com>
|
/ok-to-test |
|
Summary
@material-ui/core/@material-ui/iconsto MUI v5 (@mui/material,@mui/icons-material) with Emotioncomponents.styleOverrides) in the main and MLMD themesSidePaneland update related tests/selectors/snapshots for MUI v5 behaviortasks/Verification
cd frontend && npm run test:cicd frontend && npm run buildgit diff -- frontend/src/apis frontend/src/apisv2beta1 frontend/src/third_party(empty)rg -n "@material-ui/" frontend/src frontend/package.json(no matches)Notes