-
Bug
-
Resolution: Done
-
Normal
-
None
-
None
-
None
-
1
-
False
-
-
False
-
-
-
RHDH F&UI plugins 3266
Description of problem:
There are a few UI issues about @backstage-community/plugin-topology running on backstage-showcase.
- On side panel, tabs missing padding
- In light mode, if you navigate away from topology tab and navigate back to the topology tab, the topology base node icon text is black instead of white, and on side panel, Resources tab, status(Running) span has gray background color
For example, same `Resources` tab button have different classnames:
In BCP:
```
<button class="v5-MuiButtonBase-root v5-MuiTab-root v5-MuiTab-textColorPrimary tab-button css-snvxmv-MuiButtonBase-root-MuiTab-root" ..
```
In backstage-showcase:
```
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected tab-button css-xjxk3d" ..
```
Possible causes to consider:
1. @backstage-community/plugin-topology is migrated to Mui v5, but backstage-showcase still uses @redhat-developer/red-hat-developer-hub-theme which is on Mui v4
2. Styles defined in CSS files are being overridden by styles defined in the dependency "@patternfly/react-topology"
Prerequisites (if any, like setup, operators/versions):
Steps to Reproduce
- On latest backstage-showcase main branch, enable topology plugin and start the app locally
- Add a catalog with kubernetes resources
- Go to the entity page, topology tab
Actual results:
Refer attached screenshots
Expected results:
1. Side panel tabs have paddings
2. In dark mode, side panel `Resources` tab, the status doesn't have a gray background
3. Topology base node icon text stays white when switch between dark and light modes.
Reproducibility (Always/Intermittent/Only Once):
Always
Build Details:
Latest backstage-showcase main branch code.
Additional info (Such as Logs, Screenshots, etc):
- is cloned by
-
RHIDP-5022 UI issues of RBAC plugin running on RHDH
-
- Closed
-
- links to