apply redux for VisualizeModal (#2795)

* redux visualize modal

* redux visualize modal

- apply redux
- add unit test for connect container component
- fix lint error

* redux visualize modal

- apply redux
- add unit test for connect container component
- fix lint error

superset/assets/javascripts/SqlLab/actions.js

@@ -37,6 +37,10 @@ export const REMOVE_DATA_PREVIEW = 'REMOVE_DATA_PREVIEW';
 export const CHANGE_DATA_PREVIEW_ID = 'CHANGE_DATA_PREVIEW_ID';
 export const SAVE_QUERY = 'SAVE_QUERY';
 
+export const CREATE_DATASOURCE_STARTED = 'CREATE_DATASOURCE_STARTED';
+export const CREATE_DATASOURCE_SUCCESS = 'CREATE_DATASOURCE_SUCCESS';
+export const CREATE_DATASOURCE_FAILED = 'CREATE_DATASOURCE_FAILED';
+
 export function resetState() {
   return { type: RESET_STATE };
 }
@@ -382,3 +386,37 @@ export function popSavedQuery(saveQueryId) {
     });
   };
 }
+
+export function createDatasourceStarted() {
+  return { type: CREATE_DATASOURCE_STARTED };
+}
+export function createDatasourceSuccess(response) {
+  const data = JSON.parse(response);
+  const datasource = `${data.table_id}__table`;
+  return { type: CREATE_DATASOURCE_SUCCESS, datasource };
+}
+export function createDatasourceFailed(err) {
+  return { type: CREATE_DATASOURCE_FAILED, err };
+}
+
+export function createDatasource(vizOptions, context) {
+  return (dispatch) => {
+    dispatch(createDatasourceStarted());
+
+    return $.ajax({
+      type: 'POST',
+      url: '/superset/sqllab_viz/',
+      data: {
+        data: JSON.stringify(vizOptions),
+      },
+      context,
+      dataType: 'json',
+      success: (resp) => {
+        dispatch(createDatasourceSuccess(resp));
+      },
+      error: () => {
+        dispatch(createDatasourceFailed('An error occurred while creating the data source'));
+      },
+    });
+  };
+}

superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx

@@ -1,13 +1,15 @@
 /* global notify */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import { Alert, Button, Col, Modal } from 'react-bootstrap';
 
 import Select from 'react-select';
 import { Table } from 'reactable';
 import shortid from 'shortid';
-import $ from 'jquery';
 import { getExploreUrl } from '../../explorev2/exploreUtils';
+import * as actions from '../actions';
 
 const CHART_TYPES = [
   { value: 'dist_bar', label: 'Distribution - Bar Chart', requiresTime: false },
@@ -17,9 +19,12 @@ const CHART_TYPES = [
 ];
 
 const propTypes = {
+  actions: PropTypes.object.isRequired,
   onHide: PropTypes.func,
   query: PropTypes.object,
   show: PropTypes.bool,
+  datasource: PropTypes.string,
+  errorMessage: PropTypes.string,
 };
 const defaultProps = {
   show: false,
@@ -121,22 +126,14 @@ class VisualizeModal extends React.PureComponent {
       sql: this.props.query.sql,
       dbId: this.props.query.dbId,
     };
-    notify.info('Creating a data source and popping a new tab');
-    $.ajax({
-      type: 'POST',
-      url: '/superset/sqllab_viz/',
-      async: false,
-      data: {
-        data: JSON.stringify(vizOptions),
-      },
-      dataType: 'json',
-      success: (resp) => {
+
+    this.props.actions.createDatasource(vizOptions, this)
+      .done(() => {
         const columns = Object.keys(this.state.columns).map(k => this.state.columns[k]);
-        const data = JSON.parse(resp);
         const mainMetric = columns.filter(d => d.agg)[0];
         const mainGroupBy = columns.filter(d => d.is_dim)[0];
         const formData = {
-          datasource: `${data.table_id}__table`,
+          datasource: this.props.datasource,
           viz_type: this.state.chartType.value,
           since: '100 years ago',
           limit: '0',
@@ -148,14 +145,16 @@ class VisualizeModal extends React.PureComponent {
         if (mainGroupBy) {
           formData.groupby = [mainGroupBy.name];
         }
+        notify.info('Creating a data source and popping a new tab');
+
         window.open(getExploreUrl(formData));
-      },
-      error: () => notify('An error occurred while creating the data source'),
-    });
+      })
+      .fail(() => {
+        notify.error(this.props.errorMessage);
+      });
   }
   changeDatasourceName(event) {
-    this.setState({ datasourceName: event.target.value });
-    this.validate();
+    this.setState({ datasourceName: event.target.value }, this.validate);
   }
   changeCheckbox(attr, columnName, event) {
     let columns = this.mergedColumns();
@@ -271,4 +270,19 @@ class VisualizeModal extends React.PureComponent {
 VisualizeModal.propTypes = propTypes;
 VisualizeModal.defaultProps = defaultProps;
 
-export default VisualizeModal;
+function mapStateToProps(state) {
+  return {
+    datasource: state.datasource,
+    errorMessage: state.errorMessage,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export { VisualizeModal };
+export default connect(mapStateToProps, mapDispatchToProps)(VisualizeModal);
+

superset/assets/javascripts/SqlLab/reducers.js

@@ -251,6 +251,25 @@ export const sqlLabReducer = function (state, action) {
       }
       return Object.assign({}, state, { queries: newQueries, queriesLastUpdate });
     },
+    [actions.CREATE_DATASOURCE_STARTED]() {
+      return Object.assign({}, state, {
+        isDatasourceLoading: true,
+        errorMessage: null,
+      });
+    },
+    [actions.CREATE_DATASOURCE_SUCCESS]() {
+      return Object.assign({}, state, {
+        isDatasourceLoading: false,
+        errorMessage: null,
+        datasource: action.datasource,
+      });
+    },
+    [actions.CREATE_DATASOURCE_FAILED]() {
+      return Object.assign({}, state, {
+        isDatasourceLoading: false,
+        errorMessage: action.err,
+      });
+    },
   };
   if (action.type in actionHandlers) {
     return actionHandlers[action.type]();