Add visualization flow to the CTA queries (#9370)

* Visualize after running Ctas query (#4)

* Visualize after running Ctas query.

Stub for table viz

Work on the viz

Add JS functionality for Ctas viz

Add test for the table viz flow

Fix test

Add js test for the ctas viz

* Fix tests

* Resolve comments

* Leverate tmpSchema in the query object

* Fix i18n string

Co-authored-by: bogdan kyryliuk <bogdankyryliuk@dropbox.com>

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',
+      });
+    });
+  });
+});