[explore] Split large reducer logic in ExploreViewContainer (#3088)

* split reducer logic for ExploreViewContainer

* fix saveModal component and unit tests

* revert changes in SaveModal_spec.
will make another commit just to improve test coverage for SaveModal component.

* remove comment-out code

* fix merge confilicts

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

@@ -322,29 +322,29 @@ class ChartContainer extends React.PureComponent {
 
 ChartContainer.propTypes = propTypes;
 
-function mapStateToProps(state) {
-  const formData = getFormDataFromControls(state.controls);
+function mapStateToProps({ explore, chart }) {
+  const formData = getFormDataFromControls(explore.controls);
   return {
-    alert: state.chartAlert,
-    can_overwrite: state.can_overwrite,
-    can_download: state.can_download,
-    chartStatus: state.chartStatus,
-    chartUpdateEndTime: state.chartUpdateEndTime,
-    chartUpdateStartTime: state.chartUpdateStartTime,
-    datasource: state.datasource,
-    column_formats: state.datasource ? state.datasource.column_formats : null,
-    containerId: state.slice ? `slice-container-${state.slice.slice_id}` : 'slice-container',
+    alert: explore.chartAlert,
+    can_overwrite: explore.can_overwrite,
+    can_download: explore.can_download,
+    datasource: explore.datasource,
+    column_formats: explore.datasource ? explore.datasource.column_formats : null,
+    containerId: explore.slice ? `slice-container-${explore.slice.slice_id}` : 'slice-container',
     formData,
-    latestQueryFormData: state.latestQueryFormData,
-    isStarred: state.isStarred,
-    queryResponse: state.queryResponse,
-    slice: state.slice,
-    standalone: state.standalone,
+    isStarred: explore.isStarred,
+    slice: explore.slice,
+    standalone: explore.standalone,
     table_name: formData.datasource_name,
     viz_type: formData.viz_type,
-    triggerRender: state.triggerRender,
-    datasourceType: state.datasource.type,
-    datasourceId: state.datasource_id,
+    triggerRender: explore.triggerRender,
+    datasourceType: explore.datasource.type,
+    datasourceId: explore.datasource_id,
+    chartStatus: chart.chartStatus,
+    chartUpdateEndTime: chart.chartUpdateEndTime,
+    chartUpdateStartTime: chart.chartUpdateStartTime,
+    latestQueryFormData: chart.latestQueryFormData,
+    queryResponse: chart.queryResponse,
   };
 }
 

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

@@ -96,12 +96,12 @@ class ControlPanelsContainer extends React.Component {
 
 ControlPanelsContainer.propTypes = propTypes;
 
-function mapStateToProps(state) {
+function mapStateToProps({ explore }) {
   return {
-    alert: state.controlPanelAlert,
-    isDatasourceMetaLoading: state.isDatasourceMetaLoading,
-    controls: state.controls,
-    exploreState: state,
+    alert: explore.controlPanelAlert,
+    isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
+    controls: explore.controls,
+    exploreState: explore,
   };
 }
 

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

@@ -8,12 +8,15 @@ import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from './QueryAndSaveBtns';
 import { getExploreUrl } from '../exploreUtils';
-import * as actions from '../actions/exploreActions';
 import { getFormDataFromControls } from '../stores/store';
+import * as exploreActions from '../actions/exploreActions';
+import * as saveModalActions from '../actions/saveModalActions';
+import * as chartActions from '../actions/chartActions';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
   datasource_type: PropTypes.string.isRequired,
+  isDatasourceMetaLoading: PropTypes.bool.isRequired,
   chartStatus: PropTypes.string,
   controls: PropTypes.object.isRequired,
   forcedHeight: PropTypes.string,
@@ -85,7 +88,6 @@ class ExploreViewContainer extends React.Component {
     return `${window.innerHeight - navHeight}px`;
   }
 
-
   triggerQueryIfNeeded() {
     if (this.props.triggerQuery && !this.hasErrors()) {
       this.props.actions.runQuery(this.props.form_data);
@@ -172,7 +174,9 @@ class ExploreViewContainer extends React.Component {
             <ControlPanelsContainer
               actions={this.props.actions}
               form_data={this.props.form_data}
+              controls={this.props.controls}
               datasource_type={this.props.datasource_type}
+              isDatasourceMetaLoading={this.props.isDatasourceMetaLoading}
             />
           </div>
           <div className="col-sm-8">
@@ -186,21 +190,23 @@ class ExploreViewContainer extends React.Component {
 
 ExploreViewContainer.propTypes = propTypes;
 
-function mapStateToProps(state) {
-  const form_data = getFormDataFromControls(state.controls);
+function mapStateToProps({ explore, chart }) {
+  const form_data = getFormDataFromControls(explore.controls);
   return {
-    chartStatus: state.chartStatus,
-    datasource_type: state.datasource.type,
-    controls: state.controls,
+    isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
+    datasource_type: explore.datasource.type,
+    controls: explore.controls,
     form_data,
-    standalone: state.standalone,
-    triggerQuery: state.triggerQuery,
-    forcedHeight: state.forced_height,
-    queryRequest: state.queryRequest,
+    standalone: explore.standalone,
+    triggerQuery: explore.triggerQuery,
+    forcedHeight: explore.forced_height,
+    queryRequest: chart.queryRequest,
+    chartStatus: chart.chartStatus,
   };
 }
 
 function mapDispatchToProps(dispatch) {
+  const actions = Object.assign({}, exploreActions, saveModalActions, chartActions);
   return {
     actions: bindActionCreators(actions, dispatch),
   };

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

@@ -1,10 +1,11 @@
 /* eslint camelcase: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import $ from 'jquery';
+import { connect } from 'react-redux';
+
 import { Modal, Alert, Button, Radio } from 'react-bootstrap';
 import Select from 'react-select';
-import { connect } from 'react-redux';
+import { getExploreUrl } from '../exploreUtils';
 
 const propTypes = {
   can_overwrite: PropTypes.bool,
@@ -102,12 +103,7 @@ class SaveModal extends React.Component {
     }
     sliceParams.goto_dash = gotodash;
 
-    const baseUrl = `/superset/explore/${this.props.datasource.type}/${this.props.datasource.id}/`;
-    sliceParams.datasource_name = this.props.datasource.name;
-
-    const saveUrl = `${baseUrl}?form_data=` +
-      `${encodeURIComponent(JSON.stringify(this.props.form_data))}` +
-      `&${$.param(sliceParams, true)}`;
+    const saveUrl = getExploreUrl(this.props.form_data, 'base', false, null, sliceParams);
     this.props.actions.saveSlice(saveUrl)
       .then((data) => {
         // Go to new slice url or dashboard url
@@ -234,14 +230,14 @@ class SaveModal extends React.Component {
 
 SaveModal.propTypes = propTypes;
 
-function mapStateToProps(state) {
+function mapStateToProps({ explore, saveModal }) {
   return {
-    datasource: state.datasource,
-    slice: state.slice,
-    can_overwrite: state.can_overwrite,
-    user_id: state.user_id,
-    dashboards: state.dashboards,
-    alert: state.saveModalAlert,
+    datasource: explore.datasource,
+    slice: explore.slice,
+    can_overwrite: explore.can_overwrite,
+    user_id: explore.user_id,
+    dashboards: saveModal.dashboards,
+    alert: explore.saveModalAlert,
   };
 }