Skip to content

feat(orchestrator): migrate from Material UI v4 to MUI v5#3195

Open
lokanandaprabhu wants to merge 5 commits into
redhat-developer:mainfrom
lokanandaprabhu:feat/orchestrator-mui-v5-migration
Open

feat(orchestrator): migrate from Material UI v4 to MUI v5#3195
lokanandaprabhu wants to merge 5 commits into
redhat-developer:mainfrom
lokanandaprabhu:feat/orchestrator-mui-v5-migration

Conversation

@lokanandaprabhu
Copy link
Copy Markdown
Member

Hey, I just made a Pull Request!

Fixes: https://redhat.atlassian.net/browse/RHIDP-13834

Migrates the orchestrator workspace from Material UI v4 (@material-ui/*) to MUI v5 (@mui/*).

  • Replace all @material-ui imports in the orchestrator frontend plugin with @mui/material, @mui/icons-material, and @mui/styles where needed
  • Wrap the plugin router with StylesProvider and createGenerateClassName({ seed: 'orchestrator' }) to avoid JSS class-name collisions with the host app
  • Add shared ESLint config (eslint.frontend-shared.cjs) to block reintroduction of v4 imports across the plugin, form packages, and NFS app
  • Fix sidebar Backstage logo spacing and SVG sizing in both NFS (packages/app) and legacy (packages/app-legacy) app shells using inline styles (JSS makeStyles in app shells was not applying without a theme provider)

----NFS------

Screen.Recording.2026-05-21.at.12.07.41.PM.mov

----Legacy app -----

Screen.Recording.2026-05-21.at.12.03.52.PM.mov

Screenshot 2026-05-21 at 11 59 30 AM Screenshot 2026-05-21 at 11 59 45 AM Screenshot 2026-05-21 at 12 00 19 PM Screenshot 2026-05-21 at 12 00 40 PM Screenshot 2026-05-21 at 12 01 08 PM Screenshot 2026-05-21 at 12 01 40 PM Screenshot 2026-05-21 at 12 01 54 PM Screenshot 2026-05-21 at 12 02 07 PM

✔️ 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)

Replace @material-ui imports with @mui across the orchestrator plugin
and app shells, add StylesProvider with orchestrator JSS seed, shared
ESLint ban on v4 imports, and fix sidebar logo spacing plus workflow
table action icon sizing in NFS and legacy apps.

Co-authored-by: Cursor <[email protected]>
@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented May 21, 2026

Unexpected Changesets

The following changeset(s) reference packages that have not been changed in this PR:

  • /home/runner/work/rhdh-plugins/rhdh-plugins/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md: @red-hat-developer-hub/backstage-plugin-orchestrator-form-react, @red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets

Note that only changes that affect the published package require changesets, for example changes to tests and storybook stories do not require changesets.

Changed Packages

Package Name Package Path Changeset Bump Current Version
app-legacy workspaces/orchestrator/packages/app-legacy none v0.0.3
app workspaces/orchestrator/packages/app none v0.0.4
@red-hat-developer-hub/backstage-plugin-orchestrator workspaces/orchestrator/plugins/orchestrator patch v5.7.12

@codecov
Copy link
Copy Markdown

codecov Bot commented May 21, 2026

Codecov Report

❌ Patch coverage is 33.33333% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.97%. Comparing base (86e89d3) to head (34a228a).
⚠️ Report is 14 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3195      +/-   ##
==========================================
- Coverage   60.97%   60.97%   -0.01%     
==========================================
  Files        2097     2095       -2     
  Lines       65147    65135      -12     
  Branches    17022    17022              
==========================================
- Hits        39723    39713      -10     
+ Misses      24844    24842       -2     
  Partials      580      580              
Flag Coverage Δ *Carryforward flag
adoption-insights 83.58% <ø> (ø) Carriedforward from aed4213
ai-integrations 70.03% <ø> (ø) Carriedforward from aed4213
app-defaults 69.60% <ø> (ø) Carriedforward from aed4213
augment 69.36% <ø> (ø) Carriedforward from aed4213
bulk-import 72.86% <ø> (ø) Carriedforward from aed4213
cost-management 16.49% <ø> (ø) Carriedforward from aed4213
dcm 32.85% <ø> (ø) Carriedforward from aed4213
extensions 61.79% <ø> (ø) Carriedforward from aed4213
global-floating-action-button 74.30% <ø> (ø) Carriedforward from aed4213
global-header 61.68% <ø> (ø) Carriedforward from aed4213
homepage 50.95% <ø> (ø) Carriedforward from aed4213
konflux 91.01% <ø> (ø) Carriedforward from aed4213
lightspeed 68.34% <ø> (ø) Carriedforward from aed4213
mcp-integrations 81.59% <ø> (ø) Carriedforward from aed4213
orchestrator 36.26% <33.33%> (-0.10%) ⬇️
quickstart 62.64% <ø> (ø) Carriedforward from aed4213
sandbox 79.56% <ø> (ø) Carriedforward from aed4213
scorecard 83.58% <ø> (ø) Carriedforward from aed4213
theme 64.54% <ø> (ø) Carriedforward from aed4213
translations 8.49% <ø> (ø) Carriedforward from aed4213
x2a 78.28% <ø> (ø) Carriedforward from aed4213

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


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 86e89d3...34a228a. 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.

lokanandaprabhu and others added 3 commits May 21, 2026 13:36
Replace inline styles with Box and sx on sidebar logo wrappers and SVG
logos in NFS app, legacy app, and plugin dev shell per review feedback.

Co-authored-by: Cursor <[email protected]>
Centralize frontend ESLint rules in eslint.frontend-shared.cjs and wire
packages via relative require with documented no-relative-monorepo-imports
exceptions. Remove plugin package export and form-package devDependencies.

Co-authored-by: Cursor <[email protected]>
Import LogoFull and LogoIcon from @red-hat-developer-hub/backstage-plugin-theme
(requires ^0.14.0) and remove local Backstage SVG copies in app shells.

Co-authored-by: Cursor <[email protected]>
@sonarqubecloud
Copy link
Copy Markdown

Copy link
Copy Markdown
Member

@debsmita1 debsmita1 left a comment

Choose a reason for hiding this comment

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

The Logo is not visible in the Light theme. In the dark theme, it looks good
Screenshot 2026-05-21 at 10 10 06 PM

Tested this on RHDH, it works fine in both themes

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants