From 327c052456c7c4a3aa8e5e90eb2874915d539913 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Wed, 9 Aug 2017 09:52:43 -0700 Subject: [PATCH] [webpack] break CSS and JS files while webpackin' (#3262) * [webpack] break CSS and JS files while webpackin' * cleaning up some templates * Fix pylint issue --- superset/__init__.py | 22 ++++++++------- superset/assets/javascripts/SqlLab/index.jsx | 2 +- .../SqlLab/{main.css => main.less} | 1 - superset/assets/javascripts/explore/index.jsx | 2 +- .../javascripts/{css-theme.js => theme.js} | 1 + superset/assets/package.json | 1 + .../{superset.css => superset.less} | 0 superset/assets/webpack.config.js | 27 ++++++++++++------- superset/templates/superset/base.html | 15 +++-------- superset/templates/superset/basic.html | 16 ++++++----- superset/templates/superset/dashboard.html | 8 ------ superset/templates/superset/explore.html | 23 ---------------- superset/templates/superset/index.html | 6 ----- .../superset/partials/_script_tag.html | 2 +- superset/templates/superset/profile.html | 8 ------ superset/templates/superset/sqllab.html | 8 ------ superset/templates/superset/welcome.html | 7 ----- superset/views/core.py | 24 +++++++++++------ 18 files changed, 64 insertions(+), 109 deletions(-) rename superset/assets/javascripts/SqlLab/{main.css => main.less} (99%) rename superset/assets/javascripts/{css-theme.js => theme.js} (70%) rename superset/assets/stylesheets/{superset.css => superset.less} (100%) delete mode 100644 superset/templates/superset/explore.html delete mode 100644 superset/templates/superset/index.html delete mode 100644 superset/templates/superset/profile.html delete mode 100644 superset/templates/superset/sqllab.html diff --git a/superset/__init__.py b/superset/__init__.py index b8fccd9934..9576458804 100644 --- a/superset/__init__.py +++ b/superset/__init__.py @@ -32,19 +32,21 @@ app = Flask(__name__) app.config.from_object(CONFIG_MODULE) conf = app.config +# Handling manifest file logic at app start +MANIFEST_FILE = APP_DIR + '/static/assets/dist/manifest.json' +get_manifest_file = lambda x: x +manifest = {} +try: + with open(MANIFEST_FILE, 'r') as f: + manifest = json.load(f) + get_manifest_file = lambda x: '/static/assets/dist/' + manifest.get(x, '') +except Exception: + print("no manifest file found at " + MANIFEST_FILE) + @app.context_processor def get_js_manifest(): - manifest = {} - try: - with open(APP_DIR + '/static/assets/dist/manifest.json', 'r') as f: - manifest = json.load(f) - except Exception as e: - print( - "no manifest file found at " + - APP_DIR + "/static/assets/dist/manifest.json" - ) - return dict(js_manifest=manifest) + return dict(js_manifest=get_manifest_file) for bp in conf.get('BLUEPRINTS'): diff --git a/superset/assets/javascripts/SqlLab/index.jsx b/superset/assets/javascripts/SqlLab/index.jsx index ba09924720..4e2eae898c 100644 --- a/superset/assets/javascripts/SqlLab/index.jsx +++ b/superset/assets/javascripts/SqlLab/index.jsx @@ -10,7 +10,7 @@ import { initJQueryAjax } from '../modules/utils'; import App from './components/App'; import { appSetup } from '../common'; -import './main.css'; +import './main.less'; import '../../stylesheets/reactable-pagination.css'; import '../components/FilterableTable/FilterableTableStyles.css'; diff --git a/superset/assets/javascripts/SqlLab/main.css b/superset/assets/javascripts/SqlLab/main.less similarity index 99% rename from superset/assets/javascripts/SqlLab/main.css rename to superset/assets/javascripts/SqlLab/main.less index ad2bb37c0e..d5dab4c03c 100644 --- a/superset/assets/javascripts/SqlLab/main.css +++ b/superset/assets/javascripts/SqlLab/main.less @@ -161,7 +161,6 @@ div.Workspace { margin: 0px; border: none; font-size: 12px; - line-height: @line-height-base; background-color: transparent !important; } diff --git a/superset/assets/javascripts/explore/index.jsx b/superset/assets/javascripts/explore/index.jsx index 0fe4fcaba9..8d29d9eaf0 100644 --- a/superset/assets/javascripts/explore/index.jsx +++ b/superset/assets/javascripts/explore/index.jsx @@ -19,7 +19,7 @@ import '../../stylesheets/reactable-pagination.css'; appSetup(); initJQueryAjax(); -const exploreViewContainer = document.getElementById('js-explore-view-container'); +const exploreViewContainer = document.getElementById('app'); const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstrap')); const controls = getControlsState(bootstrapData, bootstrapData.form_data); delete bootstrapData.form_data; diff --git a/superset/assets/javascripts/css-theme.js b/superset/assets/javascripts/theme.js similarity index 70% rename from superset/assets/javascripts/css-theme.js rename to superset/assets/javascripts/theme.js index 8fab234f65..68a7a8ac5f 100644 --- a/superset/assets/javascripts/css-theme.js +++ b/superset/assets/javascripts/theme.js @@ -1,2 +1,3 @@ import '../stylesheets/less/index.less'; import '../stylesheets/react-select/select.less'; +import '../stylesheets/superset.less'; diff --git a/superset/assets/package.json b/superset/assets/package.json index 1422492bfe..2dde6b337a 100644 --- a/superset/assets/package.json +++ b/superset/assets/package.json @@ -108,6 +108,7 @@ "eslint-plugin-jsx-a11y": "^5.0.3", "eslint-plugin-react": "^7.0.1", "exports-loader": "^0.6.3", + "extract-text-webpack-plugin": "2.1.2", "file-loader": "^0.11.1", "github-changes": "^1.0.4", "ignore-styles": "^5.0.1", diff --git a/superset/assets/stylesheets/superset.css b/superset/assets/stylesheets/superset.less similarity index 100% rename from superset/assets/stylesheets/superset.css rename to superset/assets/stylesheets/superset.less diff --git a/superset/assets/webpack.config.js b/superset/assets/webpack.config.js index e3413e5d14..10e41c96bd 100644 --- a/superset/assets/webpack.config.js +++ b/superset/assets/webpack.config.js @@ -2,6 +2,7 @@ const webpack = require('webpack'); const path = require('path'); const ManifestPlugin = require('webpack-manifest-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); // input dir const APP_DIR = path.resolve(__dirname, './'); @@ -14,7 +15,7 @@ const config = { fs: 'empty', }, entry: { - 'css-theme': APP_DIR + '/javascripts/css-theme.js', + theme: APP_DIR + '/javascripts/theme.js', common: APP_DIR + '/javascripts/common.js', addSlice: ['babel-polyfill', APP_DIR + '/javascripts/addSlice/index.jsx'], dashboard: ['babel-polyfill', APP_DIR + '/javascripts/dashboard/Dashboard.jsx'], @@ -64,11 +65,24 @@ const config = { include: APP_DIR + '/node_modules/mapbox-gl/js', loader: 'babel-loader', }, - /* for require('*.css') */ + // Extract css files { test: /\.css$/, include: APP_DIR, - loader: 'style-loader!css-loader', + loader: ExtractTextPlugin.extract({ + use: ['css-loader'], + fallback: 'style-loader', + }), + }, + // Optionally extract less files + // or any other compile-to-css language + { + test: /\.less$/, + include: APP_DIR, + loader: ExtractTextPlugin.extract({ + use: ['css-loader', 'less-loader'], + fallback: 'style-loader', + }), }, /* for css linking images */ { @@ -92,12 +106,6 @@ const config = { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }, - /* for require('*.less') */ - { - test: /\.less$/, - include: APP_DIR, - loader: 'style-loader!css-loader!less-loader', - }, /* for mapbox */ { test: /\.json$/, @@ -123,6 +131,7 @@ const config = { NODE_ENV: JSON.stringify(process.env.NODE_ENV), }, }), + new ExtractTextPlugin('[name].[chunkhash].css'), ], }; if (process.env.NODE_ENV === 'production') { diff --git a/superset/templates/superset/base.html b/superset/templates/superset/base.html index 1a9c42cd89..b47104957a 100644 --- a/superset/templates/superset/base.html +++ b/superset/templates/superset/base.html @@ -1,21 +1,12 @@ {% extends "appbuilder/baselayout.html" %} {% block head_css %} + {{super()}} - - {{super()}} - {% endblock %} - - {% block head_js %} - {{super()}} - {% with filename="css-theme" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} + {% endblock %} {% block tail_js %} {{super()}} - {% with filename="common" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} + {% endblock %} diff --git a/superset/templates/superset/basic.html b/superset/templates/superset/basic.html index d4f2e1f557..87b058d13e 100644 --- a/superset/templates/superset/basic.html +++ b/superset/templates/superset/basic.html @@ -12,15 +12,16 @@ {% block head_meta %}{% endblock %} {% block head_css %} - - - + + + + {% if entry %} + + {% endif %} {% endblock %} {% block head_js %} - {% with filename="css-theme" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} + {% endblock %} {% block tail_js %} + {% if entry %} + + {% endif %} {% endblock %} diff --git a/superset/templates/superset/dashboard.html b/superset/templates/superset/dashboard.html index 8fe4a6ed5b..e297e5116a 100644 --- a/superset/templates/superset/dashboard.html +++ b/superset/templates/superset/dashboard.html @@ -1,14 +1,6 @@ {% extends "superset/basic.html" %} -{% block head_js %} - {{ super() }} - {% with filename="dashboard" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} -{% endblock %} -{% block title %}[dashboard] {{ dashboard_title }}{% endblock %} {% block body %} -
-{% endblock %} - -{% block tail_js %} - {{ super() }} - {% with filename="explore" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} -{% endblock %} diff --git a/superset/templates/superset/index.html b/superset/templates/superset/index.html deleted file mode 100644 index bd0455745e..0000000000 --- a/superset/templates/superset/index.html +++ /dev/null @@ -1,6 +0,0 @@ -{% extends "superset/basic.html" %} - -{% block tail_js %} - {{ super() }} - -{% endblock %} diff --git a/superset/templates/superset/partials/_script_tag.html b/superset/templates/superset/partials/_script_tag.html index e7bee3fede..d8d6f6fd38 100644 --- a/superset/templates/superset/partials/_script_tag.html +++ b/superset/templates/superset/partials/_script_tag.html @@ -1,5 +1,5 @@ {% block tail_js %} {% endblock %} diff --git a/superset/templates/superset/profile.html b/superset/templates/superset/profile.html deleted file mode 100644 index df5233219b..0000000000 --- a/superset/templates/superset/profile.html +++ /dev/null @@ -1,8 +0,0 @@ -{% extends "superset/basic.html" %} - -{% block tail_js %} - {{ super() }} - {% with filename="profile" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} -{% endblock %} diff --git a/superset/templates/superset/sqllab.html b/superset/templates/superset/sqllab.html deleted file mode 100644 index bd41b1480c..0000000000 --- a/superset/templates/superset/sqllab.html +++ /dev/null @@ -1,8 +0,0 @@ -{% extends "superset/basic.html" %} - -{% block tail_js %} - {{ super() }} - {% with filename="sqllab" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} -{% endblock %} diff --git a/superset/templates/superset/welcome.html b/superset/templates/superset/welcome.html index 09bc8b2eaa..4db2cd3ab5 100644 --- a/superset/templates/superset/welcome.html +++ b/superset/templates/superset/welcome.html @@ -1,12 +1,5 @@ {% extends "superset/basic.html" %} -{% block head_js %} - {{ super() }} - {% with filename="welcome" %} - {% include "superset/partials/_script_tag.html" %} - {% endwith %} -{% endblock %} - {% block title %}{{ _("Welcome!") }}{% endblock %} {% block body %} diff --git a/superset/views/core.py b/superset/views/core.py index a10e8848e2..4b20e3cea8 100755 --- a/superset/views/core.py +++ b/superset/views/core.py @@ -1093,12 +1093,16 @@ class Superset(BaseSupersetView): table_name = datasource.table_name \ if datasource_type == 'table' \ else datasource.datasource_name + if slc: + title = "[slice] " + slc.slice_name + else: + title = "[explore] " + table_name return self.render_template( - "superset/explore.html", + "superset/basic.html", bootstrap_data=json.dumps(bootstrap_data), - slice=slc, - standalone_mode=standalone, - table_name=table_name) + entry='explore', + title=title, + standalone_mode=standalone) @api @has_access_api @@ -1723,7 +1727,8 @@ class Superset(BaseSupersetView): return self.render_template( "superset/dashboard.html", - dashboard_title=dash.dashboard_title, + entry='dashboard', + title='[dashboard] ' + dash.dashboard_title, bootstrap_data=json.dumps(bootstrap_data), ) @@ -2232,7 +2237,8 @@ class Superset(BaseSupersetView): """Personalized welcome page""" if not g.user or not g.user.get_id(): return redirect(appbuilder.get_url_for_login) - return self.render_template('superset/welcome.html', utils=utils) + return self.render_template( + 'superset/welcome.html', entry='welcome', utils=utils) @has_access @expose("/profile//") @@ -2273,9 +2279,10 @@ class Superset(BaseSupersetView): } } return self.render_template( - 'superset/profile.html', + 'superset/basic.html', title=user.username + "'s profile", navbar_container=True, + entry='profile', bootstrap_data=json.dumps(payload, default=utils.json_iso_dttm_ser) ) @@ -2287,7 +2294,8 @@ class Superset(BaseSupersetView): 'defaultDbId': config.get('SQLLAB_DEFAULT_DBID'), } return self.render_template( - 'superset/sqllab.html', + 'superset/basic.html', + entry='sqllab', bootstrap_data=json.dumps(d, default=utils.json_iso_dttm_ser) ) appbuilder.add_view_no_menu(Superset)