Skip to content

chore(scorecard): migrate from Material UI v4 to MUI v5#3312

Open
Eswaraiahsapram wants to merge 1 commit into
redhat-developer:mainfrom
Eswaraiahsapram:feat/scorecard-mui-v5-migration
Open

chore(scorecard): migrate from Material UI v4 to MUI v5#3312
Eswaraiahsapram wants to merge 1 commit into
redhat-developer:mainfrom
Eswaraiahsapram:feat/scorecard-mui-v5-migration

Conversation

@Eswaraiahsapram

Copy link
Copy Markdown
Member

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

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)

@rhdh-gh-app

rhdh-gh-app Bot commented Jun 5, 2026

Copy link
Copy Markdown

Changed Packages

Package Name Package Path Changeset Bump Current Version
app-legacy workspaces/scorecard/packages/app-legacy none v0.0.0
app workspaces/scorecard/packages/app none v0.0.0
@red-hat-developer-hub/backstage-plugin-scorecard workspaces/scorecard/plugins/scorecard patch v2.7.8

@Eswaraiahsapram Eswaraiahsapram changed the title feat(scorecard): migrate from Material UI v4 to MUI v5 chore(scorecard): migrate from Material UI v4 to MUI v5 Jun 5, 2026
@codecov

codecov Bot commented Jun 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.98%. Comparing base (2714194) to head (d455db4).
⚠️ Report is 22 commits behind head on main.
✅ All tests successful. No failed tests found.

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           
Flag Coverage Δ *Carryforward flag
adoption-insights 83.58% <ø> (ø) Carriedforward from 2714194
ai-integrations 70.03% <ø> (ø) Carriedforward from 2714194
app-defaults 69.60% <ø> (ø) Carriedforward from 2714194
augment 46.39% <ø> (ø) Carriedforward from 2714194
bulk-import 72.86% <ø> (ø) Carriedforward from 2714194
cost-management 17.48% <ø> (ø) Carriedforward from 2714194
dcm 59.64% <ø> (ø) Carriedforward from 2714194
extensions 62.24% <ø> (ø) Carriedforward from 2714194
global-floating-action-button 74.30% <ø> (ø) Carriedforward from 2714194
global-header 61.63% <ø> (ø) Carriedforward from 2714194
homepage 51.60% <ø> (ø) Carriedforward from 2714194
install-dynamic-plugins 56.23% <ø> (ø) Carriedforward from 2714194
konflux 91.01% <ø> (ø) Carriedforward from 2714194
lightspeed 68.52% <ø> (ø) Carriedforward from 2714194
mcp-integrations 85.46% <ø> (ø) Carriedforward from 2714194
orchestrator 37.33% <ø> (ø) Carriedforward from 2714194
quickstart 62.09% <ø> (ø) Carriedforward from 2714194
sandbox 78.99% <ø> (ø) Carriedforward from 2714194
scorecard 83.93% <100.00%> (+0.08%) ⬆️
theme 64.54% <ø> (ø) Carriedforward from 2714194
translations 8.49% <ø> (ø) Carriedforward from 2714194
x2a 78.79% <ø> (ø) Carriedforward from 2714194

*This pull request uses carry forward flags. Click here to find out more.


Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2714194...d455db4. Read the comment docs.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fullsend-ai-review

fullsend-ai-review Bot commented Jun 5, 2026

Copy link
Copy Markdown

Review

Findings

Low

  • [edge-case] workspaces/scorecard/plugins/scorecard/src/components/ScorecardStylesProvider.tsx:21 — The createGenerateClassName({ seed: 'scorecard' }) call is at module scope, producing a single shared counter. If ScorecardHomepageCardWithProvider (which wraps in ScorecardStylesProvider) is rendered as a child of ScorecardPageWithProvider (which also wraps in ScorecardStylesProvider), the inner provider replaces the outer for its subtree. 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.

Info

  • [api-contract] workspaces/scorecard/plugins/scorecard/package.json:66@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. The scorecard plugin itself has zero makeStyles calls — this dependency exists solely to provide StylesProvider for scoping JSS class names generated by Backstage core components that still use MUI v4 internally.

  • [sub-agent-failure] N/A — The style-conventions and intent-coherence sub-agents did not return findings due to model unavailability (claude-sonnet-4-5@20250929 not available on vertex deployment). Inline assessment found no style or intent issues: all changes are scoped to workspaces/scorecard/, import patterns are consistent, and the migration scope matches the linked RHIDP-13844 Jira ticket.

