[explorev2] Bug fixes in Save Modal (#1707)

* Bug fixes in Save Modal
Issues solved:
 - Save button doesn't pass in gotodash
 - slice_name was passed in from store as original slice_name instead of
   new one in 'saveas' action
 - datasource_type wasn't passed in to defaultViz and defaultForm
   function

* Change css filename to exploreV2

* Moved out utils

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

@@ -8,7 +8,7 @@ import ControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
 import QueryAndSaveBtns from '../../explore/components/QueryAndSaveBtns';
 import { autoQueryFields } from '../stores/store';
-import { getParamObject } from '../../modules/utils.js';
+import { getParamObject } from '../exploreUtils';
 
 const $ = require('jquery');
 

superset/assets/javascripts/explorev2/components/SaveModal.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import { Modal, Alert, Button, Radio } from 'react-bootstrap';
 import Select from 'react-select';
 import { connect } from 'react-redux';
-import { getParamObject } from '../../modules/utils.js';
+import { getParamObject } from '../exploreUtils';
 
 const propTypes = {
   can_edit: PropTypes.bool,
@@ -58,7 +58,8 @@ class SaveModal extends React.Component {
   saveOrOverwrite(gotodash) {
     this.setState({ alert: null });
     this.props.actions.removeSaveModalAlert();
-    const params = getParamObject(this.props.form_data, this.props.datasource_type);
+    const params = getParamObject(
+      this.props.form_data, this.props.datasource_type, this.state.action === 'saveas');
     const sliceParams = {};
     params.datasource_name = this.props.form_data.datasource_name;
 
@@ -199,7 +200,7 @@ class SaveModal extends React.Component {
             type="button"
             id="btn_modal_save"
             className="btn pull-left"
-            onClick={this.saveOrOverwrite.bind(this)}
+            onClick={this.saveOrOverwrite.bind(this, false)}
           >
             Save
           </Button>

superset/assets/javascripts/explorev2/exploreUtils.js

@@ -0,0 +1,33 @@
+/* eslint camelcase: 0 */
+function formatFilters(filters) {
+  // outputs an object of url params of filters
+  // prefix can be 'flt' or 'having'
+  const params = {};
+  for (let i = 0; i < filters.length; i++) {
+    const filter = filters[i];
+    params[`${filter.prefix}_col_${i + 1}`] = filter.col;
+    params[`${filter.prefix}_op_${i + 1}`] = filter.op;
+    params[`${filter.prefix}_eq_${i + 1}`] = filter.value;
+  }
+  return params;
+}
+
+export function getParamObject(form_data, datasource_type, saveNewSlice) {
+  const data = {
+    // V2 tag temporarily for updating url
+    // Todo: remove after launch
+    V2: true,
+    datasource_id: form_data.datasource,
+    datasource_type,
+  };
+  Object.keys(form_data).forEach((field) => {
+    // filter out null fields
+    if (form_data[field] !== null && field !== 'datasource'
+      && !(saveNewSlice && field === 'slice_name')) {
+      data[field] = form_data[field];
+    }
+  });
+  const filterParams = formatFilters(form_data.filters);
+  Object.assign(data, filterParams);
+  return data;
+}

superset/assets/javascripts/explorev2/index.jsx

@@ -18,14 +18,16 @@ const bootstrapData = JSON.parse(exploreViewContainer.getAttribute('data-bootstr
 
 import { exploreReducer } from './reducers/exploreReducer';
 
-const bootstrappedState = Object.assign(initialState(bootstrapData.viz.form_data.viz_type), {
-  can_edit: bootstrapData.can_edit,
-  can_download: bootstrapData.can_download,
-  datasources: bootstrapData.datasources,
-  datasource_type: bootstrapData.datasource_type,
-  viz: bootstrapData.viz,
-  user_id: bootstrapData.user_id,
-});
+const bootstrappedState = Object.assign(
+  initialState(bootstrapData.viz.form_data.viz_type, bootstrapData.datasource_type), {
+    can_edit: bootstrapData.can_edit,
+    can_download: bootstrapData.can_download,
+    datasources: bootstrapData.datasources,
+    datasource_type: bootstrapData.datasource_type,
+    viz: bootstrapData.viz,
+    user_id: bootstrapData.user_id,
+  }
+);
 bootstrappedState.viz.form_data.datasource = parseInt(bootstrapData.datasource_id, 10);
 bootstrappedState.viz.form_data.datasource_name = bootstrapData.datasource_name;
 

superset/assets/javascripts/explorev2/stores/store.js

@@ -1715,7 +1715,7 @@ export function defaultFormData(vizType = 'table', datasourceType = 'table') {
   return data;
 }
 
-export function defaultViz(vizType) {
+export function defaultViz(vizType, datasourceType = 'table') {
   return {
     cached_key: null,
     cached_timeout: null,
@@ -1724,14 +1724,14 @@ export function defaultViz(vizType) {
     csv_endpoint: null,
     is_cached: false,
     data: [],
-    form_data: defaultFormData(vizType),
+    form_data: defaultFormData(vizType, datasourceType),
     json_endpoint: null,
     query: null,
     standalone_endpoint: null,
   };
 }
 
-export function initialState(vizType = 'table') {
+export function initialState(vizType = 'table', datasourceType = 'table') {
   return {
     dashboards: [],
     isDatasourceMetaLoading: false,
@@ -1739,7 +1739,7 @@ export function initialState(vizType = 'table') {
     datasource_type: null,
     filterColumnOpts: [],
     fields,
-    viz: defaultViz(vizType),
+    viz: defaultViz(vizType, datasourceType),
     isStarred: false,
   };
 }

superset/assets/javascripts/modules/utils.js

@@ -154,38 +154,6 @@ export function slugify(string) {
           .replace(/-$/, ''); // remove last floating dash
 }
 
-function formatFilters(filters) {
-  // outputs an object of url params of filters
-  // prefix can be 'flt' or 'having'
-  const params = {};
-  for (let i = 0; i < filters.length; i++) {
-    const filter = filters[i];
-    params[`${filter.prefix}_col_${i + 1}`] = filter.col;
-    params[`${filter.prefix}_op_${i + 1}`] = filter.op;
-    params[`${filter.prefix}_eq_${i + 1}`] = filter.value;
-  }
-  return params;
-}
-
-export function getParamObject(form_data, datasource_type) {
-  const data = {
-    // V2 tag temporarily for updating url
-    // Todo: remove after launch
-    V2: true,
-    datasource_id: form_data.datasource,
-    datasource_type,
-  };
-  Object.keys(form_data).forEach((field) => {
-    // filter out null fields
-    if (form_data[field] !== null && field !== 'datasource') {
-      data[field] = form_data[field];
-    }
-  });
-  const filterParams = formatFilters(form_data.filters);
-  Object.assign(data, filterParams);
-  return data;
-}
-
 export function getAjaxErrorMsg(error) {
   const respJSON = error.responseJSON;
   return (respJSON && respJSON.message) ? respJSON.message :

superset/templates/superset/explorev2.html

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block body %}
-  <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/explorev2.css">
+  <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/exploreV2.css">
   <div
     id="js-explore-view-container"
     data-bootstrap="{{ bootstrap_data }}"