Cherry pick webpack bundle (4 PRs)

superset/__init__.py

@@ -47,23 +47,37 @@ def parse_manifest_json():
     global manifest
     try:
         with open(MANIFEST_FILE, 'r') as f:
-            manifest = json.load(f)
+            # the manifest inclues non-entry files
+            # we only need entries in templates
+            full_manifest = json.load(f)
+            manifest = full_manifest.get('entrypoints', {})
     except Exception:
         pass
 
 
-def get_manifest_file(filename):
+def get_js_manifest_files(filename):
     if app.debug:
         parse_manifest_json()
-    return '/static/assets/dist/' + manifest.get(filename, '')
+    entry_files = manifest.get(filename, {})
+    return entry_files.get('js', [])
+
+
+def get_css_manifest_files(filename):
+    if app.debug:
+        parse_manifest_json()
+    entry_files = manifest.get(filename, {})
+    return entry_files.get('css', [])
 
 
 parse_manifest_json()
 
 
 @app.context_processor
-def get_js_manifest():
-    return dict(js_manifest=get_manifest_file)
+def get_manifest():
+    return dict(
+        js_manifest=get_js_manifest_files,
+        css_manifest=get_css_manifest_files,
+    )
 
 
 #################################################################

superset/assets/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets" : ["airbnb"],
+  "presets" : ["airbnb", "react", "env"],
+  "plugins": ["syntax-dynamic-import"],
 }

superset/assets/.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": "airbnb",
-  "parserOptions":{
+  "parser": "babel-eslint",
+  "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true
     }

superset/assets/.istanbul.yml

@@ -3,7 +3,8 @@ instrumentation:
     root: './src'
     extensions: ['.js', '.jsx']
     excludes: [
-        'dist/**'
+        'dist/**',
+        'visualizations/index.js',
     ]
     embed-source: false
     variable: __coverage__

superset/assets/package.json

@@ -9,12 +9,11 @@
   },
   "scripts": {
     "test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js 'spec/**/*_spec.*'",
-    "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js 'spec/**/*_spec.*'",
-    "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map",
-    "dev-slow": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool inline-source-map",
-    "dev-fast": "echo 'dev-fast in now replaced by dev'",
-    "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
-    "build": "NODE_ENV=production webpack --colors --progress",
+    "test:one": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js",
+    "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --compilers babel-core/register --require spec/helpers/browser.js --require ignore-styles 'spec/**/*_spec.*'",
+    "dev": "webpack --mode=development --colors --progress --debug --watch",
+    "prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
+    "build": "webpack --mode=production --colors --progress",
     "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
     "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx .",
     "sync-backend": "babel-node --presets env src/syncBackend.js"
@@ -39,6 +38,9 @@
   "bugs": {
     "url": "https://github.com/apache/incubator-superset/issues"
   },
+  "engines": {
+    "node": ">= 6.11.5 <7.0.0 || >= 8.9.0"
+  },
   "homepage": "http://superset.apache.org/",
   "dependencies": {
     "@data-ui/event-flow": "^0.0.8",
@@ -89,7 +91,6 @@
     "react-ace": "^5.10.0",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-shallow-compare": "^15.4.2",
-    "react-alert": "^2.3.0",
     "react-bootstrap": "^0.31.5",
     "react-bootstrap-slider": "2.0.1",
     "react-bootstrap-table": "^4.0.2",
@@ -129,13 +130,16 @@
   "devDependencies": {
     "babel-cli": "^6.14.0",
     "babel-core": "^6.10.4",
+    "babel-eslint": "^8.2.2",
     "babel-istanbul": "^0.12.2",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.4",
     "babel-plugin-css-modules-transform": "^1.1.0",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-airbnb": "^2.1.1",
     "chai": "^4.0.2",
-    "clean-webpack-plugin": "^0.1.16",
+    "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^0.28.0",
     "enzyme": "^2.0.0",
     "eslint": "^4.19.0",
@@ -146,16 +150,16 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.0.1",
     "exports-loader": "^0.7.0",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "^0.11.1",
+    "file-loader": "^1.1.11",
     "github-changes": "^1.0.4",
     "ignore-styles": "^5.0.1",
     "imports-loader": "^0.7.1",
     "istanbul": "^1.0.0-alpha",
     "jsdom": "9.12.0",
     "json-loader": "^0.5.4",
     "less": "^2.6.1",
-    "less-loader": "^4.0.3",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "mocha": "^3.2.0",
     "npm-check-updates": "^2.14.0",
     "prettier": "^1.12.1",
@@ -166,10 +170,10 @@
     "style-loader": "^0.18.2",
     "transform-loader": "^0.2.3",
     "uglifyjs-webpack-plugin": "^1.1.0",
-    "url-loader": "^0.6.2",
-    "//": "Known issues with >=4",
-    "webpack": "^3.10.0",
-    "webpack-manifest-plugin": "2.0.3",
-    "webworkify-webpack": "2.1.2"
+    "url-loader": "^1.0.1",
+    "webpack": "^4.6.0",
+    "webpack-assets-manifest": "^3.0.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-sources": "^1.1.0"
   }
 }

superset/assets/spec/helpers/browser.js

@@ -3,7 +3,12 @@ import 'babel-polyfill';
 import chai from 'chai';
 import jsdom from 'jsdom';
 
-require('babel-register')();
+require('babel-register')({
+  // NOTE: If `dynamic-import-node` is in .babelrc alongside
+  // `syntax-dynamic-import` it breaks webpack's bundle splitting capability.
+  // So only load during runtime on the node-side (in tests)
+  plugins: ['dynamic-import-node'],
+});
 
 const exposedProperties = ['window', 'navigator', 'document'];
 

superset/assets/spec/javascripts/chart/Chart_spec.jsx

@@ -38,10 +38,10 @@ describe('Chart', () => {
       <Chart {...mockedProps} />,
     );
   });
