Merge pull request #113 from netcreateorg/dev-bl/duplicate-node

Fixes: Gracefully handle duplicate Node labels

Author: benloh

app-templates/_default.template.toml

@@ -13,7 +13,7 @@ filterReduce = "Reduce"
 filterReduceHelp = "Show matches, Reduce (remove) others & recalculate sizes"
 filterFocus = "Focus"
 filterFocusHelp = "Show only nodes connected to the selected node within range"
-duplicateWarning = "You’re entering a duplicate node.  Do you want to View the Existing node, or Continue creating?"
+duplicateWarning = "NOTE: At least one other node has the same name. Use search or the node table to check the others."
 nodeIsLockedMessage = "This node is currently being edited by someone else, please try again later."
 edgeIsLockedMessage = "This edge is currently being edited by someone else, please try again later."
 templateIsLockedMessage = "The template is currently being edited, please try again later."

app/view/netcreate/components/NCAutoSuggest.css

@@ -10,15 +10,23 @@
 .matchlist div {
   padding: 0 10px;
 }
+
+/* line hover is handled via javascript
+   to support highlighting the current
+   node.  Do not use this css hover.
 .matchlist div:hover {
   background-color: #ddd;
   cursor: pointer;
-}
+} 
+*/
+
 .matchlist div.highlighted {
   background-color: #ccc;
   cursor: pointer;
 }
-
+.matchlist .id {
+  color: #3334;
+}
 .helptop {
   position: absolute;
   bottom: 120%;
@@ -27,3 +35,19 @@
   background-color: #ff0c;
   font-size: 12px;
 }
+
+/* NC Node */
+.nodelabel > .matchlist {
+  max-width: 300px;
+  box-shadow: 4px 4px 6px 1px rgba(0, 0, 0, 0.1);
+  margin-top: -10px;
+}
+.nodelabel > .matchlist .warning {
+  line-height: 14px;
+  padding-top: 4px;
+  padding-bottom: 8px;
+}
+.nodelabel > .matchlist div:hover {
+  background-color: transparent;
+  cursor: default;
+}

app/view/netcreate/components/NCAutoSuggest.jsx

@@ -5,7 +5,7 @@
   USE:
 
     <NCAutoSuggest
-      statekey={key}
+      parentKey={key}
       value={value}
       onChange={this.handleInputUpdate}
       onSelect={this.handleSelection}
@@ -14,20 +14,28 @@
   PROPS
 
     onChange(key, value) -- returns `key` and `value` for the input field
-    onSelect(key, valuem, id) -- returns `key` and `value` for the final submission
-                                  as well as the matching id
+
+    onSelect(parentKey, value, id)
+        -- returns `state` and `value` for the final submission as well as the
+           matching id.  `value` is then passed back to NCAutoSuggest as the
+           search field input value.
 
   This will look up matching nodes via FIND_MATCHING_NODES nc-logic request.
 
   This is a simple HTML component that will allow users to enter arbitrary
   text input.  Any partial node labels will display as a list of popup
   menu options.
 
-  It can be used in a NCNode or NCEdge
+  It can be used in a NCSearch or NCEdge
+  (NOTE NCNode does not not use NCAutoSuggest, but displays a matchlist using
+  a mechanism similar to NCAutoSuggest -- the key difference is that NCNode's
+  matchlist is simply a static display list to let you know which nodes match
+  the current input field, and does NOT support selecting a match.)
 
-  `statekey` provides a unique key for source/target selection
+  `parentKey` provides a unique key to determine whether this NCAutoSuggest
+  component is being used for a `search`, a `source`, or a `target` selection
 
