[build] Bump superset-ui packages and update build (#9241)

superset-frontend/.babelrc

@@ -1,34 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-{
-  "sourceMaps": true,
-  "retainLines": true,
-  "presets": ["airbnb", "@babel/preset-react", "@babel/preset-env"],
-  "plugins": [
-    "lodash",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
-  ],
-  "env": {
-    "test": {
-      "plugins": ["babel-plugin-dynamic-import-node"]
-    }
-  }
-}

superset-frontend/babel.config.js

@@ -0,0 +1,60 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+module.exports = {
+  sourceMaps: true,
+  retainLines: true,
+  presets: [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'usage',
+        corejs: 3,
+        loose: true,
+        shippedProposals: true,
+      },
+    ],
+  ],
+  plugins: [
+    'lodash',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-class-properties',
+    'react-hot-loader/babel',
+    ['@babel/plugin-transform-runtime', { corejs: 3 }],
+  ],
+  env: {
+    // Setup a different config for tests as they run in node instead of a browser
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            useBuiltIns: 'usage',
+            corejs: 3,
+            loose: true,
+            shippedProposals: true,
+            targets: { node: 'current' },
+            modules: 'commonjs',
+          },
+        ],
+      ],
+      plugins: ['babel-plugin-dynamic-import-node'],
+    },
+  },
+};

superset-frontend/package.json

