Merge pull request #56 from daveseah/dev-bl/fix-network-edge-update

Fix Network Edge Updates Clobbering Edge Edits
Kalani confirmed fixed Issue #54

Author: benloh

build/app/view/netcreate/components/EdgeEditor.jsx

@@ -365,6 +365,8 @@ class EdgeEditor extends UNISYS.Component {
           isEditable:           true
         });
 
+        this.AppCall('EDGEEDIT_LOCK', { edgeID: this.props.edgeID });
+
       } else {
 
         // LOAD EXISTING EDGE
@@ -508,6 +510,7 @@ class EdgeEditor extends UNISYS.Component {
           isEditable: true
         });
       }
+      this.AppCall('EDGEEDIT_LOCK', { edgeID: this.props.edgeID });
 
     } // handleEdgeEdit
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -537,8 +540,10 @@ class EdgeEditor extends UNISYS.Component {
         if (this.state.isEditable) {
           this.loadSourceAndTarget();
           this.setState({ isEditable: false, targetIsEditable: false });
+          this.AppCall('EDGEEDIT_UNLOCK', { edgeID: this.props.edgeID });
           this.AppCall('AUTOCOMPLETE_SELECT',{id:'search'});
         }
+
       } else {
         // expand, but don't set the autocomplete field, since we're not editing
         this.setState({ isExpanded: true });
@@ -548,12 +553,14 @@ class EdgeEditor extends UNISYS.Component {
 /*/
 /*/ onDeleteButtonClick () {
       this.clearForm();
+      this.AppCall('EDGEEDIT_UNLOCK', { edgeID: this.props.edgeID });
       this.AppCall('DB_UPDATE',{edgeID:this.props.edgeID});
     }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/
 /*/ onEditButtonClick () {
       this.setState({ isEditable: true });
+      this.AppCall('EDGEEDIT_LOCK', { edgeID: this.props.edgeID });
 
       // Don't allow editing of the source or target fields.
       // If you want to change the edge, delete this one and create a new one.
@@ -662,6 +669,7 @@ class EdgeEditor extends UNISYS.Component {
       }
       if (DBG) console.group('EdgeEntry.onSubmit submitting',edge)
 
+      this.AppCall('EDGEEDIT_UNLOCK', { edgeID: this.props.edgeID });
       // pass currentAutoComplete back to nodeselector
       this.AppCall('AUTOCOMPLETE_SELECT',{id:'search'});
       this.setState({ isEditable: false, sourceIsEditable: false, targetIsEditable: false });

build/app/view/netcreate/components/NodeSelector.jsx

@@ -149,7 +149,8 @@ class NodeSelector extends UNISYS.Component {
             isNewNode: true
         },
         edges:         [],
-        isLocked:      true,
+        isLocked:       true,
+        edgesAreLocked: false,
         sourceNodeIsLocked: false,
         isEditable:    false,
         isValid:       false,
@@ -223,20 +224,34 @@ class NodeSelector extends UNISYS.Component {
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /*/ This will add any new edges that have links to the currently selected node
       to the list of edges in the NodeSelector.
+      IMPORTANT: We ignore edge updates if an edge is currently being edited to
+      prevent edge updates from clobbering the edit.  The list of edges is
+      updated after the edit is completed, so new edges are added then.
   /*/
       UDATA.HandleMessage("EDGE_UPDATE", (data) => {
         let currentNodeID = this.state.formData.id;
         let updatedNodeIDs = [data.edge.source.id, data.edge.target.id];
-        if (updatedNodeIDs.includes(currentNodeID)) {
+        if (updatedNodeIDs.includes(currentNodeID) && !this.state.edgesAreLocked) {
           UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [currentNodeID] });
         }
       });
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
       // This handler is not necessary because SELECTION event clears the form
       // UDATA.HandleMessage("NODE_DELETE", (data) => {
       // });
       // This handler is not necessary because SELECTION event will update the edges
       // UDATA.HandleMessage("EDGE_DELETE", (data) => {
       // });
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /*/ This keeps track of whether an edge is being edited to prevent network
+      updates from clobbering an in-process edit.
+  /*/
+      UDATA.HandleMessage("EDGEEDIT_LOCK", (data) => {
+        this.setState({ edgesAreLocked: true });
+      });
+      UDATA.HandleMessage("EDGEEDIT_UNLOCK", (data) => {
+        this.setState({ edgesAreLocked: false });
+      });
 
     } // constructor
 
@@ -567,7 +582,7 @@ class NodeSelector extends UNISYS.Component {
   /*/
   onEditButtonClick(event) {
     event.preventDefault();
-    
+
     // nodeID needs to be a Number.  It should have been set in loadFormFromNode
     let nodeID = this.state.formData.id;