INT-1588: CRUD Usability Improvements. (#432)

* INT-1588: Fix tabbing order in all edit/insert situations

* INT-1588: Tab to next input on :

* INT-1588: Better usability on ESC

* INT-1588: Usability improvements on hotspot

* INT-1588: Fix input sizes

* INT-1588: Bump compile cache to 0.2.0

* INT-1588: Fixing hotspot functionality

* INT-1589: Add help entries for CRUD

* INT-1588: Remove feature flag, fix insert

Author: durran

.gitignore

@@ -13,3 +13,4 @@ report.json
 .compiled-sources/
 src/app/compiled-less/
 expansions.yml
+.nvmrc

package.json

@@ -102,9 +102,9 @@
     "get-object-path": "azer/get-object-path#74eb42de0cfd02c14ffdd18552f295aba723d394",
     "hadron-action": "^0.0.4",
     "hadron-auto-update-manager": "^0.0.12",
-    "hadron-compile-cache": "^0.1.0",
+    "hadron-compile-cache": "^0.2.0",
     "hadron-component-registry": "^0.4.0",
-    "hadron-document": "^0.13.0",
+    "hadron-document": "^0.14.0",
     "hadron-ipc": "^0.0.7",
     "hadron-module-cache": "^0.0.3",
     "hadron-package-manager": "0.1.0",

src/help/entries/cloning-a-single-document.md

@@ -0,0 +1,14 @@
+---
+title: Cloning a Single Document
+tags:
+  - crud
+related:
+  - inserting-a-single-document
+section: CRUD
+---
+
+A single document can be cloned by clicking on the clone icon
+<i class='fa fa-clone' aria-hidden='true'></i> on the right
+side of the document in the document list. The Insert Document
+modal will appear with all elements in the document cloned with
+the exception of the `_id` element.

src/help/entries/deleting-a-single-document.md

@@ -0,0 +1,12 @@
+---
+title: Deleting a Single Document
+tags:
+  - crud
+section: CRUD
+---
+
+A single document can be deleted by clicking on the delete icon
+<i class='fa fa-trash-o' aria-hidden='true'></i> on the right
+side of the document in the document list. Clicking on this button puts
+the document into a pending delete mode, but the delete command will
+not be sent to the server until the user confirms the edits by clicking 'Delete'.

src/help/entries/editing-a-single-document.md

@@ -0,0 +1,53 @@
+---
+title: Editing a Single Document
+tags:
+  - crud
+section: CRUD
+---
+
+A single document can be edited by clicking on the edit icon
+<i class='fa fa-pencil' aria-hidden='true'></i> on the right
+side of the document in the document list. Clicking on this button puts
+the document into edit mode, but changes will not be sent to the server
+until the user confirms the edits by clicking 'Update'.
+
+In edit mode, the document panel behaves similar to the CSS editor in
+most modern web browers' development tools.
+
+### Editing an Element
+
+Clicking on an element key or value allows the user to change the key name
+or the value of the element. The element's type can also be changed by
+selecting a new type from the dropdown on the right side. Only types that
+the value can currently be cast to will be visible in the list. Duplicate
+key names will cause the key field to be highlighted in red.
+
+### Adding an Element
+
+A new element can be added to the document or any embedded document by
+either clicking on the right side of the element or tabbing off the last
+element's value field if the element is the last element in the document
+or sub document. Clicking to the right of an element will also remove any
+subsequent extra empty elements.
+
+### Deleting an Element
+
+An element can be deleted by clicking on the <i class='fa fa-times-circle' aria-hidden='true'></i>
+icon to the left of the element's line number.
+
+### Reverting a Change
+
+A change to an element can be reverted by clicking the revert icon
+<i class='fa fa-rotate-left' aria-hidden='true'></i>
+to the left of the element's line number.
+
+### Persisting Changes
+
+The changes to a document may be persisted by clicking on the 'Update'
+button in the footer of the document panel. Clicking this button will
+execute a `$findAndModify` on the server and update the document in the
+list.
+
+### Canceling Changes
+
+To exit edit mode and cancel all pending changes, click the 'Cancel' button.

src/help/entries/inserting-a-single-document.md

@@ -0,0 +1,13 @@
+---
+title: Inserting a Single Document
+tags:
+  - crud
+related:
+  - editing-a-single-document
+section: CRUD
+---
+
+A single document can be inserted by clicking on the 'Insert' button at
+the top of the document list. An insert modal will open and the user
+may edit the new document using the same behaviour provided by document
+editing.

src/internal-packages/crud/lib/component/document-actions.jsx

@@ -1,14 +1,8 @@
 'use strict';
 
 const React = require('react');
-const app = require('ampersand-app');
 const IconButton = require('./icon-button');
 
-/**
- * The feature flag.
- */
-const FEATURE = 'singleDocumentCrud';
-
 /**
  * Component for actions on the document.
  */
@@ -29,26 +23,21 @@ class DocumentActions extends React.Component {
    * @returns {Component} The actions component.
    */
   render() {
-    if (app.isFeatureEnabled(FEATURE)) {
-      return (
-        <div className='document-actions'>
-          <IconButton
-            title='Edit Document'
-            iconClassName='fa fa-pencil'
-            clickHandler={this.props.edit} />
-          <IconButton
-            title='Delete Document'
-            iconClassName='fa fa-trash-o'
-            clickHandler={this.props.remove} />
-          <IconButton
-            title='Clone Document'
-            iconClassName='fa fa-clone'
-            clickHandler={this.props.clone} />
-        </div>
-      );
-    }
     return (
-      <div className='document-actions'></div>
+      <div className='document-actions'>
+        <IconButton
+          title='Edit Document'
+          iconClassName='fa fa-pencil'
+          clickHandler={this.props.edit} />
+        <IconButton
+          title='Delete Document'
+          iconClassName='fa fa-trash-o'
+          clickHandler={this.props.remove} />
+        <IconButton
+          title='Clone Document'
+          iconClassName='fa fa-clone'
+          clickHandler={this.props.clone} />
+      </div>
     );
   }
 }

src/internal-packages/crud/lib/component/document.jsx

@@ -1,6 +1,5 @@
 'use strict';
 
-const _ = require('lodash');
 const app = require('ampersand-app');
 const React = require('react');
 const Reflux = require('reflux');
@@ -270,14 +269,15 @@ class Document extends React.Component {
    * @returns {Array} The editable elements.
    */
   editableElements() {
-    var components = _.map(this.state.doc.elements, (element) => {
-      return (
-        <EditableElement key={element.uuid} element={element} />
-      );
-    });
+    var components = [];
+    for (let element of this.state.doc.elements) {
+      components.push(<EditableElement key={element.uuid} element={element} />)
+    }
+    // Add the hotspot to the end. In the case of insert, we need to guard against
+    // No elements being present.
     var lastComponent = components[components.length - 1];
-    var lastElement = lastComponent ? lastComponent.props.element : null;
-    components.push(<Hotspot key='hotspot' doc={this.state.doc} element={lastElement} />);
+    var lastElement = lastComponent ? lastComponent.props.element : this.state.doc;
+    components.push(<Hotspot key='hotspot' element={lastElement} />);
     return components;
   }
 

src/internal-packages/crud/lib/component/editable-element.jsx

@@ -116,9 +116,10 @@ class EditableElement extends React.Component {
       <li className={this.style()}>
         <div className='line-number'></div>
         {this.renderAction()}
-        <EditableKey element={this.element} insertIndex={this.props.insertIndex} />
+        <EditableKey element={this.element} index={this.props.index} />
         :
         {this.renderValue()}
+        <Hotspot key='hotspot' element={this.element} />
         <Types element={this.element} />
       </li>
     );
@@ -149,7 +150,7 @@ class EditableElement extends React.Component {
           <div className='line-number' onClick={this.toggleExpandable.bind(this)}></div>
           {this.renderAction()}
           <div className={CARET} onClick={this.toggleExpandable.bind(this)}></div>
-          <EditableKey element={this.element} />
+          <EditableKey element={this.element} index={this.props.index} />
           :
           <div className={LABEL_CLASS} onClick={this.toggleExpandable.bind(this)}>
             {this.element.currentType}
@@ -168,12 +169,12 @@ class EditableElement extends React.Component {
    * @returns {Array} The components.
    */
   elementComponents() {
-    var components = _.map(this.element.elements, (element) => {
-      return (<EditableElement key={element.uuid} element={element} />);
-    });
-    // var lastComponent = components[components.length - 1];
-    // var lastElement = lastComponent ? lastComponent.props.element : null;
-    // components.push(<Hotspot key='hotspot' doc={this.element} element={lastElement} />);
+    var components = [];
+    var index = 0;
+    for (let element of this.element.elements) {
+      components.push(<EditableElement key={element.uuid} element={element} index={index} />);
+      index++;
+    }
     return components;
   }
 

src/internal-packages/crud/lib/component/editable-key.jsx

@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react');
+const inputSize = require('./utils').inputSize;
 
 /**
  * The editing class constant.
@@ -17,6 +18,16 @@ const DUPLICATE = 'duplicate';
  */
 const KEY_CLASS = 'editable-key';
 
+/**
+ * Escape key code.
+ */
+const ESC = 27;
+
+/**
+ * Colon key code.
+ */
+const COLON = 186;
+
 /**
  * General editable key component.
  */
@@ -38,15 +49,8 @@ class EditableKey extends React.Component {
    * to the value field.
    */
   componentDidMount() {
-    if (this.element.isAdded()) {
-      if (this.props.insertIndex) {
-        // Focus for inserting new documents.
-        if (this.props.insertIndex === 1 && this.element.currentKey === '') {
-          this._node.focus();
-        }
-      } else if (!this.isEditable() && this._node) {
-        this._node.focus();
-      }
+    if (this.isAutoFocusable()) {
+      this._node.focus();
     }
   }
 
@@ -61,16 +65,25 @@ class EditableKey extends React.Component {
         type='text'
         className={this.style()}
         ref={(c) => this._node = c}
-        size={this.element.currentKey.length}
+        size={inputSize(this.renderValue())}
+        tabIndex={this.isEditable() ? 0 : -1}
         onBlur={this.handleBlur.bind(this)}
         onFocus={this.handleFocus.bind(this)}
         onChange={this.handleChange.bind(this)}
         onKeyDown={this.handleKeyDown.bind(this)}
-        value={this.element.currentKey}
+        onKeyUp={this.handleKeyUp.bind(this)}
+        value={this.renderValue()}
         title={this.renderTitle()} />
     );
   }
 
+  /**
+   * Render the value of the key.
+   */
+  renderValue() {
+    return this.element.parent.currentType === 'Array' ? this.props.index : this.element.currentKey;
+  }
+
   /**
    * Render the title.
    *
@@ -88,8 +101,27 @@ class EditableKey extends React.Component {
    * @param {Event} evt - The event.
    */
   handleKeyDown(evt) {
-    if (evt.keyCode === 27) {
-      this._node.blur();
+    var value = evt.target.value;
+    if (evt.keyCode === ESC) {
+      if (value.length === 0) {
+        this.element.remove();
+      } else {
+        this._node.blur();
+      }
+    }
+  }
+
+  /**
+   * If they key is a colon, tab to the next input.
+   */
+  handleKeyUp(evt) {
+    if (evt.keyCode === COLON) {
+      var value = evt.target.value;
+      if (value !== ':') {
+        this.element.rename(value.replace(':', ''));
+        evt.target.value = '';
+        this._node.nextSibling.nextSibling.focus();
+      }
     }
   }
 
@@ -100,7 +132,7 @@ class EditableKey extends React.Component {
    */
   handleChange(evt) {
     var value = evt.target.value;
-    this._node.size = value.length;
+    this._node.size = inputSize(value);
     if (this.isEditable()) {
       if (this.element.isDuplicateKey(value)) {
         this.setState({ duplicate: true });
@@ -130,12 +162,30 @@ class EditableKey extends React.Component {
   }
 
   /**
-   * Is this component editable?
+   * Is this component auto focusable?
+   *
+   * This is true if:
+   *   - When a new element has been added and is a normal element.
+   *   - When not being tabbed into.
+   *
+   * Is false if:
+   *   - When a new array value has been added.
+   *   - When the key is _id
    *
    * @returns {Boolean} If the component is editable.
    */
+  isAutoFocusable() {
+    return this.element.isAdded() && this.isEditable();
+  }
+
+  /**
+   * Is the key able to be edited?
+   *
+   * @returns {Boolean} If the key can be edited.
+   */
   isEditable() {
-    return this.element.isKeyEditable() && this.element.parentElement.currentType !== 'Array';
+    return this.element.isKeyEditable() &&
+      this.element.parent.currentType !== 'Array';
   }
 
   /**