[SIP-4][superset-client] add SupersetClient, refactor app

superset/assets/.eslintrc

@@ -8,6 +8,7 @@
   },
   "globals": {
     "document": true,
+    "window": true,
   },
   "rules": {
     "prefer-template": 0,
@@ -26,7 +27,7 @@
     "no-mixed-operators": 0,
     "no-continue": 0,
     "no-bitwise": 0,
-    "no-undef": 0,
+    "no-undef": 1,
     "no-multi-assign": 0,
     "react/no-array-index-key": 0,
     "no-restricted-properties": 0,

superset/assets/package.json

@@ -43,10 +43,12 @@
   },
   "homepage": "http://superset.apache.org/",
   "dependencies": {
-    "@data-ui/event-flow": "^0.0.54",
+    "@data-ui/event-flow": "^0.0.62",
     "@data-ui/sparkline": "^0.0.54",
     "@data-ui/xy-chart": "^0.0.61",
     "@vx/responsive": "0.0.153",
+    "abortcontroller-polyfill": "^1.1.9",
+    "aphrodite": "^1.2.0",
     "babel-register": "^6.24.1",
     "bootstrap": "^3.3.6",
     "bootstrap-slider": "^10.0.0",
@@ -120,7 +122,9 @@
     "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
     "underscore": "^1.8.3",
     "urijs": "^1.18.10",
-    "viewport-mercator-project": "^5.0.0"
+    "url-search-params-polyfill": "^4.0.1",
+    "viewport-mercator-project": "^5.0.0",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",
@@ -145,6 +149,7 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.0.1",
     "exports-loader": "^0.7.0",
+    "fetch-mock": "^6.5.2",
     "file-loader": "^1.1.11",
     "github-changes": "^1.0.4",
     "ignore-styles": "^5.0.1",

superset/assets/spec/helpers/browser.js

@@ -2,6 +2,8 @@
 import 'babel-polyfill';
 import chai from 'chai';
 import jsdom from 'jsdom';
+import SupersetClient from '../../src/packages/core/src';
+import fetchMock from 'fetch-mock'; // eslint-disable-line import/first
 
 require('babel-register')({
   // NOTE: If `dynamic-import-node` is in .babelrc alongside
@@ -47,3 +49,11 @@ global.window.XMLHttpRequest = global.XMLHttpRequest;
 global.window.location = { href: 'about:blank' };
 global.window.performance = { now: () => new Date().getTime() };
 global.$ = require('jquery')(global.window);
+
+// The following are needed to mock out SupersetClient requests
+// including CSRF authentication and initialization
+global.FormData = window.FormData;
+fetchMock.get(/superset\/csrf_token/, { csrf_token: '1234' });
+SupersetClient.configure({ protocol: 'http', host: 'localhost' })
+  .init()
+  .then(() => fetchMock.reset()); // remove this call from mocks

superset/assets/spec/javascripts/dashboard/reducers/sliceEntities_spec.js

@@ -26,7 +26,7 @@ describe('sliceEntities reducer', () => {
   it('should set slices', () => {
     const result = sliceEntitiesReducer(
       { slices: { a: {} } },
-      { type: SET_ALL_SLICES, slices: { 1: {}, 2: {} } },
+      { type: SET_ALL_SLICES, payload: { slices: { 1: {}, 2: {} } } },
     );
 
     expect(result.slices).to.deep.equal({
@@ -42,7 +42,7 @@ describe('sliceEntities reducer', () => {
       {},
       {
         type: FETCH_ALL_SLICES_FAILED,
-        error: { responseJSON: { message: 'errorrr' } },
+        error: 'errorrr',
       },
     );
     expect(result.isLoading).to.equal(false);

superset/assets/spec/javascripts/datasource/DatasourceEditor_spec.jsx

@@ -4,8 +4,8 @@ import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import { shallow } from 'enzyme';
 import configureStore from 'redux-mock-store';
-import $ from 'jquery';
-import sinon from 'sinon';
+import fetchMock from 'fetch-mock';
+import thunk from 'redux-thunk';
 
 import DatasourceEditor from '../../../src/datasource/DatasourceEditor';
 import mockDatasource from '../../fixtures/mockDatasource';
@@ -14,8 +14,9 @@ const props = {
   datasource: mockDatasource['7__table'],
   addSuccessToast: () => {},
   addDangerToast: () => {},
-  onChange: sinon.spy(),
+  onChange: () => {},
 };
+
 const extraColumn = {
   column_name: 'new_column',
   type: 'VARCHAR(10)',
@@ -27,26 +28,23 @@ const extraColumn = {
   groupby: true,
 };
 
+const endpoint = 'glob:*/datasource/external_metadata/*';
+
 describe('DatasourceEditor', () => {
-  const mockStore = configureStore([]);
+  const mockStore = configureStore([thunk]);
   const store = mockStore({});
+  fetchMock.get(endpoint, []);
 
   let wrapper;
   let el;
-  let ajaxStub;
   let inst;
 
   beforeEach(() => {
-    ajaxStub = sinon.stub($, 'ajax');
     el = <DatasourceEditor {...props} />;
     wrapper = shallow(el, { context: { store } }).dive();
     inst = wrapper.instance();
   });
 
-  afterEach(() => {
-    ajaxStub.restore();
-  });
-
   it('is valid', () => {
     expect(React.isValidElement(el)).to.equal(true);
   });
@@ -55,12 +53,17 @@ describe('DatasourceEditor', () => {
     expect(wrapper.find(Tabs)).to.have.lengthOf(1);
   });
 
-  it('makes an async request', () => {
+  it('makes an async request', (done) => {
     wrapper.setState({ activeTabKey: 2 });
     const syncButton = wrapper.find('.sync-from-source');
     expect(syncButton).to.have.lengthOf(1);
     syncButton.simulate('click');
-    expect(ajaxStub.calledOnce).to.equal(true);
+
+    setTimeout(() => {
+      expect(fetchMock.calls(endpoint)).to.have.lengthOf(1);
+      fetchMock.reset();
+      done();
+    }, 0);
   });
 
   it('merges columns', () => {
@@ -69,5 +72,4 @@ describe('DatasourceEditor', () => {
     inst.mergeColumns([extraColumn]);
     expect(inst.state.databaseColumns.length).to.equal(numCols + 1);
   });
-
 });

superset/assets/spec/javascripts/datasource/DatasourceModal_spec.jsx

@@ -4,7 +4,8 @@ import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import configureStore from 'redux-mock-store';
 import { shallow } from 'enzyme';
-import $ from 'jquery';
+import fetchMock from 'fetch-mock';
+import thunk from 'redux-thunk';
 import sinon from 'sinon';
 
 import DatasourceModal from '../../../src/datasource/DatasourceModal';
@@ -15,31 +16,30 @@ const props = {
   datasource: mockDatasource['7__table'],
   addSuccessToast: () => {},
   addDangerToast: () => {},
-  onChange: sinon.spy(),
+  onChange: () => {},
   show: true,
   onHide: () => {},
+  onDatasourceSave: sinon.spy(),
 };
 
+const saveEndpoint = 'glob:*/datasource/save/';
+const savePayload = { new: 'data' };
+
 describe('DatasourceModal', () => {
-  const mockStore = configureStore([]);
+  const mockStore = configureStore([thunk]);
   const store = mockStore({});
+  fetchMock.post(saveEndpoint, savePayload);
 
   let wrapper;
   let el;
-  let ajaxStub;
   let inst;
 
   beforeEach(() => {
-    ajaxStub = sinon.stub($, 'ajax');
     el = <DatasourceModal {...props} />;
     wrapper = shallow(el, { context: { store } }).dive();
     inst = wrapper.instance();
   });
 
-  afterEach(() => {
-    ajaxStub.restore();
-  });
-
   it('is valid', () => {
     expect(React.isValidElement(el)).to.equal(true);
   });
@@ -52,8 +52,13 @@ describe('DatasourceModal', () => {
     expect(wrapper.find(DatasourceEditor)).to.have.lengthOf(1);
   });
 
-  it('saves on confirm', () => {
+  it('saves on confirm', (done) => {
     inst.onConfirmSave();
-    expect(ajaxStub.calledOnce).to.equal(true);
+    setTimeout(() => {
+      expect(fetchMock.calls(saveEndpoint)).to.have.lengthOf(1);
+      expect(props.onDatasourceSave.getCall(0).args[0]).to.deep.equal(savePayload);
+      fetchMock.reset();
+      done();
+    }, 0);
   });
 });