feat: Sqllab to Explore UX improvements

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

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import { Radio, AutoComplete, Input } from 'src/common/components';
+import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
+
+describe('SaveDatasetModal', () => {
+  const mockedProps = {};
+  it('renders a radio group btn', () => {
+    const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
+    expect(wrapper.find(Radio.Group)).toExist();
+  });
+  it('renders a autocomplete', () => {
+    const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
+    expect(wrapper.find(AutoComplete)).toExist();
+  });
+  it('renders an input form ', () => {
+    const wrapper = shallow(<SaveDatasetModal {...mockedProps} />);
+    expect(wrapper.find(Input)).toExist();
+  });
+});

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

@@ -37,6 +37,7 @@ const propTypes = {
   errorMessage: PropTypes.string,
   timeout: PropTypes.number,
   database: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 const defaultProps = {
   query: {},
@@ -45,34 +46,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 +102,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 +153,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')}
         >