Redesigned Tech Radar

[evanlankveld]

Hey, I just made a Pull Request!

Implemented the new Tech Radar design as proposed in this RFC. The filter dropdown allows filtering on quadrant and ring, other advanced filters are not included at this time.

Since the frontend of our own Backstage installation runs on Tailwind, the code does not use BUI's layout containers (e.g. Flex, Grid). To prevent the effort of having to implement the radar twice, we chose to simply include a pre-built CSS file with Tailwind's output in the tech-radar plugin. This can be generated by future contributors by running yarn dev:build-css in this workspace.

Aside from using BUI components instead of MUI, it has no breaking changes. Users can upgrade and keep using their same JSON source file.

Screenshots:

✔️ 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)
• All your commits have a Signed-off-by line in the message. (more info)

[awanlin]

Thanks @evanlankveld, I've left a comment about the use of Tailwind, that's a non-starter and needs to be addressed. I really think there must be a way to do this without needing to have/use Tailwind.

I have not reviewed this in detail, wanted to clear this hurdle first.

[awanlin]

Sorry, but this is a non-starter for us. The Design System for Backstage is either Material UI (MUI) for the time being and Backstage UI (BUI) for the long term. The goal of this repo is to reflect plugins that follow the Backstage patterns and conventions. Using Tailwind is not an option here, sorry, I did make an effort to mention this during the SIG where this was presented.

There must be a way to migrate this to work without having Tailwind?

[evanlankveld]

Hey, that is fair. We thought it could perhaps be fine since the plugin does not rely on Tailwind, it's just a mechanism to generate custom CSS. It currently has properties like the following:

className="[&_.bui-SearchFieldInputWrapper]:h-10 max-w-80"

We use Tailwind to generate vanilla CSS from this, which is included in the plugin. I didn't find clear guidelines in BUI's documentation for how custom CSS should be included, is there a convention defined somewhere?

We are willing to work on adjustments to adhere to Backstage patterns, though to what extent is this needed?

1. We can get rid of all Tailwind dependencies / references in the plugin. They only exist now to help future contributors generate the (static) custom CSS, but removing it will have no impact.
2. If that is not enough, we can replace all layout-related custom CSS with BUI's layout containers (e.g. Box, Flex).
3. For other custom CSS in the code, it depends on whether Backstage has a clear convention for how that should be structured. For example, in plugins/tech-radar/src/components/RadarBlip/RadarBlip.tsx we add custom classes to SVG elements which in turn applies some styles from the custom CSS file. If there is no convention, perhaps it doesn't matter how the CSS was originally generated? (read: by Tailwind)