fix(topology): replaced MUI with Backstage UI#9331
Open
ciiay wants to merge 2 commits into
Open
Conversation
Signed-off-by: Yi Cai <yicai@redhat.com>
ciiay
requested review from
a team,
HusneShabbir,
christoph-jerolimov,
debsmita1,
divyanshiGupta,
its-mitesh-kumar,
jrichter1,
karthikjeeyar,
logonoff,
lokanandaprabhu and
rohitkrai03
as code owners
Contributor
Changed Packages
|
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates the topology workspace UI away from direct Material UI usage toward Backstage UI, Remix icons, PatternFly controls, and CSS modules.
Changes:
- Replaced MUI components/icons/styling across topology plugin and example app UI.
- Added a
useDarkThemehook for PatternFly dark-theme class synchronization. - Updated dependencies, tests, and changeset metadata for the migration.
Reviewed changes
Copilot reviewed 45 out of 46 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
workspaces/topology/yarn.lock |
Updates dependency graph for Backstage UI/Remix and MUI removal. |
workspaces/topology/plugins/topology/package.json |
Replaces MUI dependencies with Backstage UI/Remix dependencies. |
workspaces/topology/plugins/topology/src/setupTests.ts |
Adds global test mocks for legacy MUI styling APIs. |
workspaces/topology/plugins/topology/src/hooks/useDarkTheme.ts |
Adds hook to sync PatternFly dark class with Backstage theme. |
workspaces/topology/plugins/topology/src/hooks/useDarkTheme.test.ts |
Adds tests for dark-theme class behavior. |
workspaces/topology/plugins/topology/src/components/Topology/TopologyComponent.tsx |
Uses the new dark-theme hook and keeps stylesheet relocation logic. |
workspaces/topology/plugins/topology/src/components/Topology/TopologyComponent.test.tsx |
Updates tests to mock the new dark-theme hook. |
workspaces/topology/plugins/topology/src/components/Topology/TopologyEmptyState.tsx |
Replaces MUI topology icon with Remix icon. |
workspaces/topology/plugins/topology/src/components/Topology/TopologyErrorPanel.tsx |
Replaces MUI Typography with Backstage UI Text. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/TopologySideBarHeading.tsx |
Replaces MUI Typography with Backstage UI Text. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/TopologySideBarContent.tsx |
Replaces MUI Divider with styled <hr>. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/TopologySideBarContent.module.css |
Adds divider styling. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/TopologySideBarBody.tsx |
Replaces MUI Tabs with Backstage UI tabs. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/TopologyResourcesTabPanel.tsx |
Replaces MUI arrow icon with Remix icon. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/TopologyResourcesTabPanel.test.tsx |
Removes obsolete MUI styling mock. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PLRlist.test.tsx |
Removes obsolete MUI styling mock. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogs.tsx |
Replaces MUI Paper/Skeleton with Backstage UI/CSS module styling. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogs.module.css |
Adds log container and skeleton styling. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDownload.tsx |
Replaces MUI icon button with Backstage UI Button and Remix icon. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDownload.test.tsx |
Removes obsolete MUI button/icon mocks. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.tsx |
Replaces MUI dialog layout with Backstage UI dialog components. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.test.tsx |
Updates dialog tests to mock Backstage UI components. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.module.css |
Adds dialog header and permission wrapper styling. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/ContainerSelector.tsx |
Replaces MUI Select with PatternFly Select. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/ContainerSelector.test.tsx |
Updates selector tests for PatternFly interaction. |
workspaces/topology/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/ContainerSelector.module.css |
Adds selector spacing and toggle sizing. |
workspaces/topology/plugins/topology/src/components/Topology/permissions/MissingPermissionPage.tsx |
Replaces MUI layout/components with Backstage UI and CSS modules. |
workspaces/topology/plugins/topology/src/components/Topology/permissions/MissingPermissionPage.module.css |
Adds missing-permission page layout styling. |
workspaces/topology/plugins/topology/src/components/Graph/VMNode.tsx |
Replaces MUI makeStyles with CSS module styling. |
workspaces/topology/plugins/topology/src/components/Graph/VMNode.module.css |
Adds VM node background styling. |
workspaces/topology/plugins/topology/src/components/common/Status.tsx |
Replaces MUI icons/styles with Remix icons and CSS modules. |
workspaces/topology/plugins/topology/src/components/common/Status.module.css |
Adds status icon sizing and color styles. |
workspaces/topology/plugins/topology/src/components/common/StatusIconAndText.tsx |
Replaces MUI Typography/styles with Backstage UI Text and CSS modules. |
workspaces/topology/plugins/topology/src/components/common/StatusIconAndText.module.css |
Adds status icon/text layout styling. |
workspaces/topology/packages/app/package.json |
Replaces app MUI icon/core dependencies with Remix icons. |
workspaces/topology/packages/app/src/components/search/SearchPage.tsx |
Replaces MUI Grid/Paper/styles with Backstage UI and CSS modules. |
workspaces/topology/packages/app/src/components/search/SearchPage.module.css |
Adds search page card/filter styling. |
workspaces/topology/packages/app/src/components/Root/Root.tsx |
Replaces MUI sidebar icons/styles with Remix-based icons and inline logo styles. |
workspaces/topology/packages/app/src/components/Root/LogoIcon.tsx |
Replaces MUI makeStyles with CSS module styling. |
workspaces/topology/packages/app/src/components/Root/LogoIcon.module.css |
Adds logo icon styling. |
workspaces/topology/packages/app/src/components/Root/LogoFull.tsx |
Replaces MUI makeStyles with CSS module styling. |
workspaces/topology/packages/app/src/components/Root/LogoFull.module.css |
Adds full logo styling. |
workspaces/topology/packages/app/src/components/icons.tsx |
Adds Remix icon wrappers for sidebar usage. |
workspaces/topology/packages/app/src/components/catalog/EntityPage.tsx |
Replaces MUI Grid/Button usage with Backstage UI/CSS grid. |
workspaces/topology/packages/app/src/components/catalog/EntityPage.module.css |
Adds catalog entity page grid styling. |
workspaces/topology/.changeset/green-peas-marry.md |
Documents the topology UI migration as a patch change. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+19
to
+20
| jest.mock('@material-ui/core/styles', () => { | ||
| const actual = jest.requireActual('@material-ui/core/styles'); |
| return () => subscription.unsubscribe(); | ||
| }, [appThemeApi]); | ||
|
|
||
| const isDark = activeThemeId === THEME_DARK; |
Comment on lines
+43
to
+50
| useLayoutEffect(() => { | ||
| const htmlTagElement = document.documentElement; | ||
| if (isDark) { | ||
| htmlTagElement.classList.add(THEME_DARK_CLASS); | ||
| } else { | ||
| htmlTagElement.classList.remove(THEME_DARK_CLASS); | ||
| } | ||
| }, [isDark]); |
debsmita1
requested changes
May 28, 2026
Contributor
debsmita1
left a comment
debsmita1
left a comment
There was a problem hiding this comment.
Do you see the Divider between the Tabs and tab content
It is missing after migration
Screen.Recording.2026-05-28.at.11.51.08.PM.mov
also, the pod running status icon and text alignment look off
Signed-off-by: Yi Cai <yicai@redhat.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey, I just made a Pull Request!
✔️ Checklist
Signed-off-byline in the message. (more info)Screen recording(updated on 5/28)
rhidp_14025.mp4