Uploaded image for project: 'Red Hat Internal Developer Platform'
  1. Red Hat Internal Developer Platform
  2. RHIDP-4863

UI issues of Topology plugin running on RHDH

Create Doc EPIC for Fe...Prepare for Y ReleasePrepare for Z ReleaseXMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Done
    • Icon: Normal Normal
    • None
    • None
    • Topology plugin
    • None
    • 1
    • False
    • Hide

      None

      Show
      None
    • False
    • RHDH F&UI plugins 3266

      Description of problem:

      There are a few UI issues about @backstage-community/plugin-topology running on backstage-showcase.

      1. On side panel, tabs missing padding
      2. 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

      1. On latest backstage-showcase main branch, enable topology plugin and start the app locally
      2. Add a catalog with kubernetes resources
      3. 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):

              yicai@redhat.com Yi Cai
              yicai@redhat.com Yi Cai
              RHIDP - Frontend Plugins & UI
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved: