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
apache · Nov 28, 2017 · d9fda34 · d9fda34
1 parent 6cbe0e6
commit d9fda34
Show file tree

Hide file tree

Showing 17 changed files with 259 additions and 157 deletions.
diff --git a/superset/assets/javascripts/components/EditableTitle.jsx b/superset/assets/javascripts/components/EditableTitle.jsx
@@ -8,10 +8,12 @@ const propTypes = {
   canEdit: PropTypes.bool,
   onSaveTitle: PropTypes.func,
   noPermitTooltip: PropTypes.string,
+  showTooltip: PropTypes.bool,
 };
 const defaultProps = {
   title: t('Title'),
   canEdit: false,
+  showTooltip: true,
 };
 
 class EditableTitle extends React.PureComponent {
@@ -85,24 +87,30 @@ class EditableTitle extends React.PureComponent {
     }
   }
   render() {
-    return (
-      <span className="editable-title">
+    let input = (
+      <input
+        required
+        type={this.state.isEditing ? 'text' : 'button'}
+        value={this.state.title}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+        onClick={this.handleClick}
+        onKeyPress={this.handleKeyPress}
+      />
+    );
+    if (this.props.showTooltip) {
+      input = (
         <TooltipWrapper
           label="title"
           tooltip={this.props.canEdit ? t('click to edit title') :
               this.props.noPermitTooltip || t('You don\'t have the rights to alter this title.')}
         >
-          <input
-            required
-            type={this.state.isEditing ? 'text' : 'button'}
-            value={this.state.title}
-            onChange={this.handleChange}
-            onBlur={this.handleBlur}
-            onClick={this.handleClick}
-            onKeyPress={this.handleKeyPress}
-          />
+          {input}
         </TooltipWrapper>
-      </span>
+      );
+    }
+    return (
+      <span className="editable-title">{input}</span>
     );
   }
 }

diff --git a/superset/assets/javascripts/components/ModalTrigger.jsx b/superset/assets/javascripts/components/ModalTrigger.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
+import { Modal, MenuItem } from 'react-bootstrap';
 import cx from 'classnames';
+
 import Button from './Button';
 
 const propTypes = {
@@ -13,6 +14,7 @@ const propTypes = {
   beforeOpen: PropTypes.func,
   onExit: PropTypes.func,
   isButton: PropTypes.bool,
+  isMenuItem: PropTypes.bool,
   bsSize: PropTypes.string,
   className: PropTypes.string,
   tooltip: PropTypes.string,
@@ -23,6 +25,7 @@ const defaultProps = {
   beforeOpen: () => {},
   onExit: () => {},
   isButton: false,
+  isMenuItem: false,
   bsSize: null,
   className: '',
 };
@@ -86,6 +89,13 @@ export default class ModalTrigger extends React.Component {
           {this.renderModal()}
         </Button>
       );
+    } else if (this.props.isMenuItem) {
+      return (
+        <MenuItem onClick={this.open}>
+          {this.props.triggerNode}
+          {this.renderModal()}
+        </MenuItem>
+      );
     }
     /* eslint-disable jsx-a11y/interactive-supports-focus */
     return (

diff --git a/superset/assets/javascripts/dashboard/actions.js b/superset/assets/javascripts/dashboard/actions.js
@@ -110,3 +110,8 @@ export const TOGGLE_EXPAND_SLICE = 'TOGGLE_EXPAND_SLICE';
 export function toggleExpandSlice(slice, isExpanded) {
   return { type: TOGGLE_EXPAND_SLICE, slice, isExpanded };
 }
+
+export const SET_EDIT_MODE = 'SET_EDIT_MODE';
+export function setEditMode(editMode) {
+  return { type: SET_EDIT_MODE, editMode };
+}
diff --git a/superset/assets/javascripts/dashboard/components/Controls.jsx b/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,79 +80,108 @@ 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();
   }
   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>
     );
   }
 }

diff --git a/superset/assets/javascripts/dashboard/components/CssEditor.jsx b/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()}