Previous run

Review

Findings

High

  • [logic-error] workspaces/scorecard/.changeset/mui-v5-scorecard.md:1 — 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.
    Remediation: Change the first line from -- to ---.

Low

  • [code-organization] workspaces/scorecard/plugins/scorecard/src/components/ScorecardStylesProvider.tsx — New file placed directly in the components/ directory, breaking the established pattern where all components live in subdirectories (AggregatedMetricCards/, Common/, Scorecard/, etc.) and only types.ts sits at the root. Consider moving to Common/ScorecardStylesProvider.tsx for consistency.
  • [pattern-inconsistency] workspaces/scorecard/packages/app-legacy/src/components/search/SearchPage.tsx — The migrated file retains makeStyles from @mui/styles for the filter class while converting bar and filters classes to inline sx props. This creates a mixed styling approach within a single file. The scorecard plugin components use sx props exclusively. Consider completing the migration by converting the remaining filter class to sx as well.
  • [pattern-inconsistency] workspaces/scorecard/packages/app-legacy/src/components/Root/Root.tsx — The SidebarLogo component uses sx prop on Box but uses inline style prop on the Link component. While Link (from Backstage core-components) may not forward sx, the inconsistency is worth noting.
  • [missing-peer-dependency] workspaces/scorecard/packages/app-legacy/package.json — The PR removes @material-ui/icons but the updated @red-hat-developer-hub/backstage-plugin-theme v0.14.7 still declares @material-ui/icons: ^4.11.3 as a peerDependency. This may produce peer dependency warnings during installation.
  • [scope-creep] workspaces/scorecard/packages/app-legacy/src/components/search/SearchPage.tsx — Beyond the MUI migration, this file also removes a code comment ("Return a list of entities which are documented") and reorders imports. Minor non-migration changes bundled into the migration PR.

Info

  • [test-coverage] workspaces/scorecard/plugins/scorecard/src/components/ScorecardStylesProvider.tsx — No tests added for the new provider. Risk is minimal since it is a thin wrapper over MUI's StylesProvider, but worth noting for future coverage.
  • [architectural-coherence] The ScorecardStylesProvider pattern, eslint.frontend-shared.cjs naming, and overall migration approach are consistent with established patterns in other workspaces (global-header, orchestrator, bulk-import).
Previous run (2)

Review

Findings

Low

  • [unnecessary-dependency] workspaces/scorecard/plugins/scorecard/src/components/ScorecardStylesProvider.tsx — The new ScorecardStylesProvider wraps plugin entry points with StylesProvider from @mui/styles using createGenerateClassName with seed 'scorecard'. However, no file in the scorecard plugin uses makeStyles or any JSS-based styling from @mui/styles — the codebase exclusively uses sx props. This adds @mui/styles as a production dependency to the published plugin with no current consumer. If intended as a guard for Backstage core-components' internal JSS usage, a code comment explaining the rationale would be helpful.

  • [missing-jsdoc] workspaces/scorecard/plugins/scorecard/src/components/ScorecardStylesProvider.tsx — The sibling ScorecardQueryProvider includes a JSDoc comment explaining its purpose. Since ScorecardStylesProvider is extracted to its own file and wraps all three plugin entry points, a brief doc comment would clarify the intent.

Info

  • [migration-note] workspaces/scorecard/packages/app-legacy/src/components/Root/Root.tsx — The marginBottom: -14 to mb: '-14px' conversion is correctly handled. MUI v5's sx mb shorthand interprets bare numbers as theme spacing multiples, so the explicit string is the right approach for a pixel value.
Previous run (3)

Review

Findings

