feat: Adding Emotion ThemeProviders for all React apps (apache#9853)

* bumping style package (now with typography styles!)

* ThemeProvider ALL the things!

* package lock

* linting

* no need to parseInt here anymore, the values are numeric now.

superset-frontend/package.json

@@ -94,7 +94,7 @@
     "@superset-ui/plugin-chart-word-cloud": "^0.13.9",
     "@superset-ui/preset-chart-xy": "^0.13.11",
     "@superset-ui/query": "^0.13.6",
-    "@superset-ui/style": "^0.13.3",
+    "@superset-ui/style": "^0.13.11",
     "@superset-ui/time-format": "^0.13.15",
     "@superset-ui/translation": "^0.13.3",
     "@superset-ui/validator": "^0.13.3",

superset-frontend/src/SqlLab/App.jsx

@@ -21,7 +21,8 @@ import { createStore, compose, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import thunkMiddleware from 'redux-thunk';
 import { hot } from 'react-hot-loader/root';
-
+import { ThemeProvider } from 'emotion-theming';
+import { supersetTheme } from '@superset-ui/style';
 import {
   initFeatureFlags,
   isFeatureEnabled,
@@ -109,7 +110,9 @@ if (sqlLabMenu) {
 
 const Application = () => (
   <Provider store={store}>
-    <App />
+    <ThemeProvider theme={supersetTheme}>
+      <App />
+    </ThemeProvider>
   </Provider>
 );
 

superset-frontend/src/SqlLab/components/App.jsx

@@ -23,7 +23,8 @@ import { connect } from 'react-redux';
 import $ from 'jquery';
 import { t } from '@superset-ui/translation';
 import throttle from 'lodash/throttle';
-
+import { ThemeProvider } from 'emotion-theming';
+import { supersetTheme } from '@superset-ui/style';
 import TabbedSqlEditors from './TabbedSqlEditors';
 import QueryAutoRefresh from './QueryAutoRefresh';
 import QuerySearch from './QuerySearch';
@@ -132,10 +133,12 @@ class App extends React.PureComponent {
       );
     }
     return (
-      <div className="App SqlLab">
-        {content}
-        <ToastPresenter />
-      </div>
+      <ThemeProvider theme={supersetTheme}>
+        <div className="App SqlLab">
+          {content}
+          <ToastPresenter />
+        </div>
+      </ThemeProvider>
     );
   }
 }

superset-frontend/src/addSlice/App.jsx

@@ -18,6 +18,8 @@
  */
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
+import { ThemeProvider } from 'emotion-theming';
+import { supersetTheme } from '@superset-ui/style';
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
 import AddSliceContainer from './AddSliceContainer';
@@ -30,6 +32,10 @@ const bootstrapData = JSON.parse(
   addSliceContainer.getAttribute('data-bootstrap'),
 );
 
-const App = () => <AddSliceContainer datasources={bootstrapData.datasources} />;
+const App = () => (
+  <ThemeProvider theme={supersetTheme}>
+    <AddSliceContainer datasources={bootstrapData.datasources} />
+  </ThemeProvider>
+);
 
 export default hot(App);

superset-frontend/src/components/Select/styles.tsx

@@ -62,7 +62,7 @@ export type ThemeConfig = {
 export type PartialThemeConfig = RecursivePartial<ThemeConfig>;
 
 export const DEFAULT_THEME: PartialThemeConfig = {
-  borderRadius: parseInt(supersetTheme.borderRadius, 10),
+  borderRadius: supersetTheme.borderRadius,
   zIndex: 11,
   colors: {
     ...supersetColors,

superset-frontend/src/dashboard/App.jsx

@@ -19,6 +19,8 @@
 import { hot } from 'react-hot-loader/root';
 import React from 'react';
 import { Provider } from 'react-redux';
+import { ThemeProvider } from 'emotion-theming';
+import { supersetTheme } from '@superset-ui/style';
 
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
@@ -29,7 +31,9 @@ setupPlugins();
 
 const App = ({ store }) => (
   <Provider store={store}>
-    <DashboardContainer />
+    <ThemeProvider theme={supersetTheme}>
+      <DashboardContainer />
+    </ThemeProvider>
   </Provider>
 );
 

superset-frontend/src/explore/App.jsx

@@ -19,9 +19,10 @@
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
+import { ThemeProvider } from 'emotion-theming';
+import styled, { supersetTheme } from '@superset-ui/style';
 import ToastPresenter from '../messageToasts/containers/ToastPresenter';
 import ExploreViewContainer from './components/ExploreViewContainer';
-
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
 import './main.less';
@@ -32,10 +33,12 @@ setupPlugins();
 
 const App = ({ store }) => (
   <Provider store={store}>
-    <div>
-      <ExploreViewContainer />
-      <ToastPresenter />
-    </div>
+    <ThemeProvider theme={supersetTheme}>
+      <div>
+        <ExploreViewContainer />
+        <ToastPresenter />
+      </div>
+    </ThemeProvider>
   </Provider>
 );
 

superset-frontend/src/profile/App.jsx

@@ -21,7 +21,8 @@ import { hot } from 'react-hot-loader/root';
 import thunk from 'redux-thunk';
 import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
-
+import { ThemeProvider } from 'emotion-theming';
+import { supersetTheme } from '@superset-ui/style';
 import App from './components/App';
 import messageToastReducer from '../messageToasts/reducers';
 import { initEnhancer } from '../reduxUtils';
@@ -46,7 +47,9 @@ const store = createStore(
 
 const Application = () => (
   <Provider store={store}>
-    <App user={bootstrap.user} />
+    <ThemeProvider theme={supersetTheme}>
+      <App user={bootstrap.user} />
+    </ThemeProvider>
   </Provider>
 );