From 83d838a035e403853c5744dc9d42b829dc8cccae Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 20 May 2020 12:43:02 -0700 Subject: [PATCH] feat: Adding Emotion ThemeProviders for all React apps (#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-lock.json | 92 +++++++++---------- superset-frontend/package.json | 2 +- superset-frontend/src/SqlLab/App.jsx | 7 +- .../src/SqlLab/components/App.jsx | 13 ++- superset-frontend/src/addSlice/App.jsx | 8 +- .../src/components/Select/styles.tsx | 2 +- superset-frontend/src/dashboard/App.jsx | 6 +- superset-frontend/src/explore/App.jsx | 13 ++- superset-frontend/src/profile/App.jsx | 7 +- 9 files changed, 86 insertions(+), 64 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 82099775f45b..6db782c236aa 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -7177,9 +7177,9 @@ "integrity": "sha512-wJvqXuzv9vJNxDPKNAaHzCCly7LF8UP9AQ1zdoA88QcfYJqCzNvbt3j8XSR4nABrvNVZHnsn67wQNG4HS/IPpQ==" }, "@superset-ui/style": { - "version": "0.13.3", - "resolved": "https://registry.npmjs.org/@superset-ui/style/-/style-0.13.3.tgz", - "integrity": "sha512-RU+9eVL3ebAe0OIcM3MFLY1beHuwRjWQCQvOjYFTyNRTF/wFlToAfp/5PJcxrLRHvfy4mKZfSkypMkvvsSfD2A==", + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/@superset-ui/style/-/style-0.13.11.tgz", + "integrity": "sha512-Zwj5UrL1CCJ1mVZDHGw89G0ghaZWXHHjqRPrJp9IuNFLOVrKi8LfA6Y9perXQq9B0gnPYLG3NRjfgXQj03Q4kw==", "requires": { "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27" @@ -10396,28 +10396,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", + "resolved": false, "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -10428,14 +10428,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -10446,28 +10446,28 @@ }, "code-point-at": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true @@ -10484,35 +10484,35 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -10544,14 +10544,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "resolved": false, "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -10571,7 +10571,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -10589,14 +10589,14 @@ }, "ini": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -10606,14 +10606,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -10697,7 +10697,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -10710,21 +10710,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -10734,21 +10734,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -10759,7 +10759,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true @@ -10773,7 +10773,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -10812,21 +10812,21 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true @@ -10840,21 +10840,21 @@ }, "set-blocking": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -10866,7 +10866,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": false, "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -10876,7 +10876,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -10886,21 +10886,21 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "util-deprecate": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "resolved": false, "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", + "resolved": false, "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -10910,7 +10910,7 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 5d8b229218b2..c751873a49ea 100644 --- a/superset-frontend/package.json +++ b/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", diff --git a/superset-frontend/src/SqlLab/App.jsx b/superset-frontend/src/SqlLab/App.jsx index 0b3cbbbd58f9..1a2634b5c41d 100644 --- a/superset-frontend/src/SqlLab/App.jsx +++ b/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 = () => ( - + + + ); diff --git a/superset-frontend/src/SqlLab/components/App.jsx b/superset-frontend/src/SqlLab/components/App.jsx index 9cbf1d340fa2..ab189ebd7225 100644 --- a/superset-frontend/src/SqlLab/components/App.jsx +++ b/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 ( -
- {content} - -
+ +
+ {content} + +
+ ); } } diff --git a/superset-frontend/src/addSlice/App.jsx b/superset-frontend/src/addSlice/App.jsx index f577e966a0f0..9769ddcd9d51 100644 --- a/superset-frontend/src/addSlice/App.jsx +++ b/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 = () => ; +const App = () => ( + + + +); export default hot(App); diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx index 795e9a60aa3a..22b65b407e98 100644 --- a/superset-frontend/src/components/Select/styles.tsx +++ b/superset-frontend/src/components/Select/styles.tsx @@ -62,7 +62,7 @@ export type ThemeConfig = { export type PartialThemeConfig = RecursivePartial; export const DEFAULT_THEME: PartialThemeConfig = { - borderRadius: parseInt(supersetTheme.borderRadius, 10), + borderRadius: supersetTheme.borderRadius, zIndex: 11, colors: { ...supersetColors, diff --git a/superset-frontend/src/dashboard/App.jsx b/superset-frontend/src/dashboard/App.jsx index baadcfcb9600..bf32224214c3 100644 --- a/superset-frontend/src/dashboard/App.jsx +++ b/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 }) => ( - + + + ); diff --git a/superset-frontend/src/explore/App.jsx b/superset-frontend/src/explore/App.jsx index 1f9adc4d2b94..1d8ca96feb09 100644 --- a/superset-frontend/src/explore/App.jsx +++ b/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 }) => ( -
- - -
+ +
+ + +
+ ); diff --git a/superset-frontend/src/profile/App.jsx b/superset-frontend/src/profile/App.jsx index e021cfc2f64a..1624ccb4a79f 100644 --- a/superset-frontend/src/profile/App.jsx +++ b/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 = () => ( - + + + );