refactor: import emotion-theming methods from @superset-ui/style

[ktmud]

SUMMARY

This makes the code cleaner and fixes missing theme variables when npm link @superset-ui/style.

Webpack somehow has independent namespaces for regular JS modules and those in soft-linked node_modules, so import { styled } from '@superset-ui/style' and import { ThemeProvider } from 'emotion-theming will access different cached themes.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

N/A

TEST PLAN

Manual testing, expect styled components used theme variables correctly load when npm link ~/projects/superset-ui/packages/superset-ui-style and npm run dev

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

[codecov-commenter]

Codecov Report

Merging #10157 into master will increase coverage by 0.00%.
The diff coverage is 50.00%.

@@           Coverage Diff           @@
##           master   #10157   +/-   ##
=======================================
  Coverage   70.50%   70.50%           
=======================================
  Files         594      594           
  Lines       31391    31389    -2     
  Branches     3215     3215           
=======================================
- Hits        22131    22130    -1     
+ Misses       9144     9143    -1     
  Partials      116      116           

Flag	Coverage Δ
#cypress	53.48% <ø> (-0.01%)	⬇️
#javascript	59.64% <50.00%> (+<0.01%)	⬆️
#python	70.29% <ø> (ø)

Impacted Files	Coverage Δ
superset-frontend/src/SqlLab/App.jsx	100.00% <ø> (ø)
superset-frontend/src/SqlLab/components/App.jsx	77.77% <ø> (ø)
superset-frontend/src/addSlice/App.tsx	0.00% <0.00%> (ø)
superset-frontend/src/dashboard/App.jsx	100.00% <ø> (ø)
superset-frontend/src/explore/App.jsx	100.00% <ø> (ø)
superset-frontend/src/profile/App.jsx	0.00% <ø> (ø)
superset-frontend/src/welcome/App.jsx	0.00% <ø> (ø)
...erset-frontend/src/components/ListView/Filters.tsx	71.87% <100.00%> (-0.44%)	⬇️
.../src/dashboard/components/gridComponents/Chart.jsx	88.76% <0.00%> (-1.13%)	⬇️
...set-frontend/src/views/datasetList/DatasetList.tsx	69.04% <0.00%> (+0.79%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7a794ed...52eba38. Read the comment docs.

[rusackas]

@lilykuang

[rusackas]

Haven't run it locally yet (I will) but it seems perfectly sensible to me.

[lilykuang]

I pulled the branch and tried it out. everything works nicely 👍