chore(scorecard): migrate from Material UI v4 to MUI v5#3312
chore(scorecard): migrate from Material UI v4 to MUI v5#3312Eswaraiahsapram wants to merge 1 commit into
Conversation
Changed Packages
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3312 +/- ##
=======================================
Coverage 53.98% 53.98%
=======================================
Files 2402 2402
Lines 87397 87403 +6
Branches 24208 24202 -6
=======================================
+ Hits 47177 47185 +8
+ Misses 38631 38629 -2
Partials 1589 1589
*This pull request uses carry forward flags. Click here to find out more. Continue to review full report in Codecov by Harness.
🚀 New features to boost your workflow:
|
ReviewFindingsLow
Info
Previous runReviewFindingsHigh
Low
Info
Previous run (2)ReviewFindingsLow
Info
Previous run (3)ReviewFindingsLow
Info
|
| }, | ||
| filter: { | ||
| '& + &': { | ||
| marginTop: theme.spacing(2.5), |
There was a problem hiding this comment.
[low] pattern-inconsistency
Mixed styling approach: makeStyles from @mui/styles retained for filter class while sx props used for other styles. Other files in this PR and other migrated workspaces fully remove makeStyles.
debsmita1
left a comment
There was a problem hiding this comment.
@Eswaraiahsapram, your PR doesn't touch any scorecard plugin code changes, you could remove the changeset
dzemanov
left a comment
There was a problem hiding this comment.
I have confirmed locally in workspace that the plugin works and looks fine.
I haven't checked in rhdh since the code only touches eslint configuration in the plugin.
Changeset can be removed.
537049a to
648dd30
Compare
|
🤖 Finished Review · ✅ Success · Started 10:14 AM UTC · Completed 10:22 AM UTC |
|
🤖 Review · Started 12:24 PM UTC |
| @@ -0,0 +1,6 @@ | |||
| -- | |||
There was a problem hiding this comment.
[high] logic-error
The changeset file has a malformed opening delimiter: -- (two dashes) instead of the required --- (three dashes). The changesets tool requires both the opening and closing frontmatter delimiters to be exactly ---. With only two dashes, the tool will fail to parse this changeset, meaning no version bump or changelog entry will be generated for the @red-hat-developer-hub/backstage-plugin-scorecard package.
Suggested fix: Change the first line from -- to ---.
| @@ -0,0 +1,33 @@ | |||
| /* | |||
There was a problem hiding this comment.
[low] code-organization
New file placed directly in the components/ directory, breaking the established pattern where all components live in subdirectories and only types.ts sits at the root. Consider moving to Common/ScorecardStylesProvider.tsx.
| @@ -65,7 +60,11 @@ const SearchPage = () => { | |||
| <Content> | |||
There was a problem hiding this comment.
[low] pattern-inconsistency
Mixed styling approach: retains makeStyles from @mui/styles for the filter class while converting bar and filters classes to inline sx props. Consider completing the migration to sx for full consistency.
| "@backstage/ui": "^0.13.2", | ||
| "@material-ui/core": "^4.12.2", | ||
| "@material-ui/icons": "^4.9.1", | ||
| "@mui/icons-material": "5.18.0", |
There was a problem hiding this comment.
[low] missing-peer-dependency
The PR removes @material-ui/icons but the updated backstage-plugin-theme v0.14.7 still declares @material-ui/icons: ^4.11.3 as a peerDependency, which may produce warnings.
|
🤖 Finished Review · ✅ Success · Started 12:24 PM UTC · Completed 12:35 PM UTC |
1ee53c4 to
d455db4
Compare
|
|
🤖 Finished Review · ✅ Success · Started 3:34 PM UTC · Completed 3:40 PM UTC |
|
|
||
| import { createGenerateClassName, StylesProvider } from '@mui/styles'; | ||
|
|
||
| const generateClassName = createGenerateClassName({ |
There was a problem hiding this comment.
[low] edge-case
The createGenerateClassName({ seed: "scorecard" }) call is at module scope, producing a single shared counter. If ScorecardHomepageCardWithProvider is rendered as a child of ScorecardPageWithProvider, both wrap in ScorecardStylesProvider. The shared counter means class name indices are globally incremented rather than reset per provider boundary. This is benign (no collisions), but worth noting for future maintainers.
| "@backstage/theme": "^0.7.2", | ||
| "@mui/icons-material": "5.18.0", | ||
| "@mui/material": "5.18.0", | ||
| "@mui/styles": "5.18.0", |
There was a problem hiding this comment.
[info] api-contract
@mui/styles (v5.18.0) is added as a new production dependency. This package is officially deprecated by MUI and is incompatible with React 19. Since the project uses React 18 today, this works correctly, but creates a migration obstacle for future React upgrades.



Hey, I just made a Pull Request!
Fix: https://redhat.atlassian.net/browse/RHIDP-13844
Migrates the scorecard workspace from Material UI v4 to MUI v5.
--- NFS ---
Screen.Recording.2026-06-05.at.11.31.20.AM.mov
--- Legacy app ---
Screen.Recording.2026-06-05.at.11.29.15.AM.mov
✔️ Checklist