chore(AntD5): touchup on component imports/exports, theming ListViewCard

[rusackas]

SUMMARY

This component simplifies some component imports/exports, making it so that ONLY the Superset components use the base AntD components. We should be consolidating on Superset-wrapped AntD components whenever/wherever possible and relevant.

Also, this styles the ListViewCard to inherit the AntD theme "tokens" for the "Card" and adds a pattern to override them when necessary (rather than getting into granular CSS, which adds complexity and might cause future upgrade problems).

It also adds an AntD theme provider in Storybook, so all components will automatically be handed the theme.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Tested these components in Storybook and compared to the public storybook on master..

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[rusackas]

Using the Superset card now 🎉

[rusackas]

Ugh... I don't know how much we need any of this. But that seems like an exploration for another PR. We should probably make the main Button component more robust (i.e. use props) rather than overriding styles here.

[geido]

Suggested change

	// 'border-radius': `${theme.gridUnit}px`,
	border: `1px solid ${theme.colors.grayscale.light2}`,

[rusackas]

Oh, actually, there's probably a token we should be using for this!

[geido]

This will always override the Card theme though. If we wanted a dark theme in the future, this would always be forced to supersetTheme.colors.grayscale.light5. So I guess we go back to considering the theme in Superset to be the controller, so that supersetTheme.colors.grayscale.light5 will need to be changed to something that works on a dark theme, which begs the question "Will this work everywhere?". Hardly so, as there is no specification as of where light5 should be used in the design system I think.

[geido]

However, this is still better than custom styles as we will likely be targeting class names which should be more sensible to changes than theme configs.

[rusackas]

Agreed... using this config provider here is specifically to append/override styles for that instance of the Card component. Other Cards higher up in the React/DOM tree will be left alone.

I agree that light4 is going to be problematic, as sometimes that would actually be a dark color needed. Part of the theming SIP is to add "surface" colors (if I'm remembering the name right) and foreground/text colors, which would be more context-based and less shade-based. We'll have to replace these in a million places in the codebase, but doing it on AntD tokens will be a whole lot easier than doing it in CSS style overrides.

[rusackas]

@dosu-bot any idea why my tests are failing? I get this kind of error several times:

FAIL src/pages/DashboardList/DashboardList.test.jsx
  ● Test suite failed to run

    Domain `undefined` was not found.

      87 |
      [88](https://github.com/apache/superset/actions/runs/10097447336/job/27922326057?pr=29545#step:13:89) |   translate(input: string, ...args: unknown[]): string {
    > [89](https://github.com/apache/superset/actions/runs/10097447336/job/27922326057?pr=29545#step:13:90) |     return this.i18n.translate(input).fetch(...args);
         |                                       ^
      [90](https://github.com/apache/superset/actions/runs/10097447336/job/27922326057?pr=29545#step:13:91) |   }
      91 |
      92 |   translateWithNumber(key: string, ...args: unknown[]): string {

      at Jed.dcnpgettext (node_modules/jed/jed.js:249:15)
      at Chain.fetch (node_modules/jed/jed.js:148:20)
      at Translator.fetch [as translate] (packages/superset-ui-core/src/translation/Translator.ts:89:39)
      at translate (packages/superset-ui-core/src/translation/TranslatorSingleton.ts:67:24)
      at Object.<anonymous> (src/pages/DashboardList/index.tsx:73:35)
      at Object.require (src/pages/DashboardList/DashboardList.test.jsx:34:1)

[kgabryje]

Can we use full gridUnits and drop that Math.trunc?

[rusackas]

This already got merged (agian) elsewhere...

If you search (using vscode) for gridUnit\s*\*\s*\d+\.\d+ you'll see a whole swath of these that need cleanup. Seems like a good rainy-day PR, and (hopefully) a listing rule could be added.