fix(editing): stop showing document editor after refresh COMPASS-4454 (…

…#324)

Handle a hit of the `Refresh` button like cancelling the document
editing process.

src/components/document-footer.jsx

@@ -75,6 +75,17 @@ class DocumentFooter extends React.Component {
     this.handleModification();
   }
 
+  /**
+   * Handle a possible switch of the document that we're targeting.
+   */
+  componentDidUpdate(prevProps) {
+    if (this.props.doc !== prevProps.doc) {
+      // If the underlying document changed, that means that the collection
+      // contents have been refreshed. Treat that like cancelling the edit.
+      this.handleCancel();
+    }
+  }
+
   /**
    * Unsubscribe from the udpate store on unmount.
    */

src/components/editable-document.jsx

@@ -74,6 +74,13 @@ class EditableDocument extends React.Component {
     if (prevProps.doc !== this.props.doc) {
       this.unsubscribeFromDocumentEvents(prevProps.doc);
       this.subscribeToDocumentEvents(this.props.doc);
+      if (this.state.editing || this.state.deleting) {
+        // If the underlying document changed, that means that the collection
+        // contents have been refreshed. In that case, stop editing/deleting.
+        setImmediate(() => {
+          this.setState({ editing: false, deleting: false });
+        });
+      }
     }
   }
 

src/components/editable-json.jsx

@@ -103,7 +103,7 @@ class JsonEditor extends React.Component {
    * Fold all documents on update as well, since we might get fresh documents
    * from the query bar.
    */
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (!this.state.editing) {
       this.editor.getSession().foldAll(2);
     }
@@ -113,6 +113,10 @@ class JsonEditor extends React.Component {
       this.handleRemoveSuccess();
     } else if (this.state.editing && this.props.updateSuccess) {
       this.handleUpdateSuccess();
+    } else if (this.props.doc !== prevProps.doc) {
+      // If the underlying document changed, that means that the collection
+      // contents have been refreshed. Treat that like cancelling the edit.
+      this.handleCancel();
     }
   }
 
@@ -122,6 +126,7 @@ class JsonEditor extends React.Component {
   handleCancel() {
     this.setState({
       editing: false,
+      deleting: false,
       mode: VIEWING,
       message: EMPTY,
       value: this.props.doc

src/components/json-editor.jsx

@@ -103,7 +103,7 @@ class EditableJson extends React.Component {
    * Fold all documents on update as well, since we might get fresh documents
    * from the query bar.
    */
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (!this.state.editing) {
       this.editor.getSession().foldAll(2);
     }
@@ -113,6 +113,10 @@ class EditableJson extends React.Component {
       this.handleRemoveSuccess();
     } else if (this.state.editing && this.props.updateSuccess) {
       this.handleUpdateSuccess();
+    } else if (this.props.doc !== prevProps.doc) {
+      // If the underlying document changed, that means that the collection
+      // contents have been refreshed. Treat that like cancelling the edit.
+      this.handleCancel();
     }
   }
 
@@ -122,6 +126,7 @@ class EditableJson extends React.Component {
   handleCancel() {
     this.setState({
       editing: false,
+      deleting: false,
       mode: VIEWING,
       message: EMPTY,
       json: jsBeautify(EJSON.stringify(this.props.doc.generateObject()))