@@ -8,9 +8,9 @@
     "test": "spec"
   },
   "scripts": {
-    "tdd": "jest --watch",
+    "tdd": "NODE_ENV=test jest --watch",
-    "test": "jest",
+    "test": "NODE_ENV=test jest",
-    "cover": "jest --coverage",
+    "cover": "NODE_ENV=test jest --coverage",
     "dev": "webpack --mode=development --colors --progress --debug --watch",
     "dev-server": "node --max_old_space_size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode=development --progress",
     "prod": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --mode=production --colors --progress",
@@ -39,49 +39,56 @@
   "bugs": {
     "url": "https://github.com/apache/incubator-superset/issues"
   },
+  "browserslist": [
+    "last 3 chrome versions",
+    "last 3 firefox versions",
+    "last 3 safari versions",
+    "last 3 edge versions"
+  ],
   "engines": {
     "node": ">= 6.11.5 <7.0.0 || >= 8.9.0"
   },
   "homepage": "https://superset.apache.org/",
   "dependencies": {
+    "@babel/runtime-corejs3": "^7.8.4",
     "@data-ui/sparkline": "^0.0.54",
-    "@superset-ui/chart": "^0.12.3",
+    "@superset-ui/chart": "^0.12.8",
-    "@superset-ui/chart-composition": "^0.12.1",
+    "@superset-ui/chart-composition": "^0.12.8",
-    "@superset-ui/color": "^0.12.1",
+    "@superset-ui/color": "^0.12.8",
-    "@superset-ui/connection": "^0.12.3",
+    "@superset-ui/connection": "^0.12.8",
-    "@superset-ui/core": "^0.12.0",
+    "@superset-ui/core": "^0.12.8",
-    "@superset-ui/dimension": "^0.12.3",
+    "@superset-ui/dimension": "^0.12.8",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-chord": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-country-map": "^0.11.4",
+    "@superset-ui/legacy-plugin-chart-country-map": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-horizon": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-horizon": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-iframe": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-iframe": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-markup": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-markup": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.11.11",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-partition": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-partition": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-rose": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-rose": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-sunburst": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-sunburst": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-table": "^0.11.4",
+    "@superset-ui/legacy-plugin-chart-table": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-treemap": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-treemap": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-word-cloud": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-word-cloud": "^0.11.15",
-    "@superset-ui/legacy-plugin-chart-world-map": "^0.11.0",
+    "@superset-ui/legacy-plugin-chart-world-map": "^0.11.15",
-    "@superset-ui/legacy-preset-chart-big-number": "^0.11.0",
+    "@superset-ui/legacy-preset-chart-big-number": "^0.11.15",
-    "@superset-ui/legacy-preset-chart-deckgl": "^0.1.0",
+    "@superset-ui/legacy-preset-chart-deckgl": "^0.2.0",
-    "@superset-ui/legacy-preset-chart-nvd3": "^0.11.14",
+    "@superset-ui/legacy-preset-chart-nvd3": "^0.11.15",
-    "@superset-ui/number-format": "^0.12.1",
+    "@superset-ui/number-format": "^0.12.10",
-    "@superset-ui/plugin-chart-table": "^0.11.7",
+    "@superset-ui/plugin-chart-table": "^0.11.15",
-    "@superset-ui/preset-chart-xy": "^0.11.0",
+    "@superset-ui/preset-chart-xy": "^0.11.15",
-    "@superset-ui/query": "^0.12.2",
+    "@superset-ui/query": "^0.12.8",
-    "@superset-ui/time-format": "^0.12.4",
+    "@superset-ui/time-format": "^0.12.10",
-    "@superset-ui/translation": "^0.12.0",
+    "@superset-ui/translation": "^0.12.8",
     "@types/classnames": "^2.2.9",
     "@types/react-json-tree": "^0.6.11",
     "@vx/responsive": "0.0.172",
@@ -157,6 +164,7 @@
     "@babel/node": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.5.5",

superset-frontend/spec/javascripts/components/AnchorLink_spec.jsx

@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
 
 import AnchorLink from '../../../src/components/AnchorLink';
 import URLShortLinkButton from '../../../src/components/URLShortLinkButton';
@@ -41,17 +40,16 @@ describe('AnchorLink', () => {
     delete global.window.location.value;
   });
 
-  it('should scroll the AnchorLink into view upon mount', () => {
+  it('should scroll the AnchorLink into view upon mount', async () => {
-    const callback = sinon.spy();
+    const callback = jest.fn();
-    const clock = sinon.useFakeTimers();
+    const stub = jest.spyOn(document, 'getElementById').mockReturnValue({
-    const stub = sinon.stub(document, 'getElementById').returns({
       scrollIntoView: callback,
     });
 
     shallow(<AnchorLink {...props} />);
-    clock.tick(2000);
+    await new Promise(r => setTimeout(r, 2000));
-    expect(callback.callCount).toEqual(1);
+
-    stub.restore();
+    expect(stub).toHaveBeenCalledTimes(1);
   });
 
   it('should render anchor link with id', () => {

superset-frontend/spec/javascripts/dashboard/components/FilterTooltipWrapper_spec.jsx

@@ -48,23 +48,21 @@ describe('FilterTooltipWrapper', () => {
     expect(wrapper.find(Tooltip)).toHaveLength(1);
   });
 
-  it('should show tooltip on hover', () => {
+  it('should show tooltip on hover', async () => {
     const wrapper = setup();
     wrapper.instance().isHover = true;
 
-    jest.useFakeTimers();
     wrapper.find('.indicator-container').simulate('mouseover');
-    jest.runAllTimers();
+    await new Promise(r => setTimeout(r, 101));
     expect(wrapper.state('show')).toBe(true);
   });
 
-  it('should hide tooltip on hover', () => {
+  it('should hide tooltip on hover', async () => {
     const wrapper = setup();
     wrapper.instance().isHover = false;
 
-    jest.useFakeTimers();
     wrapper.find('.indicator-container').simulate('mouseout');
-    jest.runAllTimers();
+    await new Promise(r => setTimeout(r, 101));
     expect(wrapper.state('show')).toBe(false);
   });
 });

superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx

@@ -25,7 +25,6 @@ import { now } from '../../../src/modules/dates';
 
 describe('Timer', () => {
   let wrapper;
-  let clock;
   const mockedProps = {
     endTime: null,
     isRunning: true,
@@ -33,21 +32,17 @@ describe('Timer', () => {
   };
 
   beforeEach(() => {
-    clock = sinon.useFakeTimers();
     mockedProps.startTime = now() + 1;
     wrapper = mount(<Timer {...mockedProps} />);
   });
-  afterEach(() => {
-    clock.restore();
-  });
 
   it('is a valid element', () => {
     expect(React.isValidElement(<Timer {...mockedProps} />)).toBe(true);
   });
 
-  it('componentWillMount starts timer after 30ms and sets state.clockStr', () => {
+  it('componentWillMount starts timer after 30ms and sets state.clockStr', async () => {
     expect(wrapper.state().clockStr).toBe('');
-    clock.tick(31);
+    await new Promise(r => setTimeout(r, 35));
     expect(wrapper.state().clockStr).not.toBe('');
   });
 

superset-frontend/spec/javascripts/utils/getClientErrorObject_spec.js

@@ -21,7 +21,7 @@ import getClientErrorObject from '../../../src/utils/getClientErrorObject';
 describe('getClientErrorObject()', () => {
   it('Returns a Promise', () => {
     const response = getClientErrorObject('error');
-    expect(response.constructor === Promise).toBe(true);
+    expect(response instanceof Promise).toBe(true);
   });
 
   it('Returns a Promise that resolves to an object with an error key', () => {

superset-frontend/webpack.config.js

@@ -200,11 +200,25 @@ const config = {
           {
             loader: 'babel-loader',
             options: {
-              presets: ['airbnb', '@babel/preset-react', '@babel/preset-env'],
+              presets: [
+                'airbnb',
+                '@babel/preset-react',
+                [
+                  '@babel/preset-env',
+                  {
+                    useBuiltIns: 'usage',
+                    corejs: 3,
+                    loose: true,
+                    modules: false,
+                    shippedProposals: true,
+                  },
+                ],
+              ],
               plugins: [
                 'lodash',
                 '@babel/plugin-syntax-dynamic-import',
                 'react-hot-loader/babel',
+                ['@babel/plugin-transform-runtime', { corejs: 3 }],
               ],
             },
           },