-  describe('renderViz', () => {
+  describe('renderVis', () => {
     let stub;
     beforeEach(() => {
-      stub = sinon.stub(wrapper.instance(), 'renderViz');
+      stub = sinon.stub(wrapper.instance(), 'renderVis');
     });
     afterEach(() => {
       stub.restore();

superset/assets/spec/javascripts/dashboard/actions/dashboardLayout_spec.js

@@ -23,7 +23,7 @@ import {
 } from '../../../../src/dashboard/actions/dashboardLayout';
 
 import { setUnsavedChanges } from '../../../../src/dashboard/actions/dashboardState';
-import { addInfoToast } from '../../../../src/dashboard/actions/messageToasts';
+import { addInfoToast } from '../../../../src/messageToasts/actions';
 
 import {
   DASHBOARD_GRID_TYPE,

superset/assets/spec/javascripts/dashboard/fixtures/mockState.js

@@ -2,7 +2,7 @@ import chartQueries from './mockChartQueries';
 import { dashboardLayout } from './mockDashboardLayout';
 import dashboardInfo from './mockDashboardInfo';
 import dashboardState from './mockDashboardState';
-import messageToasts from './mockMessageToasts';
+import messageToasts from '../../messageToasts/mockMessageToasts';
 import datasources from './mockDatasource';
 import sliceEntities from './mockSliceEntities';
 

superset/assets/spec/javascripts/explore/components/DatasourceControl_spec.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import sinon from 'sinon';
+import configureStore from 'redux-mock-store';
 import { expect } from 'chai';
-import { describe, it, beforeEach } from 'mocha';
+import { describe, it } from 'mocha';
 import { shallow } from 'enzyme';
 import { Modal } from 'react-bootstrap';
 import DatasourceControl from '../../../../src/explore/components/controls/DatasourceControl';
@@ -26,13 +27,14 @@ const defaultProps = {
 };
 
 describe('DatasourceControl', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<DatasourceControl {...defaultProps} />);
-  });
+  function setup() {
+    const mockStore = configureStore([]);
+    const store = mockStore({});
+    return shallow(<DatasourceControl {...defaultProps} />, { context: { store } }).dive();
+  }
 
   it('renders a Modal', () => {
+    const wrapper = setup();
     expect(wrapper.find(Modal)).to.have.lengthOf(1);
   });
 });

superset/assets/spec/javascripts/explore/components/MetricDefinitionOption_spec.jsx

@@ -1,5 +1,5 @@
-/* eslint-disable no-unused-expressions */
 import React from 'react';
+import configureStore from 'redux-mock-store';
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import { shallow } from 'enzyme';
@@ -10,18 +10,25 @@ import ColumnOption from '../../../../src/components/ColumnOption';
 import AggregateOption from '../../../../src/explore/components/AggregateOption';
 
 describe('MetricDefinitionOption', () => {
+  const mockStore = configureStore([]);
+  const store = mockStore({});
+
+  function setup(props) {
+    return shallow(<MetricDefinitionOption {...props} />, { context: { store } }).dive();
+  }
+
   it('renders a MetricOption given a saved metric', () => {
-    const wrapper = shallow(<MetricDefinitionOption option={{ metric_name: 'a_saved_metric' }} />);
+    const wrapper = setup({ option: { metric_name: 'a_saved_metric' } });
     expect(wrapper.find(MetricOption)).to.have.lengthOf(1);
   });
 
   it('renders a ColumnOption given a column', () => {
-    const wrapper = shallow(<MetricDefinitionOption option={{ column_name: 'a_column' }} />);
+    const wrapper = setup({ option: { column_name: 'a_column' } });
     expect(wrapper.find(ColumnOption)).to.have.lengthOf(1);
   });
 
   it('renders an AggregateOption given an aggregate metric', () => {
-    const wrapper = shallow(<MetricDefinitionOption option={{ aggregate_name: 'an_aggregate' }} />);
+    const wrapper = setup({ option: { aggregate_name: 'an_aggregate' } });
     expect(wrapper.find(AggregateOption)).to.have.lengthOf(1);
   });
 });

superset/assets/spec/javascripts/explore/components/URLShortLinkButton_spec.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import configureStore from 'redux-mock-store';
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import { shallow } from 'enzyme';
@@ -13,11 +14,14 @@ describe('URLShortLinkButton', () => {
     },
   };
 
-  it('renders', () => {
-    expect(React.isValidElement(<URLShortLinkButton {...defaultProps} />)).to.equal(true);
-  });
+  function setup() {
+    const mockStore = configureStore([]);
+    const store = mockStore({});
+    return shallow(<URLShortLinkButton {...defaultProps} />, { context: { store } }).dive();
+  }
+
   it('renders OverlayTrigger', () => {
-    const wrapper = shallow(<URLShortLinkButton {...defaultProps} />);
+    const wrapper = setup();
     expect(wrapper.find(OverlayTrigger)).have.length(1);
   });
 });

superset/assets/spec/javascripts/messageToasts/.eslintrc

@@ -0,0 +1,33 @@
+{
+  "extends": "prettier",
+  "plugins": ["prettier"],
+  "rules": {
+    "prefer-template": 2,
+    "new-cap": 2,
+    "no-restricted-syntax": 2,
+    "guard-for-in": 2,
+    "prefer-arrow-callback": 2,
+    "func-names": 2,
+    "react/jsx-no-bind": 2,
+    "no-confusing-arrow": 2,
+    "jsx-a11y/no-static-element-interactions": 2,
+    "jsx-a11y/anchor-has-content": 2,
+    "react/require-default-props": 2,
+    "no-plusplus": 2,
+    "no-mixed-operators": 0,
+    "no-continue": 2,
+    "no-bitwise": 2,
+    "no-undef": 2,
+    "no-multi-assign": 2,
+    "no-restricted-properties": 2,
+    "no-prototype-builtins": 2,
+    "jsx-a11y/href-no-hash": 2,
+    "class-methods-use-this": 2,
+    "import/no-named-as-default": 2,
+    "import/prefer-default-export": 2,
+    "react/no-unescaped-entities": 2,
+    "react/no-string-refs": 2,
+    "react/jsx-indent": 0,
+    "prettier/prettier": "error"
+  }
+}

superset/assets/spec/javascripts/messageToasts/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

superset/assets/spec/javascripts/dashboard/components/ToastPresenter_spec.jsx → superset/assets/spec/javascripts/messageToasts/components/ToastPresenter_spec.jsx

@@ -3,9 +3,9 @@ import { shallow } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 
-import mockMessageToasts from '../fixtures/mockMessageToasts';
-import Toast from '../../../../src/dashboard/components/Toast';
-import ToastPresenter from '../../../../src/dashboard/components/ToastPresenter';
+import mockMessageToasts from '../mockMessageToasts';
+import Toast from '../../../../src/messageToasts/components/Toast';
+import ToastPresenter from '../../../../src/messageToasts/components/ToastPresenter';
 
 describe('ToastPresenter', () => {
   const props = {

superset/assets/spec/javascripts/dashboard/components/Toast_spec.jsx → superset/assets/spec/javascripts/messageToasts/components/Toast_spec.jsx

@@ -4,8 +4,8 @@ import { shallow } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 
-import mockMessageToasts from '../fixtures/mockMessageToasts';
-import Toast from '../../../../src/dashboard/components/Toast';
+import mockMessageToasts from '../mockMessageToasts';
+import Toast from '../../../../src/messageToasts/components/Toast';
 
 describe('Toast', () => {
   const props = {

superset/assets/spec/javascripts/dashboard/fixtures/mockMessageToasts.js → superset/assets/spec/javascripts/messageToasts/mockMessageToasts.js

@@ -1,7 +1,4 @@
-import {
-  INFO_TOAST,
-  DANGER_TOAST,
-} from '../../../../src/dashboard/util/constants';
+import { INFO_TOAST, DANGER_TOAST } from '../../../src/messageToasts/constants';
 
 export default [
   { id: 'info_id', toastType: INFO_TOAST, text: 'info toast' },

superset/assets/spec/javascripts/dashboard/reducers/messageToasts_spec.js → superset/assets/spec/javascripts/messageToasts/reducers/messageToasts_spec.js

@@ -1,11 +1,8 @@
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 
-import {
-  ADD_TOAST,
-  REMOVE_TOAST,
-} from '../../../../src/dashboard/actions/messageToasts';
-import messageToastsReducer from '../../../../src/dashboard/reducers/messageToasts';
+import { ADD_TOAST, REMOVE_TOAST } from '../../../../src/messageToasts/actions';
+import messageToastsReducer from '../../../../src/messageToasts/reducers';
 
 describe('messageToasts reducer', () => {
   it('should return initial state', () => {