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/Controls.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup } from 'react-bootstrap';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
 
-import Button from '../../components/Button';
 import CssEditor from './CssEditor';
 import RefreshIntervalModal from './RefreshIntervalModal';
 import SaveModal from './SaveModal';
-import CodeModal from './CodeModal';
 import SliceAdder from './SliceAdder';
 import { t } from '../../locales';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
 
 const $ = window.$ = require('jquery');
 
@@ -23,6 +22,38 @@ const propTypes = {
   renderSlices: PropTypes.func,
   serialize: PropTypes.func,
   startPeriodicRender: PropTypes.func,
+  editMode: PropTypes.bool,
+};
+
+function MenuItemContent({ faIcon, text, tooltip, children }) {
+  return (
+    <span>
+      <i className={`fa fa-${faIcon}`} /> {text} {''}
+      <InfoTooltipWithTrigger
+        tooltip={tooltip}
+        label={`dash-${faIcon}`}
+        placement="top"
+      />
+      {children}
+    </span>
+  );
+}
+MenuItemContent.propTypes = {
+  faIcon: PropTypes.string.isRequired,
+  text: PropTypes.string,
+  tooltip: PropTypes.string,
+  children: PropTypes.node,
+};
+
+function ActionMenuItem(props) {
+  return (
+    <MenuItem onClick={props.onClick}>
+      <MenuItemContent {...props} />
+    </MenuItem>
+  );
+}
+ActionMenuItem.propTypes = {
+  onClick: PropTypes.func,
 };
 
 class Controls extends React.PureComponent {
@@ -32,6 +63,8 @@ class Controls extends React.PureComponent {
       css: props.dashboard.css || '',
       cssTemplates: [],
     };
+    this.refresh = this.refresh.bind(this);
+    this.toggleModal = this.toggleModal.bind(this);
   }
   componentWillMount() {
     $.get('/csstemplateasyncmodelview/api/read', (data) => {
@@ -47,6 +80,13 @@ class Controls extends React.PureComponent {
     // Force refresh all slices
     this.props.renderSlices(true);
   }
+  toggleModal(modal) {
+    let currentModal;
+    if (modal !== this.state.currentModal) {
+      currentModal = modal;
+    }
+    this.setState({ currentModal });
+  }
   changeCss(css) {
     this.setState({ css });
     this.props.onChange();
@@ -54,72 +94,94 @@ class Controls extends React.PureComponent {
   render() {
     const { dashboard, userId,
       addSlicesToDashboard, startPeriodicRender, readFilters,
-      serialize, onSave } = this.props;
+      serialize, onSave, editMode } = this.props;
     const emailBody = t('Checkout this dashboard: %s', window.location.href);
     const emailLink = 'mailto:?Subject=Superset%20Dashboard%20'
       + `${dashboard.dashboard_title}&Body=${emailBody}`;
+    let saveText = t('Save as');
+    if (editMode) {
+      saveText = t('Save');
+    }
     return (
-      <ButtonGroup>
-        <Button
-          tooltip={t('Force refresh the whole dashboard')}
-          onClick={this.refresh.bind(this)}
-        >
-          <i className="fa fa-refresh" />
-        </Button>
-        <SliceAdder
-          dashboard={dashboard}
-          addSlicesToDashboard={addSlicesToDashboard}
-          userId={userId}
-          triggerNode={
-            <i className="fa fa-plus" />
+      <span>
+        <DropdownButton title="Actions" bsSize="small" id="bg-nested-dropdown" pullRight>
+          <ActionMenuItem
+            text={t('Force Refresh')}
+            tooltip={t('Force refresh the whole dashboard')}
+            faIcon="refresh"
+            onClick={this.refresh}
+          />
+          <RefreshIntervalModal
+            onChange={refreshInterval => startPeriodicRender(refreshInterval * 1000)}
+            triggerNode={
+              <MenuItemContent
+                text={t('Set autorefresh')}
+                tooltip={t('Set the auto-refresh interval for this session')}
+                faIcon="clock-o"
+              />
+            }
+          />
+          <SaveModal
+            dashboard={dashboard}
+            readFilters={readFilters}
+            serialize={serialize}
+            onSave={onSave}
+            css={this.state.css}
+            triggerNode={
+              <MenuItemContent
+                text={saveText}
+                tooltip={t('Save the dashboard')}
+                faIcon="save"
+              />
+            }
+          />
+          {editMode &&
+            <ActionMenuItem
+              text={t('Edit properties')}
+              tooltip={t("Edit the dashboards's properties")}
+              faIcon="edit"
+              onClick={() => { window.location = `/dashboardmodelview/edit/${dashboard.id}`; }}
+            />
           }
-        />
-        <RefreshIntervalModal
-          onChange={refreshInterval => startPeriodicRender(refreshInterval * 1000)}
-          triggerNode={
-            <i className="fa fa-clock-o" />
+          {editMode &&
+            <ActionMenuItem
+              text={t('Email')}
+              tooltip={t('Email a link to this dashbaord')}
+              onClick={() => { window.location = emailLink; }}
+              faIcon="envelope"
+            />
           }
-        />
-        <CodeModal
-          codeCallback={readFilters}
-          triggerNode={<i className="fa fa-filter" />}
-        />
-        <CssEditor
-          dashboard={dashboard}
-          triggerNode={
-            <i className="fa fa-css3" />
+          {editMode &&
+            <SliceAdder
+              dashboard={dashboard}
+              addSlicesToDashboard={addSlicesToDashboard}
+              userId={userId}
+              triggerNode={
+                <MenuItemContent
+                  text={t('Add Slices')}
+                  tooltip={t('Add some slices to this dashbaord')}
+                  faIcon="plus"
+                />
+              }
+            />
           }
-          initialCss={dashboard.css}
-          templates={this.state.cssTemplates}
-          onChange={this.changeCss.bind(this)}
-        />
-        <Button
-          onClick={() => { window.location = emailLink; }}
-        >
-          <i className="fa fa-envelope" />
-        </Button>
-        <Button
-          disabled={!dashboard.dash_edit_perm}
-          onClick={() => {
-            window.location = `/dashboardmodelview/edit/${dashboard.id}`;
-          }}
-          tooltip={t('Edit this dashboard\'s properties')}
-        >
-          <i className="fa fa-edit" />
-        </Button>
-        <SaveModal
-          dashboard={dashboard}
-          readFilters={readFilters}
-          serialize={serialize}
-          onSave={onSave}
-          css={this.state.css}
-          triggerNode={
-            <Button disabled={!dashboard.dash_save_perm}>
-              <i className="fa fa-save" />
-            </Button>
+          {editMode &&
+            <CssEditor
+              dashboard={dashboard}
+              triggerNode={
+                <MenuItemContent
+                  text={t('Edit CSS')}
+                  tooltip={t('Change the style of the dashboard using CSS code')}
+                  faIcon="css3"
+                />
+              }
+              initialCss={dashboard.css}
+              templates={this.state.cssTemplates}
+              onChange={this.changeCss.bind(this)}
+            />
           }
-        />
-      </ButtonGroup>
+        </DropdownButton>
+      </span>
     );
   }
 }

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

@@ -78,7 +78,7 @@ class CssEditor extends React.PureComponent {
       <ModalTrigger
         triggerNode={this.props.triggerNode}
         modalTitle={t('CSS')}
-        isButton
+        isMenuItem
         modalBody={
           <div>
             {this.renderTemplateSelector()}

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

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import AlertsWrapper from '../../components/AlertsWrapper';
 import GridLayout from './GridLayout';
 import Header from './Header';
-import DashboardAlert from './DashboardAlert';
 import { getExploreUrl } from '../../explore/exploreUtils';
 import { areObjectsEqual } from '../../reduxUtils';
 import { t } from '../../locales';
@@ -22,6 +21,7 @@ const propTypes = {
   timeout: PropTypes.number,
   userId: PropTypes.string,
   isStarred: PropTypes.bool,
+  editMode: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -33,6 +33,7 @@ const defaultProps = {
   timeout: 60,
   userId: '',
   isStarred: false,
+  editMode: false,
 };
 
 class Dashboard extends React.PureComponent {
@@ -42,10 +43,7 @@ class Dashboard extends React.PureComponent {
     this.firstLoad = true;
 
     // alert for unsaved changes
-    this.state = {
-      alert: null,
-      trigger: false,
-    };
+    this.state = { unsavedChanges: false };
 
     this.rerenderCharts = this.rerenderCharts.bind(this);
     this.updateDashboardTitle = this.updateDashboardTitle.bind(this);
@@ -76,13 +74,6 @@ class Dashboard extends React.PureComponent {
     window.addEventListener('resize', this.rerenderCharts);
   }
 
-  componentWillReceiveProps(nextProps) {
-    // check filters is changed
-    if (!areObjectsEqual(nextProps.filters, this.props.filters)) {
-      this.renderUnsavedChangeAlert();
-    }
-  }
-
   componentDidUpdate(prevProps) {
     if (!areObjectsEqual(prevProps.filters, this.props.filters) && this.props.refresh) {
       Object.keys(this.props.filters).forEach(sliceId => (this.refreshExcept(sliceId)));
@@ -103,14 +94,12 @@ class Dashboard extends React.PureComponent {
 
   onChange() {
     this.onBeforeUnload(true);
-    this.renderUnsavedChangeAlert();
+    this.setState({ unsavedChanges: true });
   }
 
   onSave() {
     this.onBeforeUnload(false);
-    this.setState({
-      alert: '',
-    });
+    this.setState({ unsavedChanges: false });
   }
 
   // return charts in array
@@ -283,26 +272,14 @@ class Dashboard extends React.PureComponent {
     });
   }
 
-  renderUnsavedChangeAlert() {
-    this.setState({
-      alert: (
-        <span>
-          <strong>{t('You have unsaved changes.')}</strong> {t('Click the')} &nbsp;
-          <i className="fa fa-save" />&nbsp;
-          {t('button on the top right to save your changes.')}
-        </span>
-      ),
-    });
-  }
-
   render() {
     return (
       <div id="dashboard-container">
-        {this.state.alert && <DashboardAlert alertContent={this.state.alert} />}
         <div id="dashboard-header">
           <AlertsWrapper initMessages={this.props.initMessages} />
           <Header
             dashboard={this.props.dashboard}
+            unsavedChanges={this.state.unsavedChanges}
             userId={this.props.userId}
             isStarred={this.props.isStarred}
             updateDashboardTitle={this.updateDashboardTitle}
@@ -315,6 +292,8 @@ class Dashboard extends React.PureComponent {
             renderSlices={this.fetchAllSlices}
             startPeriodicRender={this.startPeriodicRender}
             addSlicesToDashboard={this.addSlicesToDashboard}
+            editMode={this.props.editMode}
+            setEditMode={this.props.actions.setEditMode}
           />
         </div>
         <div id="grid-container" className="slice-grid gridster">
@@ -336,6 +315,7 @@ class Dashboard extends React.PureComponent {
             getFilters={this.getFilters}
             clearFilter={this.props.actions.clearFilter}
             removeFilter={this.props.actions.removeFilter}
+            editMode={this.props.editMode}
           />
         </div>
       </div>

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-
-const propTypes = {
-  alertContent: PropTypes.node.isRequired,
-};
-
-const DashboardAlert = ({ alertContent }) => (
-  <div id="alert-container">
-    <div className="container-fluid">
-      <Alert bsStyle="warning">
-        {alertContent}
-      </Alert>
-    </div>
-  </div>
-);
-
-DashboardAlert.propTypes = propTypes;
-
-export default DashboardAlert;

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

@@ -16,6 +16,7 @@ function mapStateToProps({ charts, dashboard }) {
     refresh: dashboard.refresh,
     userId: dashboard.userId,
     isStarred: !!dashboard.isStarred,
+    editMode: dashboard.editMode,
   };
 }
 

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

@@ -30,6 +30,7 @@ const propTypes = {
   getFilters: PropTypes.func,
   clearFilter: PropTypes.func,
   removeFilter: PropTypes.func,
+  editMode: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -41,6 +42,7 @@ const defaultProps = {
   getFilters: () => ({}),
   clearFilter: () => ({}),
   removeFilter: () => ({}),
+  editMode: false,
 };
 
 class GridCell extends React.PureComponent {
@@ -101,6 +103,7 @@ class GridCell extends React.PureComponent {
             updateSliceName={updateSliceName}
             toggleExpandSlice={toggleExpandSlice}
             forceRefresh={forceRefresh}
+            editMode={this.props.editMode}
           />
         </div>
         <div

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

@@ -28,6 +28,7 @@ const propTypes = {
   getFilters: PropTypes.func,
   clearFilter: PropTypes.func,
   removeFilter: PropTypes.func,
+  editMode: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -162,6 +163,7 @@ class GridLayout extends React.Component {
             getFilters={this.props.getFilters}
             clearFilter={this.props.clearFilter}
             removeFilter={this.props.removeFilter}
+            editMode={this.props.editMode}
           />
         </div>);
     });

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>

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

@@ -34,7 +34,7 @@ class RefreshIntervalModal extends React.PureComponent {
     return (
       <ModalTrigger
         triggerNode={this.props.triggerNode}
-        isButton
+        isMenuItem
         modalTitle={t('Refresh Interval')}
         modalBody={
           <div>

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

@@ -106,6 +106,7 @@ class SaveModal extends React.PureComponent {
     return (
       <ModalTrigger
         ref={(modal) => { this.modal = modal; }}
+        isMenuItem
         triggerNode={this.props.triggerNode}
         modalTitle={t('Save Dashboard')}
         modalBody={

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

@@ -41,7 +41,9 @@ class SliceAdder extends React.Component {
   }
 
   componentWillUnmount() {
-    this.slicesRequest.abort();
+    if (this.slicesRequest) {
+      this.slicesRequest.abort();
+    }
   }
 
   onEnterModal() {
@@ -202,9 +204,10 @@ class SliceAdder extends React.Component {
         triggerNode={this.props.triggerNode}
         tooltip={t('Add a new slice to the dashboard')}
         beforeOpen={this.onEnterModal.bind(this)}
-        isButton
+        isMenuItem
         modalBody={modalContent}
         bsSize="large"
+        setModalAsTriggerChildren
         modalTitle={t('Add Slices to Dashboard')}
       />
     );

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

@@ -18,6 +18,7 @@ const propTypes = {
   updateSliceName: PropTypes.func,
   toggleExpandSlice: PropTypes.func,
   forceRefresh: PropTypes.func,
+  editMode: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -25,6 +26,7 @@ const defaultProps = {
   removeSlice: () => ({}),
   updateSliceName: () => ({}),
   toggleExpandSlice: () => ({}),
+  editMode: false,
 };
 
 class SliceHeader extends React.PureComponent {
@@ -55,22 +57,24 @@ class SliceHeader extends React.PureComponent {
           <div className="header">
             <EditableTitle
               title={slice.slice_name}
-              canEdit={!!this.props.updateSliceName}
+              canEdit={!!this.props.updateSliceName && this.props.editMode}
               onSaveTitle={this.onSaveTitle}
               noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
             />
           </div>
           <div className="chart-controls">
             <div id={'controls_' + slice.slice_id} className="pull-right">
-              <a>
-                <TooltipWrapper
-                  placement="top"
-                  label="move"
-                  tooltip={t('Move chart')}
-                >
-                  <i className="fa fa-arrows drag" />
-                </TooltipWrapper>
-              </a>
+              {this.props.editMode &&
+                <a>
+                  <TooltipWrapper
+                    placement="top"
+                    label="move"
+                    tooltip={t('Move chart')}
+                  >
+                    <i className="fa fa-arrows drag" />
+                  </TooltipWrapper>
+                </a>
+              }
               <a
                 className={`refresh ${isCached ? 'danger' : ''}`}
                 onClick={() => (this.props.forceRefresh(slice.slice_id))}
@@ -121,15 +125,17 @@ class SliceHeader extends React.PureComponent {
                   <i className="fa fa-share" />
                 </TooltipWrapper>
               </a>
-              <a className="remove-chart" onClick={() => (this.props.removeSlice(slice))}>
-                <TooltipWrapper
-                  placement="top"
-                  label="close"
-                  tooltip={t('Remove chart from dashboard')}
-                >
-                  <i className="fa fa-close" />
-                </TooltipWrapper>
-              </a>
+              {this.props.editMode &&
+                <a className="remove-chart" onClick={() => (this.props.removeSlice(slice))}>
+                  <TooltipWrapper
+                    placement="top"
+                    label="close"
+                    tooltip={t('Remove chart from dashboard')}
+                  >
+                    <i className="fa fa-close" />
+                  </TooltipWrapper>
+                </a>
+              }
             </div>
           </div>
         </div>