feat: Sqllab to Explore UX improvements

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

@@ -24,7 +24,6 @@ import sinon from 'sinon';
 import fetchMock from 'fetch-mock';
 import shortid from 'shortid';
 import sqlLabReducer from 'src/SqlLab/reducers/index';
-import * as actions from 'src/SqlLab/actions/sqlLab';
 import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
 import * as exploreUtils from 'src/explore/exploreUtils';
 import Button from 'src/components/Button';
@@ -184,77 +183,5 @@ describe('ExploreResultsButton', () => {
       wrapper.instance().buildVizOptions.restore();
       fetchMock.reset();
     });
-
-    it('should build request with correct args', () => {
-      return new Promise(done => {
-        wrapper.instance().visualize();
-
-        setTimeout(() => {
-          const calls = fetchMock.calls(visualizeEndpoint);
-          expect(calls).toHaveLength(1);
-          const formData = calls[0][1].body;
-          Object.keys(mockOptions).forEach(key => {
-            // eslint-disable-next-line no-unused-expressions
-            expect(formData.get(key)).toBeDefined();
-          });
-
-          done();
-        });
-      });
-    });
-
-    it('should export chart and add an info toast', () => {
-      return new Promise(done => {
-        const infoToastSpy = sinon.spy();
-        const datasourceSpy = sinon.stub();
-
-        datasourceSpy.callsFake(() => Promise.resolve(visualizationPayload));
-
-        wrapper.setProps({
-          actions: {
-            addInfoToast: infoToastSpy,
-            createDatasource: datasourceSpy,
-          },
-        });
-
-        wrapper.instance().visualize();
-
-        setTimeout(() => {
-          expect(datasourceSpy.callCount).toBe(1);
-          expect(exploreUtils.exploreChart.callCount).toBe(1);
-          expect(exploreUtils.exploreChart.getCall(0).args[0].datasource).toBe(
-            '107__table',
-          );
-          expect(infoToastSpy.callCount).toBe(1);
-          done();
-        });
-      });
-    });
-
-    it('should add error toast', () => {
-      return new Promise(done => {
-        const dangerToastSpy = sinon.stub(actions, 'addDangerToast');
-        const datasourceSpy = sinon.stub();
-
-        datasourceSpy.callsFake(() => Promise.reject({ error: 'error' }));
-
-        wrapper.setProps({
-          actions: {
-            createDatasource: datasourceSpy,
-            addDangerToast: dangerToastSpy,
-          },
-        });
-
-        wrapper.instance().visualize();
-
-        setTimeout(() => {
-          expect(datasourceSpy.callCount).toBe(1);
-          expect(exploreUtils.exportChart.callCount).toBe(0);
-          expect(dangerToastSpy.callCount).toBe(1);
-          dangerToastSpy.restore();
-          done();
-        });
-      });
-    });
   });
 });

superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx

@@ -30,11 +30,16 @@ describe('SaveDatasetModal', () => {
     userDatasetsOwned: [],
     handleSaveDatasetRadioBtnState: () => {},
     saveDatasetRadioBtnState: 1,
-    shouldOverwriteDataset: false,
     handleOverwriteCancel: () => {},
     handleOverwriteDataset: () => {},
     handleOverwriteDatasetOption: () => {},
     defaultCreateDatasetValue: 'someDatasets',
+    shouldOverwriteDataset: false,
+    userDatasetOptions: [],
+    disableSaveAndExploreBtn: false,
+    handleSaveDatasetModalSearch: () => {},
+    filterAutocompleteOption: () => false,
+    onChangeAutoComplete: () => {},
   };
   it('renders a radio group btn', () => {
     const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);

superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx

@@ -26,9 +26,7 @@ import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import shortid from 'shortid';
 
-import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
-import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
 
 const propTypes = {
@@ -37,6 +35,7 @@ const propTypes = {
   errorMessage: PropTypes.string,
   timeout: PropTypes.number,
   database: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 const defaultProps = {
   query: {},
@@ -45,34 +44,12 @@ const defaultProps = {
 class ExploreResultsButton extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.visualize = this.visualize.bind(this);
-    this.onClick = this.onClick.bind(this);
     this.getInvalidColumns = this.getInvalidColumns.bind(this);
     this.renderInvalidColumnMessage = this.renderInvalidColumnMessage.bind(
       this,
     );
   }
 
-  onClick() {
-    const { timeout } = this.props;
-    const msg = this.renderInvalidColumnMessage();
-    if (Math.round(this.getQueryDuration()) > timeout) {
-      Modal.confirm({
-        title: t('Explore'),
-        content: this.renderTimeoutWarning(),
-        onOk: this.visualize,
-        icon: null,
-      });
-    } else if (msg) {
-      Modal.warning({
-        title: t('Explore'),
-        content: msg,
-      });
-    } else {
-      this.visualize();
-    }
-  }
-
   getColumns() {
     const { props } = this;
     if (
@@ -123,35 +100,6 @@ class ExploreResultsButton extends React.PureComponent {
     };
   }
 
-  visualize() {
-    this.props.actions
-      .createDatasource(this.buildVizOptions())
-      .then(data => {
-        const columns = this.getColumns();
-        const formData = {
-          datasource: `${data.table_id}__table`,
-          metrics: [],
-          groupby: [],
-          time_range: 'No filter',
-          viz_type: 'table',
-          all_columns: columns.map(c => c.name),
-          row_limit: 1000,
-        };
-
-        this.props.actions.addInfoToast(
-          t('Creating a data source and creating a new tab'),
-        );
-
-        // open new window for data visualization
-        exploreChart(formData);
-      })
-      .catch(() => {
-        this.props.actions.addDangerToast(
-          this.props.errorMessage || t('An error occurred'),
-        );
-      });
-  }
-
   renderTimeoutWarning() {
     return (
       <Alert bsStyle="warning">
@@ -203,7 +151,7 @@ class ExploreResultsButton extends React.PureComponent {
       <>
         <Button
           buttonSize="small"
-          onClick={this.onClick}
+          onClick={this.props.onClick}
           disabled={!allowsSubquery}
           tooltip={t('Explore the result set in the data exploration view')}
         >