get rid of global notify (apache#5355)

* [toasts] get rid of notify globals, refactor messageToasts for use by entire app

* [remove notify] use arrow func in ajax call

* fix lint + tests

* actually fix tests from messageToast refactor

* add 'test:one' npm script

* debugger

* [toasts] convert bootstrap flash messages to toasts in explore + sqllab

* [toasts][tests] import from right file

(cherry picked from commit 19ac6e1)

superset/assets/package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js 'spec/**/*_spec.*'",
+    "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 -- --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",
@@ -89,7 +90,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",

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/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', () => {

superset/assets/spec/javascripts/messageToasts/utils/getToastsFromPyFlashMessages_spec.js

@@ -0,0 +1,35 @@
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+
+import {
+  DANGER_TOAST,
+  INFO_TOAST,
+  SUCCESS_TOAST,
+} from '../../../../src/messageToasts/constants';
+
+import getToastsFromPyFlashMessages from '../../../../src/messageToasts/utils/getToastsFromPyFlashMessages';
+
+describe('getToastsFromPyFlashMessages', () => {
+  it('should return an info toast', () => {
+    const toast = getToastsFromPyFlashMessages([['info', 'info test']])[0];
+    expect(toast).to.deep.include({ toastType: INFO_TOAST, text: 'info test' });
+  });
+
+  it('should return a success toast', () => {
+    const toast = getToastsFromPyFlashMessages([
+      ['success', 'success test'],
+    ])[0];
+    expect(toast).to.deep.include({
+      toastType: SUCCESS_TOAST,
+      text: 'success test',
+    });
+  });
+
+  it('should return a danger toast', () => {
+    const toast = getToastsFromPyFlashMessages([['danger', 'danger test']])[0];
+    expect(toast).to.deep.include({
+      toastType: DANGER_TOAST,
+      text: 'danger test',
+    });
+  });
+});

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

@@ -14,23 +14,24 @@ import { sqlLabReducer } from '../../../src/SqlLab/reducers';
 describe('App', () => {
   const middlewares = [thunk];
   const mockStore = configureStore(middlewares);
-  const store = mockStore(sqlLabReducer(undefined, {}));
+  const store = mockStore({ sqlLab: sqlLabReducer(undefined, {}), messageToasts: [] });
 
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<App />, {
-      context: { store },
-    }).dive();
+    wrapper = shallow(<App />, { context: { store } }).dive();
   });
+
   it('is valid', () => {
     expect(React.isValidElement(<App />)).to.equal(true);
   });
+
   it('should handler resize', () => {
     sinon.spy(wrapper.instance(), 'getHeight');
     wrapper.instance().handleResize();
     expect(wrapper.instance().getHeight.callCount).to.equal(1);
     wrapper.instance().getHeight.restore();
   });
+
   it('should render', () => {
     expect(wrapper.find('.SqlLab')).to.have.length(1);
     expect(wrapper.find(TabbedSqlEditors)).to.have.length(1);

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

@@ -7,7 +7,7 @@ import CopyQueryTabUrl from '../../../src/SqlLab/components/CopyQueryTabUrl';
 
 describe('CopyQueryTabUrl', () => {
   const mockedProps = {
-    queryEditor: initialState.queryEditors[0],
+    queryEditor: initialState.sqlLab.queryEditors[0],
   };
   it('is valid with props', () => {
     expect(

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

@@ -20,6 +20,7 @@ describe('SqlEditorLeftBar', () => {
       queryEditorSetDb: sinon.stub(),
       setDatabases: sinon.stub(),
       addTable: sinon.stub(),
+      addDangerToast: sinon.stub(),
     },
     tables: [table],
     queryEditor: defaultQueryEditor,

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

@@ -11,7 +11,7 @@ describe('SqlEditor', () => {
   const mockedProps = {
     actions: {},
     database: {},
-    queryEditor: initialState.queryEditors[0],
+    queryEditor: initialState.sqlLab.queryEditors[0],
     latestQuery: queries[0],
     tables: [table],
     queries,

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

@@ -22,10 +22,12 @@ describe('TabbedSqlEditors', () => {
     'dfsadfs',
     'newEditorId',
   ];
+
   const tables = [Object.assign({}, table[0], {
     dataPreviewQueryId: 'B1-VQU1zW',
     queryEditorId: 'newEditorId',
   })];
+
   const queryEditors = [{
     autorun: false,
     dbId: 1,
@@ -47,8 +49,8 @@ describe('TabbedSqlEditors', () => {
     databases: {},
     tables: [],
     queries: {},
-    queryEditors: initialState.queryEditors,
-    tabHistory: initialState.tabHistory,
+    queryEditors: initialState.sqlLab.queryEditors,
+    tabHistory: initialState.sqlLab.tabHistory,
     editorHeight: '',
     getHeight: () => ('100px'),
     database: {},
@@ -163,7 +165,7 @@ describe('TabbedSqlEditors', () => {
     wrapper.setState({ hideLeftBar: true });
 
     const firstTab = wrapper.find(Tab).first();
-    expect(firstTab.props().eventKey).to.contain(initialState.queryEditors[0].id);
+    expect(firstTab.props().eventKey).to.contain(initialState.sqlLab.queryEditors[0].id);
     expect(firstTab.find(SqlEditor)).to.have.length(1);
 
     const lastTab = wrapper.find(Tab).last();