allow user update slice name in dashboard view (#3467)

- if current user is allowed to edit dashboard, we will allow this user to edit slice name.
- show different tooltip given allowed/not-allowed to update slice name.
- user will click slice name and update.
- after user submit edit, if he doesn't have right to alter slice, server-side will return error message to client-side. Slice name will not be changed or saved.
- will show notification after save slice name.

superset/assets/javascripts/dashboard/components/GridLayout.jsx

@@ -1,9 +1,11 @@
+/* global notify */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import $ from 'jquery';
 
 import SliceCell from './SliceCell';
+import { getExploreUrl } from '../../explore/exploreUtils';
 
 require('react-grid-layout/css/styles.css');
 require('react-resizable/css/styles.css');
@@ -72,6 +74,42 @@ class GridLayout extends React.Component {
     this.props.dashboard.onChange();
   }
 
+  updateSliceName(sliceId, sliceName) {
+    const index = this.state.slices.map(slice => (slice.slice_id)).indexOf(sliceId);
+    if (index === -1) {
+      return;
+    }
+
+    // update slice_name first
+    const oldSlices = this.state.slices;
+    const currentSlice = this.state.slices[index];
+    const updated = Object.assign({},
+        this.state.slices[index], { slice_name: sliceName });
+    const updatedSlices = this.state.slices.slice();
+    updatedSlices[index] = updated;
+    this.setState({ slices: updatedSlices });
+
+    const sliceParams = {};
+    sliceParams.slice_id = currentSlice.slice_id;
+    sliceParams.action = 'overwrite';
+    sliceParams.slice_name = sliceName;
+    const saveUrl = getExploreUrl(currentSlice.form_data, 'base', false, null, sliceParams);
+
+    $.ajax({
+      url: saveUrl,
+      type: 'GET',
+      success: () => {
+        notify.success('This slice name was saved successfully.');
+      },
+      error: () => {
+        // if server-side reject the overwrite action,
+        // revert to old state
+        this.setState({ slices: oldSlices });
+        notify.error('You don\'t have the rights to alter this slice');
+      },
+    });
+  }
+
   serialize() {
     return this.state.layout.map(reactPos => ({
       slice_id: reactPos.i,
@@ -107,6 +145,8 @@ class GridLayout extends React.Component {
               slice={slice}
               removeSlice={this.removeSlice.bind(this, slice.slice_id)}
               expandedSlices={this.props.dashboard.metadata.expanded_slices}
+              updateSliceName={this.props.dashboard.dash_edit_perm ?
+                this.updateSliceName.bind(this) : null}
             />
           </div>
         ))}

superset/assets/javascripts/dashboard/components/Header.jsx

@@ -30,6 +30,7 @@ class Header extends React.PureComponent {
               title={dashboard.dashboard_title}
               canEdit={dashboard.dash_save_perm}
               onSaveTitle={this.handleSaveTitle}
+              noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
             />
             <span is class="favstar" class_name="Dashboard" obj_id={dashboard.id} />
           </h1>

superset/assets/javascripts/dashboard/components/SliceCell.jsx

@@ -4,22 +4,35 @@ import PropTypes from 'prop-types';
 
 import { t } from '../../locales';
 import { getExploreUrl } from '../../explore/exploreUtils';
+import EditableTitle from '../../components/EditableTitle';
 
 const propTypes = {
   slice: PropTypes.object.isRequired,
   removeSlice: PropTypes.func.isRequired,
+  updateSliceName: PropTypes.func,
   expandedSlices: PropTypes.object,
 };
 
-function SliceCell({ expandedSlices, removeSlice, slice }) {
+const SliceCell = ({ expandedSlices, removeSlice, slice, updateSliceName }) => {
+  const onSaveTitle = (newTitle) => {
+    if (updateSliceName) {
+      updateSliceName(slice.slice_id, newTitle);
+    }
+  };
+
   return (
     <div className="slice-cell" id={`${slice.slice_id}-cell`}>
-      <div className="chart-header">
-        <div className="row">
-          <div className="col-md-12 header">
-            <span>{slice.slice_name}</span>
+      <div className="row chart-header">
+        <div className="col-md-12">
+          <div className="header">
+            <EditableTitle
+              title={slice.slice_name}
+              canEdit={!!updateSliceName}
+              onSaveTitle={onSaveTitle}
+              noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
+            />
           </div>
-          <div className="col-md-12 chart-controls">
+          <div className="chart-controls">
             <div id={'controls_' + slice.slice_id} className="pull-right">
               <a title={t('Move chart')} data-toggle="tooltip">
                 <i className="fa fa-arrows drag" />
@@ -97,7 +110,7 @@ function SliceCell({ expandedSlices, removeSlice, slice }) {
       </div>
     </div>
   );
-}
+};
 
 SliceCell.propTypes = propTypes;