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>
     );
   }
 }