Upgrade to React==16.4.1 & Enzyme==3.3.0 (#5359)

* Bumping react==16.4.1 &  enzyme==3.3.0

The upgrade was pretty smooth except for a cryptic message coming
out of react-select around running multiple copies of React. It turns
out the `common` bundle had React and was conflicting with explore and
dashboard apps, only in 16.x. This somehow wasn't a problem in 15.x
outside of the wasted resources.

Running 16.4 should bring in all sorts of perf improvements and features
we've all been waiting for.

https://reactjs.org/blog/2017/09/26/react-v16.0.html

TODO: react-bootstrap-datetimepicker isn't compatible with React 16

* Trying to deprecate react-bootstrap-datetime

* Moving forward

* Reintroducing tests

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

@@ -66,12 +66,10 @@ describe('Chart', () => {
     });
 
     it('should call after resize', () => {
-      const prevProp = wrapper.props();
       wrapper.setProps({
         chartStatus: 'rendered',
         height: 100,
       });
-      wrapper.instance().componentDidUpdate(prevProp);
       expect(stub.callCount).to.equals(1);
     });
   });

superset/assets/spec/javascripts/components/AsyncSelect_spec.jsx

@@ -63,7 +63,6 @@ describe('AsyncSelect', () => {
         <AsyncSelect {...mockedProps} autoSelect />,
       );
       const spy = sinon.spy(wrapper.instance(), 'onChange');
-      wrapper.instance().fetchOptions();
       server.respond();
 
       expect(spy.callCount).to.equal(1);

superset/assets/spec/javascripts/dashboard/components/Dashboard_spec.jsx

@@ -152,7 +152,6 @@ describe('Dashboard', () => {
     it('should call refresh if a filter is added', () => {
       const wrapper = setup({ dashboardState: overrideDashboardState });
       const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      const prevProps = wrapper.instance().props;
       wrapper.setProps({
         dashboardState: {
           ...overrideDashboardState,
@@ -162,7 +161,6 @@ describe('Dashboard', () => {
           },
         },
       });
-      wrapper.instance().componentDidUpdate(prevProps);
       refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).to.equal(1);
     });
@@ -170,14 +168,12 @@ describe('Dashboard', () => {
     it('should call refresh if a filter is removed', () => {
       const wrapper = setup({ dashboardState: overrideDashboardState });
       const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      const prevProps = wrapper.instance().props;
       wrapper.setProps({
         dashboardState: {
           ...overrideDashboardState,
           filters: {},
         },
       });
-      wrapper.instance().componentDidUpdate(prevProps);
       refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).to.equal(1);
     });
@@ -185,7 +181,6 @@ describe('Dashboard', () => {
     it('should call refresh if a filter is changed', () => {
       const wrapper = setup({ dashboardState: overrideDashboardState });
       const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      const prevProps = wrapper.instance().props;
       wrapper.setProps({
         dashboardState: {
           ...overrideDashboardState,
@@ -195,7 +190,6 @@ describe('Dashboard', () => {
           },
         },
       });
-      wrapper.instance().componentDidUpdate(prevProps);
       refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).to.equal(1);
     });
@@ -203,7 +197,6 @@ describe('Dashboard', () => {
     it('should not call refresh if filters change and refresh is false', () => {
       const wrapper = setup({ dashboardState: overrideDashboardState });
       const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      const prevProps = wrapper.instance().props;
       wrapper.setProps({
         dashboardState: {
           ...overrideDashboardState,
@@ -214,7 +207,6 @@ describe('Dashboard', () => {
           refresh: false,
         },
       });
-      wrapper.instance().componentDidUpdate(prevProps);
       refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).to.equal(0);
     });

superset/assets/spec/javascripts/dashboard/components/gridComponents/Markdown_spec.jsx

@@ -113,9 +113,10 @@ describe('Markdown', () => {
     // the mode dropdown onchange instead
     const dropdown = wrapper.find(MarkdownModeDropdown);
     dropdown.prop('onChange')('preview');
+    wrapper.update();
 
-    expect(wrapper.find(AceEditor)).to.have.length(0);
     expect(wrapper.find(ReactMarkdown)).to.have.length(1);
+    expect(wrapper.find(AceEditor)).to.have.length(0);
   });
 
   it('should call updateComponents when editMode changes from edit => preview, and there are markdownSource changes', () => {

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

@@ -106,7 +106,7 @@ describe('AdhocFilterEditPopover', () => {
 
     expect(wrapper.find('i.glyphicon-resize-full')).to.have.lengthOf(1);
     expect(wrapper.instance().onDragDown.calledOnce).to.be.false;
-    wrapper.find('i.glyphicon-resize-full').simulate('mouseDown');
+    wrapper.find('i.glyphicon-resize-full').simulate('mouseDown', {});
     expect(wrapper.instance().onDragDown.calledOnce).to.be.true;
   });
 });

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

@@ -36,7 +36,7 @@ describe('AdhocMetricEditPopoverTitle', () => {
   it('renders an OverlayTrigger wrapper with the title', () => {
     const { wrapper } = setup();
     expect(wrapper.find(OverlayTrigger)).to.have.lengthOf(1);
-    expect(wrapper.find(OverlayTrigger).dive().text()).to.equal('My Metric\xa0');
+    expect(wrapper.find(OverlayTrigger).find('span').text()).to.equal('My Metric\xa0');
   });
 
   it('transfers to edit mode when clicked', () => {

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

@@ -4,7 +4,7 @@ import sinon from 'sinon';
 import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import { shallow } from 'enzyme';
-import { Button } from 'react-bootstrap';
+import { Button, Label } from 'react-bootstrap';
 
 import DateFilterControl from '../../../../src/explore/components/controls/DateFilterControl';
 import ControlHeader from '../../../../src/explore/components/ControlHeader';
@@ -29,36 +29,28 @@ describe('DateFilterControl', () => {
     expect(controlHeader).to.have.lengthOf(1);
   });
   it('renders 3 Buttons', () => {
-    const label = wrapper.find('.label').first();
+    const label = wrapper.find(Label).first();
     label.simulate('click');
     setTimeout(() => {
       expect(wrapper.find(Button)).to.have.length(3);
     }, 10);
   });
   it('loads the right state', () => {
-    const label = wrapper.find('.label').first();
+    const label = wrapper.find(Label).first();
     label.simulate('click');
     setTimeout(() => {
       expect(wrapper.state().num).to.equal('90');
     }, 10);
   });
-  it('sets now and closes', () => {
-    const label = wrapper.find('.now').first();
-    label.simulate('click');
-    setTimeout(() => {
-      expect(wrapper.state().free).to.equal('now');
-      expect(wrapper.find('.popover')).to.have.length(0);
-    }, 10);
-  });
   it('renders 2 dimmed sections', () => {
-    const label = wrapper.find('.label').first();
+    const label = wrapper.find(Label).first();
     label.simulate('click');
     setTimeout(() => {
       expect(wrapper.find(Button)).to.have.length(3);
     }, 10);
   });
   it('opens and closes', () => {
-    const label = wrapper.find('.label').first();
+    const label = wrapper.find(Label).first();
     label.simulate('click');
     setTimeout(() => {
       expect(wrapper.find('.popover')).to.have.length(1);

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import { mount } from 'enzyme';
-import { Modal } from 'react-bootstrap';
 import ModalTrigger from './../../../../src/components/ModalTrigger';
 
 import DisplayQueryButton from '../../../../src/explore/components/DisplayQueryButton';
@@ -27,6 +26,5 @@ describe('DisplayQueryButton', () => {
   it('renders a dropdown', () => {
     const wrapper = mount(<DisplayQueryButton {...defaultProps} />);
     expect(wrapper.find(ModalTrigger)).to.have.lengthOf(2);
-    expect(wrapper.find(Modal)).to.have.lengthOf(2);
   });
 });

superset/assets/spec/javascripts/sqllab/TableElement_spec.jsx

@@ -36,7 +36,7 @@ describe('TableElement', () => {
     mount(<TableElement {...mockedProps} />);
   });
   it('sorts columns', () => {
-    const wrapper = mount(<TableElement {...mockedProps} />);
+    const wrapper = shallow(<TableElement {...mockedProps} />);
     expect(wrapper.state().sortColumns).to.equal(false);
     expect(wrapper.find(ColumnElement).first().props().column.name).to.equal('id');
     wrapper.find('.sort-cols').simulate('click');
@@ -50,7 +50,7 @@ describe('TableElement', () => {
     expect(mockedActions.collapseTable.called).to.equal(true);
   });
   it('removes the table', () => {
-    const wrapper = mount(<TableElement {...mockedProps} />);
+    const wrapper = shallow(<TableElement {...mockedProps} />);
     expect(wrapper.state().expanded).to.equal(true);
     wrapper.find('.table-remove').simulate('click');
     expect(wrapper.state().expanded).to.equal(false);

superset/assets/spec/javascripts/visualizations/table_spec.jsx

@@ -1,7 +1,7 @@
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 import $ from 'jquery';
-import '../../helpers/browser';
+import '../../helpers/shim';
 import tableVis from '../../../src/visualizations/table';
 
 describe('table viz', () => {