Add visualization flow to the CTA queries

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -1249,3 +1249,23 @@ export function createDatasource(vizOptions) {
       });
   };
 }
+
+export function createCtasDatasource(vizOptions) {
+  return dispatch => {
+    dispatch(createDatasourceStarted());
+    return SupersetClient.post({
+      endpoint: '/superset/get_or_create_table/',
+      postPayload: { data: vizOptions },
+    })
+      .then(({ json }) => {
+        dispatch(createDatasourceSuccess(json));
+
+        return json;
+      })
+      .catch(() => {
+        const errorMsg = t('An error occurred while creating the data source');
+        dispatch(createDatasourceFailed(errorMsg));
+        return Promise.reject(new Error(errorMsg));
+      });
+  };
+}

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

@@ -0,0 +1,131 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Dialog from 'react-bootstrap-dialog';
+import { t } from '@superset-ui/translation';
+
+import { exportChart } from '../../explore/exploreUtils';
+import * as actions from '../actions/sqlLab';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
+import Button from '../../components/Button';
+
+const propTypes = {
+  actions: PropTypes.object.isRequired,
+  table: PropTypes.string.isRequired,
+  schema: PropTypes.string,
+  dbId: PropTypes.number.isRequired,
+  errorMessage: PropTypes.string,
+  templateParams: PropTypes.string,
+};
+const defaultProps = {
+  vizRequest: {},
+};
+
+class ExploreCtasResultsButton extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.visualize = this.visualize.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+  onClick() {
+    this.visualize();
+  }
+
+  buildVizOptions() {
+    return {
+      datasourceName: this.props.table,
+      schema: this.props.schema,
+      dbId: this.props.dbId,
+      templateParams: this.props.templateParams,
+    };
+  }
+  visualize() {
+    this.props.actions
+      .createCtasDatasource(this.buildVizOptions())
+      .then(data => {
+        const formData = {
+          datasource: `${data.table_id}__table`,
+          metrics: ['count'],
+          groupby: [],
+          viz_type: 'table',
+          since: '100 years ago',
+          all_columns: [],
+          row_limit: 1000,
+        };
+        this.props.actions.addInfoToast(
+          t('Creating a data source and creating a new tab'),
+        );
+
+        // open new window for data visualization
+        exportChart(formData);
+      })
+      .catch(() => {
+        this.props.actions.addDangerToast(
+          this.props.errorMessage || t('An error occurred'),
+        );
+      });
+  }
+  render() {
+    return (
+      <>
+        <Button
+          bsSize="small"
+          onClick={this.onClick}
+          tooltip={t('Explore the result set in the data exploration view')}
+        >
+          <InfoTooltipWithTrigger
+            icon="line-chart"
+            placement="top"
+            label="explore"
+          />{' '}
+          {t('Explore')}
+        </Button>
+        <Dialog
+          ref={el => {
+            this.dialog = el;
+          }}
+        />
+      </>
+    );
+  }
+}
+ExploreCtasResultsButton.propTypes = propTypes;
+ExploreCtasResultsButton.defaultProps = defaultProps;
+
+function mapStateToProps({ sqlLab, common }) {
+  return {
+    errorMessage: sqlLab.errorMessage,
+    timeout: common.conf ? common.conf.SUPERSET_WEBSERVER_TIMEOUT : null,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export { ExploreCtasResultsButton };
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ExploreCtasResultsButton);

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

@@ -23,6 +23,7 @@ import shortid from 'shortid';
 import { t } from '@superset-ui/translation';
 
 import Loading from '../../components/Loading';
+import ExploreCtasResultsButton from './ExploreCtasResultsButton';
 import ExploreResultsButton from './ExploreResultsButton';
 import HighlightedSql from './HighlightedSql';
 import FilterableTable from '../../components/FilterableTable/FilterableTable';
@@ -101,13 +102,13 @@ export default class ResultSet extends React.PureComponent {
   clearQueryResults(query) {
     this.props.actions.clearQueryResults(query);
   }
-  popSelectStar() {
+  popSelectStar(tmpSchema, tmpTable) {
     const qe = {
       id: shortid.generate(),
-      title: this.props.query.tempTable,
+      title: tmpTable,
       autorun: false,
       dbId: this.props.query.dbId,
-      sql: `SELECT * FROM ${this.props.query.tempTable}`,
+      sql: `SELECT * FROM ${tmpSchema}.${tmpTable}`,
     };
     this.props.actions.addQueryEditor(qe);
   }
@@ -216,18 +217,38 @@ export default class ResultSet extends React.PureComponent {
         </Alert>
       );
     } else if (query.state === 'success' && query.ctas) {
+      // Async queries
+      let tmpSchema = query.tempSchema;
+      let tmpTable = query.tempTableName;
+      // Sync queries, query.results.query contains the source of truth for them.
+      if (query.results && query.results.query) {
+        tmpTable = query.results.query.tempTable;
+        tmpSchema = query.results.query.tempSchema;
+      }
       return (
         <div>
           <Alert bsStyle="info">
-            {t('Table')} [<strong>{query.tempTable}</strong>] {t('was created')}{' '}
-            &nbsp;
-            <Button
-              bsSize="small"
-              className="m-r-5"
-              onClick={this.popSelectStar}
-            >
-              {t('Query in a new tab')}
-            </Button>
+            {t('Table')} [
+            <strong>
+              {tmpSchema}.{tmpTable}
+            </strong>
+            ] {t('was created')} &nbsp;
+            <ButtonGroup>
+              <Button
+                bsSize="small"
+                className="m-r-5"
+                onClick={() => this.popSelectStar(tmpSchema, tmpTable)}
+              >
+                {t('Query in a new tab')}
+              </Button>
+              <ExploreCtasResultsButton
+                table={tmpTable}
+                schema={tmpSchema}
+                dbId={query.dbId}
+                database={this.props.database}
+                actions={this.props.actions}
+              />
+            </ButtonGroup>
           </Alert>
         </div>
       );

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

@@ -0,0 +1,78 @@
+/**
+ * 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 configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import sqlLabReducer from '../../../src/SqlLab/reducers/index';
+import ExploreCtasResultsButton from '../../../src/SqlLab/components/ExploreCtasResultsButton';
+import Button from '../../../src/components/Button';
+
+describe('ExploreCtasResultsButton', () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    sqlLab: {
+      ...sqlLabReducer(undefined, {}),
+    },
+    common: {
+      conf: { SUPERSET_WEBSERVER_TIMEOUT: 45 },
+    },
+  };
+  const store = mockStore(initialState);
+  const mockedProps = {
+    table: 'dummy_table',
+    schema: 'dummy_schema',
+    dbId: 123,
+  };
+  const getExploreCtasResultsButtonWrapper = (props = mockedProps) =>
+    shallow(<ExploreCtasResultsButton {...props} />, {
+      context: { store },
+    }).dive();
+
+  it('renders', () => {
+    expect(React.isValidElement(<ExploreCtasResultsButton />)).toBe(true);
+  });
+
+  it('renders with props', () => {
+    expect(React.isValidElement(<s {...mockedProps} />)).toBe(true);
+  });
+
+  it('renders a Button', () => {
+    const wrapper = getExploreCtasResultsButtonWrapper();
+    expect(wrapper.find(Button)).toHaveLength(1);
+  });
+
+  describe('datasourceName', () => {
+    it('should build viz options', () => {
+      const wrapper = getExploreCtasResultsButtonWrapper();
+      const spy = sinon.spy(wrapper.instance(), 'buildVizOptions');
+      wrapper.instance().buildVizOptions();
+      expect(spy.returnValues[0]).toEqual({
+        schema: 'dummy_schema',
+        dbId: 123,
+        templateParams: undefined,
+        datasourceName: 'dummy_table',
+      });
+    });
+  });
+});