Save modal component for explore v2 (apache#1612)

* Added specs for SaveModal

* Move datasource_id and datasource_name to form_data

* Add comments

* Deleted redundant fetchDashboard

* Replcae has_key for python3

* More react and less jquery

* Added alert for save slice

* Small changes based on comments

* Use react bootstrap

superset/assets/javascripts/explore/components/QueryAndSaveBtns.jsx

@@ -4,9 +4,14 @@ import classnames from 'classnames';
 const propTypes = {
   canAdd: PropTypes.string.isRequired,
   onQuery: PropTypes.func.isRequired,
+  onSave: PropTypes.func,
 };
 
-export default function QueryAndSaveBtns({ canAdd, onQuery }) {
+const defaultProps = {
+  onSave: () => {},
+};
+
+export default function QueryAndSaveBtns({ canAdd, onQuery, onSave }) {
   const saveClasses = classnames('btn btn-default btn-sm', {
     'disabled disabledButton': canAdd !== 'True',
   });
@@ -21,6 +26,7 @@ export default function QueryAndSaveBtns({ canAdd, onQuery }) {
         className={saveClasses}
         data-target="#save_modal"
         data-toggle="modal"
+        onClick={onSave}
       >
         <i className="fa fa-plus-circle"></i> Save as
       </button>
@@ -29,3 +35,4 @@ export default function QueryAndSaveBtns({ canAdd, onQuery }) {
 }
 
 QueryAndSaveBtns.propTypes = propTypes;
+QueryAndSaveBtns.defaultProps = defaultProps;

superset/assets/javascripts/explorev2/actions/exploreActions.js

@@ -155,3 +155,53 @@ export const REMOVE_CHART_ALERT = 'REMOVE_CHART_ALERT';
 export function removeChartAlert() {
   return { type: REMOVE_CHART_ALERT };
 }
+
+export const FETCH_DASHBOARDS_SUCCEEDED = 'FETCH_DASHBOARDS_SUCCEEDED';
+export function fetchDashboardsSucceeded(choices) {
+  return { type: FETCH_DASHBOARDS_SUCCEEDED, choices };
+}
+
+export const FETCH_DASHBOARDS_FAILED = 'FETCH_DASHBOARDS_FAILED';
+export function fetchDashboardsFailed(userId) {
+  return { type: FETCH_FAILED, userId };
+}
+
+export function fetchDashboards(userId) {
+  return function (dispatch) {
+    const url = '/dashboardmodelviewasync/api/read?_flt_0_owners=' + userId;
+    $.get(url, function (data, status) {
+      if (status === 'success') {
+        const choices = [];
+        for (let i = 0; i < data.pks.length; i++) {
+          choices.push({ value: data.pks[i], label: data.result[i].dashboard_title });
+        }
+        dispatch(fetchDashboardsSucceeded(choices));
+      } else {
+        dispatch(fetchDashboardsFailed(userId));
+      }
+    });
+  };
+}
+
+export const SAVE_SLICE_FAILED = 'SAVE_SLICE_FAILED';
+export function saveSliceFailed() {
+  return { type: SAVE_SLICE_FAILED };
+}
+
+export const REMOVE_SAVE_MODAL_ALERT = 'REMOVE_SAVE_MODAL_ALERT';
+export function removeSaveModalAlert() {
+  return { type: REMOVE_SAVE_MODAL_ALERT };
+}
+
+export function saveSlice(url) {
+  return function (dispatch) {
+    $.get(url, (data, status) => {
+      if (status === 'success') {
+        // Go to new slice url or dashboard url
+        window.location = data;
+      } else {
+        dispatch(saveSliceFailed());
+      }
+    });
+  };
+}

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -215,8 +215,4 @@ function mapStateToProps(state) {
   };
 }
 
-function mapDispatchToProps() {
-  return {};
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChartContainer);
+export default connect(mapStateToProps, () => ({}))(ChartContainer);

superset/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx

@@ -108,8 +108,6 @@ function mapStateToProps(state) {
     alert: state.controlPanelAlert,
     isDatasourceMetaLoading: state.isDatasourceMetaLoading,
     fields: state.fields,
-    datasource_type: state.datasource_type,
-    form_data: state.viz.form_data,
   };
 }
 

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -5,6 +5,7 @@ import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 import ChartContainer from './ChartContainer';
 import ControlPanelsContainer from './ControlPanelsContainer';
+import SaveModal from './SaveModal';
 import QueryAndSaveBtns from '../../explore/components/QueryAndSaveBtns';
 const $ = require('jquery');
 
@@ -20,6 +21,7 @@ class ExploreViewContainer extends React.Component {
     super(props);
     this.state = {
       height: this.getHeight(),
+      showModal: false,
     };
   }
 
@@ -63,6 +65,10 @@ class ExploreViewContainer extends React.Component {
       this.props.datasource_type, this.props.form_data.datasource, data);
   }
 
+  toggleModal() {
+    this.setState({ showModal: !this.state.showModal });
+  }
+
   render() {
     return (
       <div
@@ -72,16 +78,26 @@ class ExploreViewContainer extends React.Component {
           overflow: 'hidden',
         }}
       >
+      {this.state.showModal &&
+        <SaveModal
+          onHide={this.toggleModal.bind(this)}
+          actions={this.props.actions}
+          form_data={this.props.form_data}
+          datasource_type={this.props.datasource_type}
+        />
+      }
         <div className="row">
           <div className="col-sm-4">
             <QueryAndSaveBtns
               canAdd="True"
               onQuery={this.onQuery.bind(this)}
+              onSave={this.toggleModal.bind(this)}
             />
             <br /><br />
             <ControlPanelsContainer
               actions={this.props.actions}
               form_data={this.props.form_data}
+              datasource_type={this.props.datasource_type}
             />
           </div>
           <div className="col-sm-8">
@@ -112,6 +128,5 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export { ControlPanelsContainer };
-
+export { ExploreViewContainer };
 export default connect(mapStateToProps, mapDispatchToProps)(ExploreViewContainer);

superset/assets/javascripts/explorev2/components/FieldSet.jsx

@@ -14,7 +14,11 @@ const propTypes = {
   places: PropTypes.number,
   validators: PropTypes.any,
   onChange: React.PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.array]).isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array]).isRequired,
 };
 
 const defaultProps = {