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

Dynamic home page Markdown miss typography styles if Tekton or Topology plugin are loaded

Prepare for Y ReleasePrepare for Z ReleaseRemove QuarterXMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Done
    • Icon: Undefined Undefined
    • None
    • None
    • Dynamic plugins, UI
    • 2
    • False
    • Hide

      None

      Show
      None
    • False

      Description of problem:

      The tekton and topology plugins (maybe others as well) load the PatternFly globally into the browser. These styles include a base.css that resets many styles.

      As a result, the Markdown card of the home page plugin doesn't show any style. Headlines look similar to normal text, and lists don't have numbers or bullet points.

      It might affect other components as well.

      Steps to Reproduce

      1. Enable tekton or topology plugin
      plugins:
        - package: ./dynamic-plugins/dist/backstage-plugin-techdocs
          disabled: false
      
      1. Customize the home page and show some markdown
      dynamicPlugins:
        frontend:
          janus-idp.backstage-plugin-dynamic-home-page:
            mountPoints:
              - mountPoint: home.page/cards
                importName: MarkdownCard
                config:
                  layouts:
                    xl:  { w: 6, h: 4 }
                    lg:  { w: 6, h: 4 }
                    md:  { w: 6, h: 4 }
                    sm:  { w: 6, h: 4 }
                    xs:  { w: 6, h: 4 }
                    xxs: { w: 6, h: 4 }
                  props:
                    title: Company links
                    content: |
                      ### RHDH
                      
                      * [Website](https://developers.redhat.com/rhdh/overview)
                      * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                      * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
                      * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
              - mountPoint: home.page/cards
                importName: Markdown
                config:
                  layouts:
                    xl:  { w: 6, h: 4, x: 6 }
                    lg:  { w: 6, h: 4, x: 6 }
                    md:  { w: 6, h: 4, x: 6 }
                    sm:  { w: 6, h: 4, x: 6 }
                    xs:  { w: 6, h: 4, x: 6 }
                    xxs: { w: 6, h: 4, x: 6 }
                  props:
                    title: Important company links
                    content: |
                      ### RHDH
                      
                      * [Website](https://developers.redhat.com/rhdh/overview)
                      * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                      * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
                      * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
      

      Actual results:

      The markdown headline and bullet points looks similar to normal text.

      Expected results:

      The markdown headline should be displayed as headline and the list should be rendered with bullet points.

      Reproducibility (Always/Intermittent/Only Once):

      Always

      Build Details:

      1.3.0

      Additional info (Such as Logs, Screenshots, etc):

      None

            cjerolim Christoph Jerolimov
            cjerolim Christoph Jerolimov
            RHIDP - Frontend Plugins & UI
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: