feat: Add antd to the codebase

[nruhe]

SUMMARY

Introduces Ant Design as per SIP-48, albeit with a few improvements.

1. Wrapping ant components in a config provider or ".ant" class will no longer be necessary. Just use Ant components directly!
2. Components are now being exposed through ./common/components folder and linting now errors if you try to include them via node_modules. This gives us the flexibility to later wrap any components in emotionJS as per SIP-37.

As a follow up, we'll need to continue to tweak the Ant theme variables and styles as needed to match new design direction.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[suddjian]

🔥

[rusackas]

👏

[rusackas]

These colors should be pulled from variables.less rather than being hard-coded here.

[rusackas]

Or better yet, we could pull these variables in via JS using something like this or (perhaps less ideal, but easier) this.

[suddjian]

Yeah, finding a single-source solution to this will make a big difference for custom themes, or switching light and dark mode. I think ideally these variables would be set at runtime, not at build time.

[mistercrunch]

referencing variables.less is a good first step

[nruhe]

I'm a little concerned with including that file directly since we might unintentionally overwrite variables we don't mean to. If we want to do this right, there should be a constants file that sources the common values used in the theme variables.

E.g.

// In constants.less
@superset-color-primary = #20a7c9;

// In variables.less
@primary-color = @superset-color-primary;

// In antd.less
@primary-color = @superset-color-primary;

[ktmud]

variables.less is kind of bloated right now and it's difficult to distinguish between our custom variables and the Bootstrap/Cosmos ones. I'm also worried that adding ant variables to this file may create a mess.

I think a larger question is do we want to keep less in our stack or do we want to slowly migrate away from it? The larger frontend community seems to have been favoring PostCSS, CSS variables, and CSS-in-JS recently. If we also believe these technologies are the future, we should probably limit our use of less to creating a base theme at build-time, and add runtime theme overrides using only styled components or css variables.

[nytai]

closing/reopening to see if it triggers CI