COMPASS-533: Escape key closes modal (#737)

* added onHide method to close modal on 'escape' key press

* remove keyboard=false for drop index as well

* added canHide bool for doc insert/clone when input focused

* added some functional tests

Author: Satya

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

@@ -19,7 +19,7 @@ class InsertDocumentDialog extends React.Component {
    */
   constructor(props) {
     super(props);
-    this.state = { open: false };
+    this.state = { open: false, canHide: false };
   }
 
   /**
@@ -63,6 +63,24 @@ class InsertDocumentDialog extends React.Component {
     this.setState({ open: false });
   }
 
+  /**
+   * handle losing focus from element
+   */
+  handleBlur() {
+    this.setState({canHide: false});
+  }
+
+  /**
+   * handle hide event rather than cancel
+   */
+  handleHide() {
+    if (this.state.canHide) {
+      this.setState({ open: false });
+    } else {
+      this.setState({ canHide: true });
+    }
+  }
+
   /**
    * Handles completion of the document insert.
    *
@@ -88,12 +106,13 @@ class InsertDocumentDialog extends React.Component {
    */
   render() {
     return (
-      <Modal show={this.state.open} backdrop="static" keyboard={false}>
+      <Modal show={this.state.open} backdrop="static"
+          onHide={this.handleHide.bind(this)}>
         <Modal.Header>
           <Modal.Title>Insert Document</Modal.Title>
         </Modal.Header>
 
-        <Modal.Body>
+        <Modal.Body onFocus={this.handleBlur.bind(this)} >
           <InsertDocument doc={this.state.doc} />
           <InsertDocumentFooter />
         </Modal.Body>

src/internal-packages/database/lib/components/create-collection-dialog.jsx

@@ -67,7 +67,7 @@ class CreateCollectionDialog extends React.Component {
   /**
    * When the cancel button is clicked.
    */
-  onCancelButtonClicked() {
+  onHideModal() {
     this.setState({ open: false });
   }
 
@@ -160,7 +160,7 @@ class CreateCollectionDialog extends React.Component {
       <Modal
         show={this.state.open}
         backdrop="static"
-        keyboard={false}
+        onHide={this.onHideModal.bind(this)}
         dialogClassName="create-collection-dialog">
 
         <Modal.Header>
@@ -194,7 +194,7 @@ class CreateCollectionDialog extends React.Component {
           <TextButton
             className="btn btn-default"
             text="Cancel"
-            clickHandler={this.onCancelButtonClicked.bind(this)} />
+            clickHandler={this.onHideModal.bind(this)} />
           <TextButton
             className="btn btn-primary"
             dataTestId="create-collection-button"

src/internal-packages/database/lib/components/drop-collection-dialog.jsx

@@ -56,7 +56,7 @@ class DropCollectionDialog extends React.Component {
   /**
    * When the cancel button is clicked.
    */
-  onCancelButtonClicked() {
+  onHideModal() {
     this.setState({ open: false });
   }
 
@@ -97,7 +97,8 @@ class DropCollectionDialog extends React.Component {
    */
   render() {
     return (
-      <Modal show={this.state.open} backdrop="static" keyboard={false} dialogClassName="drop-collection-dialog">
+      <Modal show={this.state.open} backdrop="static" onHide={this.onHideModal.bind(this)}
+          dialogClassName="drop-collection-dialog">
         <Modal.Header>
           <Modal.Title>Drop Collection</Modal.Title>
         </Modal.Header>
@@ -133,7 +134,7 @@ class DropCollectionDialog extends React.Component {
           <TextButton
             className="btn btn-default"
             text="Cancel"
-            clickHandler={this.onCancelButtonClicked.bind(this)} />
+            clickHandler={this.onHideModal.bind(this)} />
           <button
             className="btn btn-primary"
             data-test-id="drop-collection-button"

src/internal-packages/indexes/lib/component/create-index-modal.jsx

@@ -228,7 +228,6 @@ class CreateIndexModal extends React.Component {
       <Modal show={this.props.open}
         backdrop="static"
         dialogClassName="create-index-modal"
-        keyboard={false}
         onHide={this.close.bind(this)} >
 
         <div className="create-index-modal-content" data-test-id="create-index-modal">

src/internal-packages/indexes/lib/component/drop-index-modal.jsx

@@ -127,7 +127,6 @@ class DropIndexModal extends React.Component {
       <Modal show={this.props.open}
         backdrop="static"
         dialogClassName="drop-index-modal"
-        keyboard={false}
         onHide={this.handleClose.bind(this)} >
         <div className="drop-index-modal-content">
           <Modal.Header>

src/internal-packages/server-stats/lib/component/create-database-dialog.jsx

@@ -70,7 +70,7 @@ class CreateDatabaseDialog extends React.Component {
   /**
    * When the cancel button is clicked.
    */
-  onCancelButtonClicked() {
+  onHideModal() {
     this.setState({ open: false });
   }
 
@@ -183,7 +183,7 @@ class CreateDatabaseDialog extends React.Component {
       <Modal
         show={this.state.open}
         backdrop="static"
-        keyboard={false}
+        onHide={this.onHideModal.bind(this)}
         dialogClassName="create-collection-dialog">
 
         <Modal.Header>
@@ -227,7 +227,7 @@ class CreateDatabaseDialog extends React.Component {
           <TextButton
             className="btn btn-default"
             text="Cancel"
-            clickHandler={this.onCancelButtonClicked.bind(this)} />
+            clickHandler={this.onHideModal.bind(this)} />
           <TextButton
             className="btn btn-primary"
             dataTestId="create-database-button"

src/internal-packages/server-stats/lib/component/drop-database-dialog.jsx

@@ -49,7 +49,7 @@ class DropDatabaseDialog extends React.Component {
   /**
    * When the cancel button is clicked.
    */
-  onCancelButtonClicked() {
+  onHideModal() {
     this.setState({ open: false });
   }
 
@@ -90,7 +90,8 @@ class DropDatabaseDialog extends React.Component {
    */
   render() {
     return (
-      <Modal show={this.state.open} backdrop="static" keyboard={false} dialogClassName="drop-database-dialog">
+      <Modal show={this.state.open} backdrop="static" onHide={this.onHideModal.bind(this)}
+          dialogClassName="drop-database-dialog">
         <Modal.Header>
           <Modal.Title>Drop Database</Modal.Title>
         </Modal.Header>
@@ -126,7 +127,7 @@ class DropDatabaseDialog extends React.Component {
           <TextButton
             className="btn btn-default"
             text="Cancel"
-            clickHandler={this.onCancelButtonClicked.bind(this)} />
+            clickHandler={this.onHideModal.bind(this)} />
           <button
             className="btn btn-primary"
             data-test-id="drop-database-button"

test/compass-functional.test.js

@@ -215,6 +215,18 @@ describe('Compass Functional Test Suite #spectron', function() {
         });
       });
 
+      context('when the escape key is pressed', function() {
+        it('closes the create databases modal', function() {
+          return client
+            .clickDatabasesTab()
+            .clickCreateDatabaseButton()
+            .waitForCreateDatabaseModal()
+            .pressEscape()
+            .waitForCreateDatabasesModalHidden()
+            .should.eventually.be.true;
+        });
+      });
+
       context('when the database name is invalid', function() {
         it('displays the error message', function() {
           return client
@@ -301,6 +313,17 @@ describe('Compass Functional Test Suite #spectron', function() {
         });
       });
 
+      context('when the escape key is pressed', function() {
+        it('closes the drop databases modal', function() {
+          return client
+            .clickDeleteDatabaseButton('music')
+            .waitForDropDatabaseModal()
+            .pressEscape()
+            .waitForDropDatabasesModalHidden()
+            .should.eventually.be.true;
+        });
+      });
+
       it('requires database name confirmation', function() {
         return client
           .clickCreateDatabaseButton()
@@ -451,6 +474,23 @@ describe('Compass Functional Test Suite #spectron', function() {
               .should.eventually.include('Aphex Twin');
           });
         });
+
+        context('when pressing escape key twice', function() {
+          it('does not close the insert documents modal on first press', function() {
+            return client
+              .clickInsertDocumentButton()
+              .waitForInsertDocumentModal()
+              .pressEscape()
+              .waitForInsertDocumentModal()
+              .should.eventually.be.true;
+          });
+          it('closes the insert documents modal on second press', function() {
+            return client
+              .pressEscape()
+              .waitForInsertDocumentModalHidden()
+              .should.eventually.be.true;
+          });
+        });
       });
 
       context('when editing a document', function() {

test/support/spectron-support.js

@@ -347,6 +347,18 @@ function addWaitCommands(client) {
     const row = `${base} ${selector('sortable-table-column-0')}[title=${name}]`;
     return this.waitForExistInCompass(row, true);
   });
+
+  client.addCommand('waitForCreateDatabasesModalHidden', function() {
+    return this.waitForVisibleInCompass(selector('create-database-modal'), true);
+  });
+
+  client.addCommand('waitForDropDatabasesModalHidden', function() {
+    return this.waitForVisibleInCompass(selector('drop-database-modal'), true);
+  });
+
+  client.addCommand('waitForInsertDocumentModalHidden', function() {
+    return this.waitForVisibleInCompass(selector('insert-document-modal'), true);
+  });
 }
 
 /**
@@ -734,6 +746,15 @@ function addClickCommands(client) {
   // clickSaveFavoriteButton
 }
 
+function addKeyPressCommands(client) {
+  /**
+   * Press escape
+   */
+  client.addCommand('pressEscape', function() {
+    return this.keys(['Escape']);
+  });
+}
+
 /**
  * Add commands to the client to get values from the screen.
  *
@@ -1335,6 +1356,7 @@ function launchCompass() {
     addExtendedWaitCommands(client);
     addWaitCommands(client);
     addClickCommands(client);
+    addKeyPressCommands(client);
     addGetCommands(client);
     addInputCommands(client);
     chaiAsPromised.transferPromiseness = app.transferPromiseness;