[SIP-4] replace explorer ajax calls with SupersetClient (#5869)

* [superset-client] initialize SupersetClient in app setup

* [core] replace explore ajax calls with SupersetClient

* [core] fix SupersetClient explore tests

* [core] remove _packages mistake directory

* remove unused files

* add yarn.lock

* always render modal

* [superset-client][jest] fix SaveModal_spec

* [lint] remove unnecessary AbortController global

* yarn.lock

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

@@ -5,12 +5,12 @@ import thunk from 'redux-thunk';
 import { shallow, mount } from 'enzyme';
 import { Modal, Button, Radio } from 'react-bootstrap';
 import sinon from 'sinon';
+import fetchMock from 'fetch-mock';
 
 import * as exploreUtils from '../../../../src/explore/exploreUtils';
 import * as saveModalActions from '../../../../src/explore/actions/saveModalActions';
 import SaveModal from '../../../../src/explore/components/SaveModal';
-
-const $ = window.$ = require('jquery');
+import setupSupersetClient from '../../../helpers/setupSupersetClient';
 
 describe('SaveModal', () => {
   const middlewares = [thunk];
@@ -44,9 +44,11 @@ describe('SaveModal', () => {
     },
     value: 'mock value',
   };
-  const getWrapper = () => (shallow(<SaveModal {...defaultProps} />, {
-    context: { store },
-  }).dive());
+
+  const getWrapper = () =>
+    shallow(<SaveModal {...defaultProps} />, {
+      context: { store },
+    }).dive();
 
   it('renders a Modal with 7 inputs and 2 buttons', () => {
     const wrapper = getWrapper();
@@ -115,13 +117,17 @@ describe('SaveModal', () => {
 
   describe('saveOrOverwrite', () => {
     beforeEach(() => {
-      sinon.stub(exploreUtils, 'getExploreUrlAndPayload').callsFake(() => ({ url: 'mockURL', payload: defaultProps.form_data }));
-      sinon.stub(saveModalActions, 'saveSlice').callsFake(() => {
-        const d = $.Deferred();
-        d.resolve('done');
-        return d.promise();
-      });
+      sinon
+        .stub(exploreUtils, 'getExploreUrlAndPayload')
+        .callsFake(() => ({ url: 'mockURL', payload: defaultProps.form_data }));
+
+      sinon
+        .stub(saveModalActions, 'saveSlice')
+        .callsFake(() =>
+          Promise.resolve({ data: { dashboard: '/mock/', slice: { slice_url: '/mock/' } } }),
+        );
     });
+
     afterEach(() => {
       exploreUtils.getExploreUrlAndPayload.restore();
       saveModalActions.saveSlice.restore();
@@ -133,6 +139,7 @@ describe('SaveModal', () => {
       const args = saveModalActions.saveSlice.getCall(0).args;
       expect(args[0]).toEqual(defaultProps.form_data);
     });
+
     it('existing dashboard', () => {
       const wrapper = getWrapper();
       const saveToDashboardId = 100;
@@ -146,6 +153,7 @@ describe('SaveModal', () => {
       const args = saveModalActions.saveSlice.getCall(0).args;
       expect(args[1].save_to_dashboard_id).toBe(saveToDashboardId);
     });
+
     it('new dashboard', () => {
       const wrapper = getWrapper();
       const newDashboardName = 'new dashboard name';
@@ -161,52 +169,68 @@ describe('SaveModal', () => {
     });
   });
 
-  describe('should fetchDashboards', () => {
+  describe('fetchDashboards', () => {
     let dispatch;
-    let request;
-    let ajaxStub;
+    let actionThunk;
     const userID = 1;
+
+    const mockDashboardData = {
+      pks: ['id'],
+      result: [{ id: 'id', dashboard_title: 'dashboard title' }],
+    };
+
+    const saveEndpoint = `glob:*/dashboardasync/api/read?_flt_0_owners=${1}`;
+
+    beforeAll(() => {
+      setupSupersetClient();
+      fetchMock.get(saveEndpoint, mockDashboardData);
+    });
+
+    afterAll(fetchMock.restore);
+
     beforeEach(() => {
       dispatch = sinon.spy();
-      ajaxStub = sinon.stub($, 'ajax');
     });
+
     afterEach(() => {
-      ajaxStub.restore();
+      fetchMock.resetHistory();
     });
-    const mockDashboardData = {
-      pks: ['value'],
-      result: [
-        { dashboard_title: 'dashboard title' },
-      ],
-    };
+
     const makeRequest = () => {
-      request = saveModalActions.fetchDashboards(userID);
-      request(dispatch);
+      actionThunk = saveModalActions.fetchDashboards(userID);
+      return actionThunk(dispatch);
     };
 
-    it('makes the ajax request', () => {
-      makeRequest();
-      expect(ajaxStub.callCount).toBe(1);
-    });
+    it('makes the fetch request', () => (
+      makeRequest().then(() => {
+        expect(fetchMock.calls(saveEndpoint)).toHaveLength(1);
 
-    it('calls correct url', () => {
-      const url = '/dashboardasync/api/read?_flt_0_owners=' + userID;
-      makeRequest();
-      expect(ajaxStub.getCall(0).args[0].url).toBe(url);
-    });
+        return Promise.resolve();
+      })
+    ));
+
+    it('calls correct actions on success', () => (
+      makeRequest().then(() => {
+        expect(dispatch.callCount).toBe(1);
+        expect(dispatch.getCall(0).args[0].type).toBe(
+          saveModalActions.FETCH_DASHBOARDS_SUCCEEDED,
+        );
+
+        return Promise.resolve();
+      })
+    ));
 
     it('calls correct actions on error', () => {
-      ajaxStub.yieldsTo('error', { responseJSON: { error: 'error text' } });
-      makeRequest();
-      expect(dispatch.callCount).toBe(1);
-      expect(dispatch.getCall(0).args[0].type).toBe(saveModalActions.FETCH_DASHBOARDS_FAILED);
-    });
+      fetchMock.get(saveEndpoint, { throws: 'error' }, { overwriteRoutes: true });
 
-    it('calls correct actions on success', () => {
-      ajaxStub.yieldsTo('success', mockDashboardData);
-      makeRequest();
-      expect(dispatch.callCount).toBe(1);
-      expect(dispatch.getCall(0).args[0].type).toBe(saveModalActions.FETCH_DASHBOARDS_SUCCEEDED);
+      return makeRequest().then(() => {
+        expect(dispatch.callCount).toBe(1);
+        expect(dispatch.getCall(0).args[0].type).toBe(saveModalActions.FETCH_DASHBOARDS_FAILED);
+
+        fetchMock.get(saveEndpoint, mockDashboardData, { overwriteRoutes: true });
+
+        return Promise.resolve();
+      });
     });
   });