From 43013c576a78f7d43535fae588171eafa2f8a7d8 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Mon, 1 Feb 2021 10:49:55 +0200 Subject: [PATCH 1/3] feat(style-theme): add support for custom superset themes --- superset-frontend/src/SqlLab/App.jsx | 5 +++-- superset-frontend/src/addSlice/App.tsx | 5 +++-- superset-frontend/src/dashboard/App.jsx | 5 +++-- superset-frontend/src/explore/App.jsx | 5 +++-- superset-frontend/src/preamble.ts | 8 +++++++- superset-frontend/src/profile/App.tsx | 6 +++--- superset-frontend/src/views/App.tsx | 5 +++-- superset-frontend/src/views/menu.tsx | 5 +++-- superset/config.py | 22 ++++++++++++++++++++-- superset/views/base.py | 1 + 10 files changed, 49 insertions(+), 18 deletions(-) diff --git a/superset-frontend/src/SqlLab/App.jsx b/superset-frontend/src/SqlLab/App.jsx index 10f1e51bb38c9..7f2fcf12144f9 100644 --- a/superset-frontend/src/SqlLab/App.jsx +++ b/superset-frontend/src/SqlLab/App.jsx @@ -21,7 +21,7 @@ import { createStore, compose, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import { hot } from 'react-hot-loader/root'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import { initFeatureFlags, isFeatureEnabled, @@ -41,6 +41,7 @@ import setupApp from '../setup/setupApp'; import './main.less'; import '../../stylesheets/reactable-pagination.less'; import '../components/FilterableTable/FilterableTableStyles.less'; +import { customTheme } from '../preamble'; setupApp(); @@ -109,7 +110,7 @@ if (sqlLabMenu) { const Application = () => ( - + diff --git a/superset-frontend/src/addSlice/App.tsx b/superset-frontend/src/addSlice/App.tsx index 1e57e171858d8..d156a6f7b1258 100644 --- a/superset-frontend/src/addSlice/App.tsx +++ b/superset-frontend/src/addSlice/App.tsx @@ -18,12 +18,13 @@ */ import React from 'react'; import { hot } from 'react-hot-loader/root'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import { DynamicPluginProvider } from '../components/DynamicPlugins'; import AddSliceContainer from './AddSliceContainer'; import { initFeatureFlags } from '../featureFlags'; +import { customTheme } from '../preamble'; setupApp(); setupPlugins(); @@ -36,7 +37,7 @@ const bootstrapData = JSON.parse( initFeatureFlags(bootstrapData.common.feature_flags); const App = () => ( - + diff --git a/superset-frontend/src/dashboard/App.jsx b/superset-frontend/src/dashboard/App.jsx index 336473a64c8d3..2bcdd1410078c 100644 --- a/superset-frontend/src/dashboard/App.jsx +++ b/superset-frontend/src/dashboard/App.jsx @@ -19,13 +19,14 @@ import { hot } from 'react-hot-loader/root'; import React from 'react'; import { Provider } from 'react-redux'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DynamicPluginProvider } from 'src/components/DynamicPlugins'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import DashboardContainer from './containers/Dashboard'; +import { customTheme } from '../preamble'; setupApp(); setupPlugins(); @@ -33,7 +34,7 @@ setupPlugins(); const App = ({ store }) => ( - + diff --git a/superset-frontend/src/explore/App.jsx b/superset-frontend/src/explore/App.jsx index f0a3db4fe3f3d..a6eb1bc211c83 100644 --- a/superset-frontend/src/explore/App.jsx +++ b/superset-frontend/src/explore/App.jsx @@ -21,7 +21,7 @@ import { hot } from 'react-hot-loader/root'; import { Provider } from 'react-redux'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import { DynamicPluginProvider } from 'src/components/DynamicPlugins'; import ToastPresenter from '../messageToasts/containers/ToastPresenter'; import ExploreViewContainer from './components/ExploreViewContainer'; @@ -29,6 +29,7 @@ import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import './main.less'; import '../../stylesheets/reactable-pagination.less'; +import { customTheme } from '../preamble'; setupApp(); setupPlugins(); @@ -36,7 +37,7 @@ setupPlugins(); const App = ({ store }) => ( - + diff --git a/superset-frontend/src/preamble.ts b/superset-frontend/src/preamble.ts index 5564f5b44e97a..42983dbce5a37 100644 --- a/superset-frontend/src/preamble.ts +++ b/superset-frontend/src/preamble.ts @@ -19,8 +19,9 @@ import { setConfig as setHotLoaderConfig } from 'react-hot-loader'; import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'; import moment from 'moment'; -import { configure } from '@superset-ui/core'; +import { configure, supersetTheme } from '@superset-ui/core'; import ColorScheme from '@superset-ui/core/lib/color/ColorScheme'; +import { merge } from 'lodash'; import setupClient from './setup/setupClient'; import setupColors from './setup/setupColors'; import setupFormatters from './setup/setupFormatters'; @@ -74,3 +75,8 @@ setupColors(extraCategoricalColorSchemes, extraSequentialColorSchemes); // Setup number formatters setupFormatters(); + +export const customTheme = merge( + supersetTheme, + bootstrapData?.common?.custom_theme ?? {}, +); diff --git a/superset-frontend/src/profile/App.tsx b/superset-frontend/src/profile/App.tsx index 8fe5754dd0228..f95205ed81306 100644 --- a/superset-frontend/src/profile/App.tsx +++ b/superset-frontend/src/profile/App.tsx @@ -21,13 +21,13 @@ 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 { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import App from './components/App'; import messageToastReducer from '../messageToasts/reducers'; import { initEnhancer } from '../reduxUtils'; import setupApp from '../setup/setupApp'; - import './main.less'; +import { customTheme } from '../preamble'; setupApp(); @@ -46,7 +46,7 @@ const store = createStore( const Application = () => ( - + diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx index 3d45d261af7dc..7f365fa0b551a 100644 --- a/superset-frontend/src/views/App.tsx +++ b/superset-frontend/src/views/App.tsx @@ -24,7 +24,7 @@ import { Provider as ReduxProvider } from 'react-redux'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { QueryParamProvider } from 'use-query-params'; import { initFeatureFlags } from 'src/featureFlags'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import { DynamicPluginProvider } from 'src/components/DynamicPlugins'; import ErrorBoundary from 'src/components/ErrorBoundary'; import Menu from 'src/components/Menu/Menu'; @@ -47,6 +47,7 @@ import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import Welcome from './CRUD/welcome/Welcome'; import ToastPresenter from '../messageToasts/containers/ToastPresenter'; +import { customTheme } from '../preamble'; setupApp(); setupPlugins(); @@ -68,7 +69,7 @@ const store = createStore( const App = () => ( - + diff --git a/superset-frontend/src/views/menu.tsx b/superset-frontend/src/views/menu.tsx index 63a920327b314..5ac8686970fd6 100644 --- a/superset-frontend/src/views/menu.tsx +++ b/superset-frontend/src/views/menu.tsx @@ -18,15 +18,16 @@ */ import React from 'react'; import ReactDOM from 'react-dom'; -import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { ThemeProvider } from '@superset-ui/core'; import Menu from 'src/components/Menu/Menu'; +import { customTheme } from '../preamble'; const container = document.getElementById('app'); const bootstrapJson = container?.getAttribute('data-bootstrap') ?? '{}'; const bootstrap = JSON.parse(bootstrapJson); const menu = { ...bootstrap.common.menu_data }; const app = ( - + ); diff --git a/superset/config.py b/superset/config.py index d7c8d5ef86802..35703f2fb75b1 100644 --- a/superset/config.py +++ b/superset/config.py @@ -373,7 +373,7 @@ def _try_json_readsha( # pylint: disable=unused-argument # EXTRA_CATEGORICAL_COLOR_SCHEMES is used for adding custom categorical color schemes # example code for "My custom warm to hot" color scheme -# EXTRA_CATEGORICAL_COLOR_SCHEMES = [ +# EXTRA_CATEGORICAL_COLOR_SCHEMES = [ # { # "id": 'myVisualizationColors', # "description": '', @@ -382,11 +382,29 @@ def _try_json_readsha( # pylint: disable=unused-argument # ['#006699', '#009DD9', '#5AAA46', '#44AAAA', '#DDAA77', '#7799BB', '#88AA77', # '#552288', '#5AAA46', '#CC7788', '#EEDD55', '#9977BB', '#BBAA44', '#DDCCDD'] # }] -# # This is merely a default EXTRA_CATEGORICAL_COLOR_SCHEMES: List[Dict[str, Any]] = [] +# CUSTOM_THEME is used for adding custom theme to superset +# example code for "My theme" custom scheme +# CUSTOM_THEME = { +# "borderRadius": 4, +# "colors": { +# "primary": { +# "base": 'red', +# }, +# "secondary": { +# "base": 'green', +# }, +# "grayscale": { +# "base": 'orange', +# } +# } +# } + +CUSTOM_THEME = {} + # EXTRA_SEQUENTIAL_COLOR_SCHEMES is used for adding custom sequential color schemes # EXTRA_SEQUENTIAL_COLOR_SCHEMES = [ # { diff --git a/superset/views/base.py b/superset/views/base.py index 267bdb8ab614f..8602e0b617747 100644 --- a/superset/views/base.py +++ b/superset/views/base.py @@ -322,6 +322,7 @@ def common_bootstrap_payload() -> Dict[str, Any]: "feature_flags": get_feature_flags(), "extra_sequential_color_schemes": conf["EXTRA_SEQUENTIAL_COLOR_SCHEMES"], "extra_categorical_color_schemes": conf["EXTRA_CATEGORICAL_COLOR_SCHEMES"], + "custom_theme": conf["CUSTOM_THEME"], "menu_data": menu_data(), } From 026907c452b648f009f34af923e42448193a40d9 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Mon, 1 Feb 2021 11:26:42 +0200 Subject: [PATCH 2/3] refactor: update var names --- superset-frontend/src/preamble.ts | 2 +- superset/config.py | 6 +++--- superset/views/base.py | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/superset-frontend/src/preamble.ts b/superset-frontend/src/preamble.ts index 42983dbce5a37..27568ef4a9def 100644 --- a/superset-frontend/src/preamble.ts +++ b/superset-frontend/src/preamble.ts @@ -78,5 +78,5 @@ setupFormatters(); export const customTheme = merge( supersetTheme, - bootstrapData?.common?.custom_theme ?? {}, + bootstrapData?.common?.theme_overrides ?? {}, ); diff --git a/superset/config.py b/superset/config.py index 35703f2fb75b1..f320f2df3c4bb 100644 --- a/superset/config.py +++ b/superset/config.py @@ -386,9 +386,9 @@ def _try_json_readsha( # pylint: disable=unused-argument # This is merely a default EXTRA_CATEGORICAL_COLOR_SCHEMES: List[Dict[str, Any]] = [] -# CUSTOM_THEME is used for adding custom theme to superset +# THEME_OVERRIDES is used for adding custom theme to superset # example code for "My theme" custom scheme -# CUSTOM_THEME = { +# THEME_OVERRIDES = { # "borderRadius": 4, # "colors": { # "primary": { @@ -403,7 +403,7 @@ def _try_json_readsha( # pylint: disable=unused-argument # } # } -CUSTOM_THEME = {} +THEME_OVERRIDES: Dict[str, Any] = {} # EXTRA_SEQUENTIAL_COLOR_SCHEMES is used for adding custom sequential color schemes # EXTRA_SEQUENTIAL_COLOR_SCHEMES = [ diff --git a/superset/views/base.py b/superset/views/base.py index 8602e0b617747..69c9383ffccc1 100644 --- a/superset/views/base.py +++ b/superset/views/base.py @@ -322,7 +322,7 @@ def common_bootstrap_payload() -> Dict[str, Any]: "feature_flags": get_feature_flags(), "extra_sequential_color_schemes": conf["EXTRA_SEQUENTIAL_COLOR_SCHEMES"], "extra_categorical_color_schemes": conf["EXTRA_CATEGORICAL_COLOR_SCHEMES"], - "custom_theme": conf["CUSTOM_THEME"], + "theme_overrides": conf["THEME_OVERRIDES"], "menu_data": menu_data(), } From 008d2d2623cc40a0994fcbd513c7d4eaa85ecad6 Mon Sep 17 00:00:00 2001 From: Simcha Shats Date: Mon, 1 Feb 2021 12:58:15 +0200 Subject: [PATCH 3/3] refactor: update name of theme --- superset-frontend/src/SqlLab/App.jsx | 4 ++-- superset-frontend/src/addSlice/App.tsx | 4 ++-- superset-frontend/src/dashboard/App.jsx | 4 ++-- superset-frontend/src/explore/App.jsx | 4 ++-- superset-frontend/src/preamble.ts | 2 +- superset-frontend/src/profile/App.tsx | 4 ++-- superset-frontend/src/views/App.tsx | 4 ++-- superset-frontend/src/views/menu.tsx | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/superset-frontend/src/SqlLab/App.jsx b/superset-frontend/src/SqlLab/App.jsx index 7f2fcf12144f9..82132b79be8bf 100644 --- a/superset-frontend/src/SqlLab/App.jsx +++ b/superset-frontend/src/SqlLab/App.jsx @@ -41,7 +41,7 @@ import setupApp from '../setup/setupApp'; import './main.less'; import '../../stylesheets/reactable-pagination.less'; import '../components/FilterableTable/FilterableTableStyles.less'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; setupApp(); @@ -110,7 +110,7 @@ if (sqlLabMenu) { const Application = () => ( - + diff --git a/superset-frontend/src/addSlice/App.tsx b/superset-frontend/src/addSlice/App.tsx index d156a6f7b1258..9602670a08902 100644 --- a/superset-frontend/src/addSlice/App.tsx +++ b/superset-frontend/src/addSlice/App.tsx @@ -24,7 +24,7 @@ import setupPlugins from '../setup/setupPlugins'; import { DynamicPluginProvider } from '../components/DynamicPlugins'; import AddSliceContainer from './AddSliceContainer'; import { initFeatureFlags } from '../featureFlags'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; setupApp(); setupPlugins(); @@ -37,7 +37,7 @@ const bootstrapData = JSON.parse( initFeatureFlags(bootstrapData.common.feature_flags); const App = () => ( - + diff --git a/superset-frontend/src/dashboard/App.jsx b/superset-frontend/src/dashboard/App.jsx index 2bcdd1410078c..da06a0130fa31 100644 --- a/superset-frontend/src/dashboard/App.jsx +++ b/superset-frontend/src/dashboard/App.jsx @@ -26,7 +26,7 @@ import { DynamicPluginProvider } from 'src/components/DynamicPlugins'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import DashboardContainer from './containers/Dashboard'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; setupApp(); setupPlugins(); @@ -34,7 +34,7 @@ setupPlugins(); const App = ({ store }) => ( - + diff --git a/superset-frontend/src/explore/App.jsx b/superset-frontend/src/explore/App.jsx index a6eb1bc211c83..e7973fe91f479 100644 --- a/superset-frontend/src/explore/App.jsx +++ b/superset-frontend/src/explore/App.jsx @@ -29,7 +29,7 @@ import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import './main.less'; import '../../stylesheets/reactable-pagination.less'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; setupApp(); setupPlugins(); @@ -37,7 +37,7 @@ setupPlugins(); const App = ({ store }) => ( - + diff --git a/superset-frontend/src/preamble.ts b/superset-frontend/src/preamble.ts index 27568ef4a9def..e92ffb2527e1f 100644 --- a/superset-frontend/src/preamble.ts +++ b/superset-frontend/src/preamble.ts @@ -76,7 +76,7 @@ setupColors(extraCategoricalColorSchemes, extraSequentialColorSchemes); // Setup number formatters setupFormatters(); -export const customTheme = merge( +export const theme = merge( supersetTheme, bootstrapData?.common?.theme_overrides ?? {}, ); diff --git a/superset-frontend/src/profile/App.tsx b/superset-frontend/src/profile/App.tsx index f95205ed81306..8774d63aeb5a5 100644 --- a/superset-frontend/src/profile/App.tsx +++ b/superset-frontend/src/profile/App.tsx @@ -27,7 +27,7 @@ import messageToastReducer from '../messageToasts/reducers'; import { initEnhancer } from '../reduxUtils'; import setupApp from '../setup/setupApp'; import './main.less'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; setupApp(); @@ -46,7 +46,7 @@ const store = createStore( const Application = () => ( - + diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx index 7f365fa0b551a..b0c54fe30a93e 100644 --- a/superset-frontend/src/views/App.tsx +++ b/superset-frontend/src/views/App.tsx @@ -47,7 +47,7 @@ import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import Welcome from './CRUD/welcome/Welcome'; import ToastPresenter from '../messageToasts/containers/ToastPresenter'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; setupApp(); setupPlugins(); @@ -69,7 +69,7 @@ const store = createStore( const App = () => ( - + diff --git a/superset-frontend/src/views/menu.tsx b/superset-frontend/src/views/menu.tsx index 5ac8686970fd6..887b5b76d4dde 100644 --- a/superset-frontend/src/views/menu.tsx +++ b/superset-frontend/src/views/menu.tsx @@ -20,14 +20,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider } from '@superset-ui/core'; import Menu from 'src/components/Menu/Menu'; -import { customTheme } from '../preamble'; +import { theme } from '../preamble'; const container = document.getElementById('app'); const bootstrapJson = container?.getAttribute('data-bootstrap') ?? '{}'; const bootstrap = JSON.parse(bootstrapJson); const menu = { ...bootstrap.common.menu_data }; const app = ( - + );