COMPASS-666: Keyboard Enter on forms cause page refresh

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

@@ -73,8 +73,12 @@ class CreateCollectionDialog extends React.Component {
 
   /**
    * Initiate the attempt to create a collection.
+   * @param {Object} evt - The event object
    */
-  onCreateCollectionButtonClicked() {
+  onCreateCollectionButtonClicked(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
     this.setState({ inProgress: true, error: false, errorMessage: '' });
     Actions.createCollection(
       this.state.databaseName,
@@ -168,7 +172,10 @@ class CreateCollectionDialog extends React.Component {
         </Modal.Header>
 
         <Modal.Body>
-          <form name="create-collection-dialog-form" data-test-id="create-collection-modal">
+          <form name="create-collection-dialog-form"
+            onSubmit={this.onCreateCollectionButtonClicked.bind(this)}
+            data-test-id="create-collection-modal"
+          >
             <CreateCollectionInput
               id="create-collection-name"
               name="Collection Name"

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

@@ -62,8 +62,17 @@ class DropCollectionDialog extends React.Component {
 
   /**
    * Initiate the attempt to drop a database.
+   * @param {Object} evt - The event object
    */
-  onDropCollectionButtonClicked() {
+  onDropCollectionButtonClicked(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    // prevent drop of collection if names don't match
+    if (this.state.confirmName !== this.state.name) {
+      return;
+    }
+
     this.setState({ inProgress: true, error: false, errorMessage: '' });
     Actions.dropCollection(this.state.databaseName, this.state.name);
   }
@@ -112,7 +121,8 @@ class DropCollectionDialog extends React.Component {
               to drop
             </p>
           </div>
-          <form data-test-id="drop-collection-modal">
+          <form data-test-id="drop-collection-modal"
+              onSubmit={this.onDropCollectionButtonClicked.bind(this)}>
             <div className="form-group">
               <input
                 type="text"

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

@@ -76,8 +76,11 @@ class CreateDatabaseDialog extends React.Component {
 
   /**
    * Initiate the attempt to create a database.
+   * @param {Object} evt - The event object
    */
-  onCreateDatabaseButtonClicked() {
+  onCreateDatabaseButtonClicked(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
     this.setState({ inProgress: true, error: false, errorMessage: '' });
     Actions.createDatabase(
       this.state.databaseName,
@@ -191,7 +194,9 @@ class CreateDatabaseDialog extends React.Component {
         </Modal.Header>
 
         <Modal.Body>
-          <form name="create-collection-dialog-form" data-test-id="create-database-modal">
+          <form name="create-collection-dialog-form"
+              onSubmit={this.onCreateDatabaseButtonClicked.bind(this)}
+              data-test-id="create-database-modal">
             <this.CreateCollectionInput
               id="create-database-name"
               name="Database Name"

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

@@ -55,8 +55,16 @@ class DropDatabaseDialog extends React.Component {
 
   /**
    * Initiate the attempt to drop a database.
+   * @param {Object} evt - The event object
    */
-  onDropDatabaseButtonClicked() {
+  onDropDatabaseButtonClicked(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    // prevent drop database if names don't match
+    if (this.state.confirmName !== this.state.name) {
+      return;
+    }
     this.setState({ inProgress: true, error: false, errorMessage: '' });
     Actions.dropDatabase(this.state.name);
   }
@@ -105,7 +113,9 @@ class DropDatabaseDialog extends React.Component {
               to drop
             </p>
           </div>
-          <form data-test-id="drop-database-modal">
+          <form
+              onSubmit={this.onDropDatabaseButtonClicked.bind(this)}
+              data-test-id="drop-database-modal">
             <div className="form-group">
               <input
                 type="text"

test/functional/compass-functional.test.js

@@ -340,6 +340,32 @@ describe('Compass Functional Test Suite #spectron', function() {
           .should.not.eventually.include('temp');
       });
 
+      context('when enter key is pressed on drop database dialog', function() {
+        it('does nothing when incorrect database name is entered', function() {
+          return client
+          .clickCreateDatabaseButton()
+          .waitForCreateDatabaseModal()
+          .inputCreateDatabaseDetails({ name: 'temp', collectionName: 'temp' })
+          .clickCreateDatabaseModalButton()
+          .waitForDatabaseCreation('temp')
+          .clickDeleteDatabaseButton('temp')
+          .waitForDropDatabaseModal()
+          .inputDropDatabaseName('xkcd')
+          .pressEnter()
+          .waitForDropDatabaseModal()
+          .should.eventually.be.true;
+        });
+
+        it('removes the database on press', function() {
+          return client
+          .inputDropDatabaseName('temp')
+          .pressEnter()
+          .waitForDatabaseDeletion('temp')
+          .getHomeViewDatabaseNames()
+          .should.not.eventually.include('temp');
+        });
+      });
+
       it('removes the database from the sidebar', function() {
         return client
           .getSidebarDatabaseNames()
@@ -383,6 +409,24 @@ describe('Compass Functional Test Suite #spectron', function() {
               .getModalErrorMessage()
               .should.eventually.equal('invalid collection name');
           });
+
+          it('closes create collection dialog on escape press', function() {
+            return client
+              .pressEscape()
+              .waitForCreateCollectionModalHidden()
+              .should.eventually.be.true;
+          });
+
+          it('displays error on enter press', function() {
+            return client
+              .clickCreateCollectionButton()
+              .waitForCreateCollectionModal()
+              .inputCreateCollectionDetails({ name: '$test' })
+              .pressEnter()
+              .waitForModalError()
+              .getModalErrorMessage()
+              .should.eventually.equal('invalid collection name');
+          });
         });
 
         context('when the collection name is valid', function() {
@@ -407,6 +451,17 @@ describe('Compass Functional Test Suite #spectron', function() {
               .getSidebarCollectionCount()
               .should.eventually.equal(String(collCount + 1));
           });
+
+          it('creates a collection with enter press', function() {
+            return client
+              .clickCreateCollectionButton()
+              .waitForCreateCollectionModal()
+              .inputCreateCollectionDetails({name: 'bands' })
+              .pressEnter()
+              .waitForCollectionCreation('bands')
+              .getDatabaseViewCollectionNames()
+              .should.eventually.include('bands');
+          });
         });
 
         context('when deleting a collection', function() {
@@ -421,6 +476,26 @@ describe('Compass Functional Test Suite #spectron', function() {
               .should.not.eventually.include('labels');
           });
 
+          it('pressing enter on incorrect collection name does nothing', function() {
+            return client
+            .clickDeleteCollectionButton('bands')
+            .waitForDropCollectionModal()
+            .inputDropCollectionName('robot-hugs')
+            .pressEnter()
+            .waitForDropCollectionModal()
+            .should.eventually.be.true;
+          });
+
+          it('pressing enter on correct collection name removes collection', function() {
+            return client
+            .inputDropCollectionName('bands')
+            .pressEnter()
+            .waitForDropCollectionModal()
+            .waitForCollectionDeletion('bands')
+            .getDatabaseViewCollectionNames()
+            .should.not.eventually.include('bands');
+          });
+
           it('removes the collection from the sidebar', function() {
             return client
               .waitForInstanceRefresh()

test/functional/support/spectron-support.js

@@ -356,6 +356,10 @@ function addWaitCommands(client) {
     return this.waitForVisibleInCompass(selector('drop-database-modal'), true);
   });
 
+  client.addCommand('waitForCreateCollectionModalHidden', function() {
+    return this.waitForVisibleInCompass(selector('create-collection-modal'), true);
+  });
+
   client.addCommand('waitForInsertDocumentModalHidden', function() {
     return this.waitForVisibleInCompass(selector('insert-document-modal'), true);
   });
@@ -761,6 +765,13 @@ function addKeyPressCommands(client) {
   client.addCommand('pressEscape', function() {
     return this.keys(['Escape']);
   });
+
+  /**
+   * Press enter
+   */
+  client.addCommand('pressEnter', function() {
+    return this.keys(['Enter']);
+  });
 }
 
 /**