-  Replaces the AutoComplete and AutoSuggest components.
+  Replaces the deprecated AutoComplete and AutoSuggest components.
 
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
@@ -51,12 +59,19 @@ class NCAutoSuggest extends UNISYS.Component {
     this.state = {
       matches: [], // {id, label}
       higlightedLine: -1,
-      isValidNode: true
+      isValidNode: true,
+      uShowMatchlist: false
     };
 
+    this.m_UIInputFocus = this.m_UIInputFocus.bind(this);
+    this.m_UIInputClick = this.m_UIInputClick.bind(this);
     this.m_UIUpdate = this.m_UIUpdate.bind(this);
-    this.m_UISelect = this.m_UISelect.bind(this);
+    this.m_UISelectByLabel = this.m_UISelectByLabel.bind(this);
+    this.m_UISelectById = this.m_UISelectById.bind(this);
     this.m_UIKeyDown = this.m_UIKeyDown.bind(this);
+    this.m_UIMouseHighlightLine = this.m_UIMouseHighlightLine.bind(this);
+    this.m_UIMouseUnhighlightLine = this.m_UIMouseUnhighlightLine.bind(this);
+    this.m_UIHighlightLine = this.m_UIHighlightLine.bind(this);
     this.m_UIClickOutside = this.m_UIClickOutside.bind(this);
 
     document.addEventListener('click', this.m_UIClickOutside);
@@ -70,6 +85,27 @@ class NCAutoSuggest extends UNISYS.Component {
   }
 
   /**
+   * User has clicked inside the input field to set selection point
+   * This is needed to restore the selection point after a blur
+   * `focus` fires before `click`
+   */
+  m_UIInputFocus(event) {
+    event.target.select();
+    this.m_UIUpdate(event);
+  }
+
+  /**
+   * User has clicked in the input field, so update and show the matchlist
+   * and catch the event to prevent the document click handler from firing other actions
+   */
+  m_UIInputClick(event) {
+    event.preventDefault(); // this prevents the document click handler from closing the matchlist
+    event.stopPropagation();
+    this.setState({ uShowMatchlist: true });
+  }
+
+  /**
+   * User has typed in the input field, or the field is getting focus again.
    * This processes the form data before passing it on to the parent handler.
    * The callback function is generally an input state update method in
    * NCNode or NCEdge
@@ -79,7 +115,6 @@ class NCAutoSuggest extends UNISYS.Component {
     const { onChange } = this.props;
     const key = event.target.id;
     const value = event.target.value;
-
     // save the selection cursor position
     const selstart = event.target.selectionStart;
     const inputEl = event.target;
@@ -93,7 +128,7 @@ class NCAutoSuggest extends UNISYS.Component {
               return { id: d.id, label: d.label };
             })
           : undefined;
-      this.setState({ matches, isValidNode });
+      this.setState({ matches, isValidNode, uShowMatchlist: true });
       if (typeof onChange === 'function')
         onChange(key, value, () => {
           // restore  selection cursor position
@@ -103,41 +138,78 @@ class NCAutoSuggest extends UNISYS.Component {
     });
   }
   /**
-   * User has clicked an item in the matchlist, selecting one of the autosuggest items
+   * User has clicked an item in the matchlist,
+   * or selected an item by typing ENTER
+   * selecting one of the autosuggest items
    * @param {Object} event
-   * @param {string} key Usually either `source` or `target`
-   * @param {string} value
+   * @param {string} parentKey Either `search`, `source` or `target`
+   * @param {string} value The autosuggest input value
    */
-  m_UISelect(event, key, value) {
+  m_UISelectByLabel(event, parentKey, value) {
     event.preventDefault(); // catch click to close matchlist
     event.stopPropagation();
     const { onSelect } = this.props;
     const { matches } = this.state;
-    const matchedNode = matches ? matches.find(n => n.label === value) : undefined;
-    this.setState({ isValidNode: matchedNode, matches: [], higlightedLine: -1 }); // clear matches
-    if (typeof onSelect === 'function')
-      onSelect(key, value, matchedNode ? matchedNode.id : undefined); // callback function NCEdge.uiSourceTargetInputUpdate
+    const matchedNodeViaID = matches ? matches.find(n => n.id === value) : undefined;
+    this.setState({
+      isValidNode: matchedNodeViaID,
+      matches: [],
+      higlightedLine: -1,
+      uShowMatchlist: false
+    }); // clear matches
+    if (typeof onSelect === 'function') {
+      onSelect(
+        parentKey,
+        value,
+        matchedNodeViaID ? matchedNodeViaID.id : undefined // ...or id, not both
+      ); // callback function NCEdge.uiSourceTargetInputUpdate
+    }
+  }
+
+  m_UISelectById(event, parentKey, id) {
+    event.preventDefault(); // catch click to close matchlist
+    event.stopPropagation();
+    const { onSelect, value } = this.props;
+    const { matches } = this.state;
+    const matchedNodeViaID = matches ? matches.find(n => n.id === id) : undefined;
+    this.setState({
+      isValidNode: matchedNodeViaID,
+      matches: [],
+      higlightedLine: -1,
+      uShowMatchlist: false
+    }); // clear matches
+    if (typeof onSelect === 'function') {
+      onSelect(
+        parentKey,
+        value, // show the current input field value
+        matchedNodeViaID ? matchedNodeViaID.id : undefined // ...or `id`, not both
+      ); // callback function NCEdge.uiSourceTargetInputUpdate
+    }
   }
+
   /**
    * Handle key strokes
-   * --  Hitting up/down arrow will select the higlight
-   * --  Hitting Esc will cancel the autosuggest, also hitting Tab will prevent selecting the next field
-   * --  Hitting Enter will select the item
+   * --  Typing UP/DOWN arrow will select the higlight
+   * --  Typing ESC will cancel the autosuggest, also hitting Tab will prevent selecting the next field
+   * --  Typing ENTER will select the item
    * @param {Object} event
    */
   m_UIKeyDown(event) {
     const { matches, higlightedLine } = this.state;
-    const { statekey, value, onSelect } = this.props;
+    const { parentKey, value, onSelect } = this.props;
     const keystroke = event.key;
     const lastLine = matches ? matches.length : -1;
     let newHighlightedLine = higlightedLine;
     if (keystroke === 'Enter') {
-      let selectedValue = value;
-      if (higlightedLine > -1) {
-        // there is highlight, so select that
-        selectedValue = matches[higlightedLine].label;
+      if (higlightedLine > -1 && matches) {
+        // make sure matches exists, b/c hitting Enter with a typo can end up with bad match
+        // there is highlight, so select that using the id in the matchlist
+        const id = matches[higlightedLine].id;
+        this.m_UISelectById(event, parentKey, id); // user selects current highlight
+      } else if (value !== '') {
+        // Create a new node -- see also NCSearch
+        this.m_UISelectByLabel(event, parentKey, value); // user selects current highlight
       }
-      this.m_UISelect(event, statekey, selectedValue); // user selects current highlight
     }
     if (keystroke === 'Escape' || keystroke === 'Tab') {
       event.preventDefault(); // prevent tab key from going to the next field
@@ -151,52 +223,75 @@ class NCAutoSuggest extends UNISYS.Component {
       newHighlightedLine > -1 &&
       lastLine > 0
     ) {
-      newHighlightedLine = Math.min(lastLine - 1, Math.max(0, newHighlightedLine));
-      this.setState({ higlightedLine: newHighlightedLine });
-      const highlightedNode = matches[newHighlightedLine];
-      UDATA.LocalCall('AUTOSUGGEST_HILITE_NODE', { nodeId: highlightedNode.id });
+      this.m_UIHighlightLine(newHighlightedLine);
     }
   }
 
+  m_UIMouseHighlightLine(event, line) {
+    this.m_UIHighlightLine(line);
+  }
+  m_UIMouseUnhighlightLine(event) {
+    // Placeholder for future functionality
+    // Catch the event, but don't do anything.
+    // We want to keep the matchlist open even if you move the mouse
+    // outside of the line.
+  }
+
+  m_UIHighlightLine(line) {
+    const { matches } = this.state;
+    const lastLine = matches ? matches.length : -1;
+    line = Math.min(lastLine - 1, Math.max(0, line));
+    this.setState({ higlightedLine: line, uShowMatchlist: true });
+    const highlightedNode = matches[line];
+    UDATA.LocalCall('AUTOSUGGEST_HILITE_NODE', { nodeId: highlightedNode.id });
+  }
+
+  // Clicking outside of the matchlist should close the autosuggest
   m_UIClickOutside(event) {
-    if (!event.defaultPrevented) {
-      this.setState({ matches: [], higlightedLine: -1 }); // close autosuggest
-    }
+    if (event.defaultPrevented)
+      return; // clicking on the input field or the matchlist catches the click and prevents inadvertently closing the matchlist
+    else this.setState({ matches: [], higlightedLine: -1, uShowMatchlist: false }); // close matchlist
   }
 
   render() {
-    const { matches, higlightedLine, isValidNode } = this.state;
-    const { statekey, value, onSelect } = this.props;
+    const { matches, higlightedLine, isValidNode, uShowMatchlist } = this.state;
+    const { parentKey, value, onSelect } = this.props;
     const matchList =
       matches && matches.length > 0
         ? matches.map((n, i) => (
             <div
               key={`${n.label}${i}`}
               value={n.label}
               className={higlightedLine === i ? 'highlighted' : ''}
-              onClick={event => this.m_UISelect(event, statekey, n.label)}
+              onClick={event => this.m_UISelectById(event, parentKey, n.id)}
+              onMouseEnter={event => this.m_UIMouseHighlightLine(event, i)}
             >
-              {n.label}
+              {n.label} <span className="id">#{n.id}</span>
             </div>
           ))
         : undefined;
     return (
       <div style={{ position: 'relative', flexGrow: '1' }}>
         <div className="helptop">Click on a node, or type a node name</div>
         <input
-          id={statekey}
-          key={`${statekey}input`}
+          id={parentKey}
+          key={`${parentKey}input`}
           value={value}
           type="string"
           className={!isValidNode ? 'invalid' : ''}
           onChange={this.m_UIUpdate}
           onKeyDown={this.m_UIKeyDown}
-          onFocus={e => e.target.select()}
+          onFocus={this.m_UIInputFocus}
+          onClick={this.m_UIInputClick}
           autoComplete="off" // turn off Chrome's default autocomplete, which conflicts
         />
         <br />
-        {matchList && (
-          <div id="matchlist" className="matchlist">
+        {uShowMatchlist && matchList && (
+          <div
+            id="matchlist"
+            className="matchlist"
+            onMouseLeave={this.m_UIMouseUnhighlightLine}
+          >
             {matchList}
           </div>
         )}