Edit Dashboard title and Slice title in place (#2940)

* Edit Dashboard title and Slice title in place

Add EditableTitle component into Dashboard and Explore view to support edit title inline.

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

@@ -212,6 +212,10 @@ export const SAVE_SLICE_FAILED = 'SAVE_SLICE_FAILED';
 export function saveSliceFailed() {
   return { type: SAVE_SLICE_FAILED };
 }
+export const SAVE_SLICE_SUCCESS = 'SAVE_SLICE_SUCCESS';
+export function saveSliceSuccess(data) {
+  return { type: SAVE_SLICE_SUCCESS, data };
+}
 
 export const REMOVE_SAVE_MODAL_ALERT = 'REMOVE_SAVE_MODAL_ALERT';
 export function removeSaveModalAlert() {
@@ -220,10 +224,9 @@ export function removeSaveModalAlert() {
 
 export function saveSlice(url) {
   return function (dispatch) {
-    $.get(url, (data, status) => {
+    return $.get(url, (data, status) => {
       if (status === 'success') {
-        // Go to new slice url or dashboard url
-        window.location = data;
+        dispatch(saveSliceSuccess(data));
       } else {
         dispatch(saveSliceFailed());
       }
@@ -231,6 +234,11 @@ export function saveSlice(url) {
   };
 }
 
+export const UPDATE_CHART_TITLE = 'UPDATE_CHART_TITLE';
+export function updateChartTitle(slice_name) {
+  return { type: UPDATE_CHART_TITLE, slice_name };
+}
+
 export const UPDATE_CHART_STATUS = 'UPDATE_CHART_STATUS';
 export function updateChartStatus(status) {
   return { type: UPDATE_CHART_STATUS, status };

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

@@ -7,6 +7,7 @@ import { Alert, Collapse, Panel } from 'react-bootstrap';
 import visMap from '../../../visualizations/main';
 import { d3format } from '../../modules/utils';
 import ExploreActionButtons from './ExploreActionButtons';
+import EditableTitle from '../../components/EditableTitle';
 import FaveStar from '../../components/FaveStar';
 import TooltipWrapper from '../../components/TooltipWrapper';
 import Timer from '../../components/Timer';
@@ -23,6 +24,7 @@ const CHART_STATUS_MAP = {
 const propTypes = {
   actions: PropTypes.object.isRequired,
   alert: PropTypes.string,
+  can_overwrite: PropTypes.bool.isRequired,
   can_download: PropTypes.bool.isRequired,
   chartStatus: PropTypes.string,
   chartUpdateEndTime: PropTypes.number,
@@ -39,6 +41,8 @@ const propTypes = {
   queryResponse: PropTypes.object,
   triggerRender: PropTypes.bool,
   standalone: PropTypes.bool,
+  datasourceType: PropTypes.string,
+  datasourceId: PropTypes.number,
 };
 
 class ChartContainer extends React.PureComponent {
@@ -145,6 +149,18 @@ class ChartContainer extends React.PureComponent {
     this.props.actions.runQuery(this.props.formData, true);
   }
 
+  updateChartTitle(newTitle) {
+    const params = {
+      slice_name: newTitle,
+      action: 'overwrite',
+    };
+    const saveUrl = getExploreUrl(this.props.formData, 'base', false, null, params);
+    this.props.actions.saveSlice(saveUrl)
+      .then(() => {
+        this.props.actions.updateChartTitle(newTitle);
+      });
+  }
+
   renderChartTitle() {
     let title;
     if (this.props.slice) {
@@ -240,7 +256,11 @@ class ChartContainer extends React.PureComponent {
               id="slice-header"
               className="clearfix panel-title-large"
             >
-              {this.renderChartTitle()}
+              <EditableTitle
+                title={this.renderChartTitle()}
+                canEdit={this.props.can_overwrite}
+                onSaveTitle={this.updateChartTitle.bind(this)}
+              />
 
               {this.props.slice &&
                 <span>
@@ -304,6 +324,7 @@ function mapStateToProps(state) {
   const formData = getFormDataFromControls(state.controls);
   return {
     alert: state.chartAlert,
+    can_overwrite: state.can_overwrite,
     can_download: state.can_download,
     chartStatus: state.chartStatus,
     chartUpdateEndTime: state.chartUpdateEndTime,
@@ -320,7 +341,8 @@ function mapStateToProps(state) {
     table_name: formData.datasource_name,
     viz_type: formData.viz_type,
     triggerRender: state.triggerRender,
-    datasourceType: state.datasource ? state.datasource.type : null,
+    datasourceType: state.datasource_type,
+    datasourceId: state.datasource_id,
   };
 }
 

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

@@ -108,7 +108,11 @@ class SaveModal extends React.Component {
     const saveUrl = `${baseUrl}?form_data=` +
       `${encodeURIComponent(JSON.stringify(this.props.form_data))}` +
       `&${$.param(sliceParams, true)}`;
-    this.props.actions.saveSlice(saveUrl);
+    this.props.actions.saveSlice(saveUrl)
+      .then((data) => {
+        // Go to new slice url or dashboard url
+        window.location = data;
+      });
     this.props.onHide();
   }
   removeAlert() {

superset/assets/javascripts/explore/exploreUtils.js

@@ -1,7 +1,8 @@
 /* eslint camelcase: 0 */
 import URI from 'urijs';
 
-export function getExploreUrl(form_data, endpointType = 'base', force = false, curUrl = null) {
+export function getExploreUrl(form_data, endpointType = 'base', force = false,
+  curUrl = null, requestParams = {}) {
   if (!form_data.datasource) {
     return null;
   }
@@ -38,6 +39,14 @@ export function getExploreUrl(form_data, endpointType = 'base', force = false, c
   if (endpointType === 'query') {
     search.query = 'true';
   }
+  const paramNames = Object.keys(requestParams);
+  if (paramNames.length) {
+    paramNames.forEach((name) => {
+      if (requestParams.hasOwnProperty(name)) {
+        search[name] = requestParams[name];
+      }
+    });
+  }
   uri = uri.search(search).directory(directory);
   return uri.toString();
 }

superset/assets/javascripts/explore/reducers/exploreReducer.js

@@ -135,6 +135,10 @@ export const exploreReducer = function (state, action) {
       }
       return newState;
     },
+    [actions.UPDATE_CHART_TITLE]() {
+      const updatedSlice = Object.assign({}, state.slice, { slice_name: action.slice_name });
+      return Object.assign({}, state, { slice: updatedSlice });
+    },
     [actions.REMOVE_CHART_ALERT]() {
       if (state.chartAlert !== null) {
         return Object.assign({}, state, { chartAlert: null });
@@ -144,6 +148,9 @@ export const exploreReducer = function (state, action) {
     [actions.SAVE_SLICE_FAILED]() {
       return Object.assign({}, state, { saveModalAlert: 'Failed to save slice' });
     },
+    [actions.SAVE_SLICE_SUCCESS](data) {
+      return Object.assign({}, state, { data });
+    },
     [actions.REMOVE_SAVE_MODAL_ALERT]() {
       return Object.assign({}, state, { saveModalAlert: null });
     },