Low

  • [missing-peer-dep] workspaces/scorecard/packages/app-legacy/package.json — The PR removes @material-ui/icons from app-legacy's dependencies, but @red-hat-developer-hub/backstage-plugin-theme@0.14.7 declares @material-ui/icons: ^4.11.3 as a peer dependency. In practice this is a pre-existing condition (the app package never had @material-ui/icons despite the same peer requirement from theme v0.13.0), so the theme works fine without it. However, this may produce a peer dependency warning during install. Consider adding @material-ui/icons back or confirming the theme package doesn't need it at runtime.

  • [inconsistent-dep-spec] workspaces/scorecard/packages/app-legacy/package.json — MUI v5 packages are pinned to exact version 5.18.0 (no caret) in app-legacy, while the app package uses ^5.18.0 (with caret). This inconsistency is harmless for resolution but could confuse maintainers.

  • [styling-approach-consistency] workspaces/scorecard/packages/app-legacy/src/components/search/SearchPage.tsx:47 — SearchPage.tsx retains makeStyles (imported from @mui/styles) for the filter class while using inline sx props on Paper components for other styles. Within this PR, Root.tsx and SidebarLogo.tsx fully migrate away from makeStyles to sx/style. Other migrated workspaces (e.g., global-header) do not use @mui/styles makeStyles. Consider converting the remaining filter class to an sx prop to fully remove the @mui/styles dependency from this file.

  • [scope-classification] workspaces/scorecard/.changeset/mui-v5-scorecard.md — The PR is titled as "chore" (non-functional maintenance) but the changeset classifies the change as "patch" for the published scorecard plugin. The changeset description mentions "scope JSS class names to prevent style collisions," which implies a user-facing behavioral fix. Consider whether "fix" or "refactor" is a more accurate conventional-commit prefix.

Info

  • [test-adequacy] workspaces/scorecard/packages/app-legacy/src/App.test.tsx — The existing smoke test validates that the App renders without crashing, which would catch broken imports from the migration. No tests were weakened or removed.

  • [scope-containment] All 16 changed files are confined within workspaces/scorecard/. The ESLint shared config, theme bump, and Logo component consolidation are all within scope of a MUI v4→v5 migration. The ESLint config matches the established pattern from global-header, quickstart, and orchestrator workspaces.

},
filter: {
'& + &': {
marginTop: theme.spacing(2.5),

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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.

@fullsend-ai-review fullsend-ai-review Bot added the ready-for-merge All reviewers approved — ready to merge label Jun 5, 2026
@Eswaraiahsapram Eswaraiahsapram requested a review from debsmita1 June 9, 2026 06:13

@debsmita1 debsmita1 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@Eswaraiahsapram, your PR doesn't touch any scorecard plugin code changes, you could remove the changeset

@dzemanov dzemanov left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

@Eswaraiahsapram Eswaraiahsapram force-pushed the feat/scorecard-mui-v5-migration branch from 537049a to 648dd30 Compare June 9, 2026 10:12
@fullsend-ai-review

fullsend-ai-review Bot commented Jun 9, 2026

Copy link
Copy Markdown

🤖 Finished Review · ✅ Success · Started 10:14 AM UTC · Completed 10:22 AM UTC
Commit: 2a53627 · View workflow run →

@fullsend-ai-review fullsend-ai-review Bot added ready-for-merge All reviewers approved — ready to merge and removed ready-for-merge All reviewers approved — ready to merge labels Jun 9, 2026
@fullsend-ai-review

Copy link
Copy Markdown

🤖 Review · Started 12:24 PM UTC
Commit: 6699550 · View workflow run →

@fullsend-ai-review fullsend-ai-review Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

See the review comment for full details.

@@ -0,0 +1,6 @@
--

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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 @@
/*

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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",

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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.

@fullsend-ai-review fullsend-ai-review Bot removed the ready-for-merge All reviewers approved — ready to merge label Jun 9, 2026
@fullsend-ai-review

Copy link
Copy Markdown

🤖 Finished Review · ✅ Success · Started 12:24 PM UTC · Completed 12:35 PM UTC
Commit: 6699550 · View workflow run →

@Eswaraiahsapram Eswaraiahsapram force-pushed the feat/scorecard-mui-v5-migration branch from 1ee53c4 to d455db4 Compare June 9, 2026 15:32
@sonarqubecloud

sonarqubecloud Bot commented Jun 9, 2026

Copy link
Copy Markdown

@fullsend-ai-review

fullsend-ai-review Bot commented Jun 9, 2026

Copy link
Copy Markdown

🤖 Finished Review · ✅ Success · Started 3:34 PM UTC · Completed 3:40 PM UTC
Commit: 0b54852 · View workflow run →


import { createGenerateClassName, StylesProvider } from '@mui/styles';

const generateClassName = createGenerateClassName({

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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",

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

[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.

@fullsend-ai-review fullsend-ai-review Bot added the ready-for-merge All reviewers approved — ready to merge label Jun 9, 2026

@debsmita1 debsmita1 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

/lgtm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm ready-for-merge All reviewers approved — ready to merge workspace/scorecard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants