Add an "Edit Mode" to Dashboard view (#3940)

* Add a togglable edit mode to dashboard

* Submenu for controls

* Allowing 'Save as' outside of editMode

* Set editMode to false as default

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

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types';
 
 import Controls from './Controls';
 import EditableTitle from '../../components/EditableTitle';
+import Button from '../../components/Button';
 import FaveStar from '../../components/FaveStar';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
+import { t } from '../../locales';
 
 const propTypes = {
   dashboard: PropTypes.object.isRequired,
@@ -19,30 +22,65 @@ const propTypes = {
   serialize: PropTypes.func,
   startPeriodicRender: PropTypes.func,
   updateDashboardTitle: PropTypes.func,
+  editMode: PropTypes.bool.isRequired,
+  setEditMode: PropTypes.func.isRequired,
+  unsavedChanges: PropTypes.bool.isRequired,
 };
 
 class Header extends React.PureComponent {
   constructor(props) {
     super(props);
-
     this.handleSaveTitle = this.handleSaveTitle.bind(this);
+    this.toggleEditMode = this.toggleEditMode.bind(this);
   }
   handleSaveTitle(title) {
     this.props.updateDashboardTitle(title);
   }
+  toggleEditMode() {
+    this.props.setEditMode(!this.props.editMode);
+  }
+  renderUnsaved() {
+    if (!this.props.unsavedChanges) {
+      return null;
+    }
+    return (
+      <InfoTooltipWithTrigger
+        label="unsaved"
+        tooltip={t('Unsaved changes')}
+        icon="exclamation-triangle"
+        className="text-danger m-r-5"
+        placement="top"
+      />
+    );
+  }
+  renderEditButton() {
+    if (!this.props.dashboard.dash_save_perm) {
+      return null;
+    }
+    const btnText = this.props.editMode ? 'Switch to View Mode' : 'Edit Dashboard';
+    return (
+      <Button
+        bsStyle="default"
+        className="m-r-5"
+        style={{ width: '150px' }}
+        onClick={this.toggleEditMode}
+      >
+        {btnText}
+      </Button>);
+  }
   render() {
     const dashboard = this.props.dashboard;
     return (
       <div className="title">
         <div className="pull-left">
-          <h1 className="outer-container">
+          <h1 className="outer-container pull-left">
             <EditableTitle
               title={dashboard.dashboard_title}
-              canEdit={dashboard.dash_save_perm}
+              canEdit={dashboard.dash_save_perm && this.props.editMode}
               onSaveTitle={this.handleSaveTitle}
-              noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
+              showTooltip={this.props.editMode}
             />
-            <span className="favstar">
+            <span className="favstar m-r-5">
               <FaveStar
                 itemId={dashboard.id}
                 fetchFaveStar={this.props.fetchFaveStar}
@@ -50,10 +88,11 @@ class Header extends React.PureComponent {
                 isStarred={this.props.isStarred}
               />
             </span>
+            {this.renderUnsaved()}
           </h1>
         </div>
         <div className="pull-right" style={{ marginTop: '35px' }}>
-          {!this.props.dashboard.standalone_mode &&
+          {this.renderEditButton()}
           <Controls
             dashboard={dashboard}
             userId={this.props.userId}
@@ -64,8 +103,8 @@ class Header extends React.PureComponent {
             renderSlices={this.props.renderSlices}
             serialize={this.props.serialize}
             startPeriodicRender={this.props.startPeriodicRender}
+            editMode={this.props.editMode}
           />
-        }
         </div>
         <div className="clearfix" />
       </div>