Add confirmOnEnter prop to confirm dialog

For some dialogs, the confirm event should fire on enter. This change
adds this optional property.

Checking the disabled property before firing the confirm event should
prevent unintended side effects throughout the app.

Change-Id: I5603065b37bf87b1c4b36ff54376fb4066869afe

polygerrit-ui/app/elements/admin/gr-admin-group-list/gr-admin-group-list.html

@@ -68,6 +68,7 @@ limitations under the License.
           class="confirmDialog"
           disabled="[[!_hasNewGroupName]]"
           confirm-label="Create"
+          confirm-on-enter
           on-confirm="_handleCreateGroup"
           on-cancel="_handleCloseCreate">
         <div class="header" slot="header">

polygerrit-ui/app/elements/admin/gr-confirm-delete-item-dialog/gr-confirm-delete-item-dialog.html

@@ -28,6 +28,7 @@ limitations under the License.
     </style>
     <gr-confirm-dialog
         confirm-label="Delete [[_computeItemName(itemType)]]"
+        confirm-on-enter
         on-confirm="_handleConfirmTap"
         on-cancel="_handleCancelTap">
       <div class="header" slot="header">[[_computeItemName(itemType)]] Deletion</div>

polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html

@@ -167,6 +167,7 @@ limitations under the License.
           id="confirmDeleteDialog"
           class="confirmDialog"
           confirm-label="Delete"
+          confirm-on-enter
           on-cancel="_handleConfirmDialogCancel"
           on-confirm="_handleDeleteConfirm">
         <div class="header" slot="header">
@@ -180,6 +181,7 @@ limitations under the License.
           id="confirmDeleteEditDialog"
           class="confirmDialog"
           confirm-label="Delete"
+          confirm-on-enter
           on-cancel="_handleConfirmDialogCancel"
           on-confirm="_handleDeleteEditConfirm">
         <div class="header" slot="header">

polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html

@@ -331,6 +331,7 @@ limitations under the License.
       <gr-confirm-dialog
           id="confirmDiscardDialog"
           confirm-label="Discard"
+          confirm-on-enter
           on-confirm="_handleConfirmDiscard"
           on-cancel="_closeConfirmDiscardOverlay">
         <div class="header" slot="header">

polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html

@@ -83,6 +83,7 @@ limitations under the License.
           class="invisible dialog"
           disabled$="[[!_isValidPath(_path)]]"
           confirm-label="Open"
+          confirm-on-enter
           on-confirm="_handleOpenConfirm"
           on-cancel="_handleDialogCancel">
         <div class="header" slot="header">
@@ -100,6 +101,7 @@ limitations under the License.
           class="invisible dialog"
           disabled$="[[!_isValidPath(_path)]]"
           confirm-label="Delete"
+          confirm-on-enter
           on-confirm="_handleDeleteConfirm"
           on-cancel="_handleDialogCancel">
         <div class="header" slot="header">Delete a file from the repo</div>
@@ -115,6 +117,7 @@ limitations under the License.
           class="invisible dialog"
           disabled$="[[!_computeRenameDisabled(_path, _newPath)]]"
           confirm-label="Rename"
+          confirm-on-enter
           on-confirm="_handleRenameConfirm"
           on-cancel="_handleDialogCancel">
         <div class="header" slot="header">Rename a file in the repo</div>
@@ -134,6 +137,7 @@ limitations under the License.
           id="restoreDialog"
           class="invisible dialog"
           confirm-label="Restore"
+          confirm-on-enter
           on-confirm="_handleRestoreConfirm"
           on-cancel="_handleDialogCancel">
         <div class="header" slot="header">Restore this file?</div>

polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html

@@ -54,12 +54,12 @@ limitations under the License.
         justify-content: flex-end;
       }
     </style>
-    <div class="container">
+    <div class="container" on-keydown="_handleKeydown">
       <header><slot name="header"></slot></header>
       <main><slot name="main"></slot></main>
       <footer>
         <gr-button link on-tap="_handleCancelTap">[[cancelLabel]]</gr-button>
-        <gr-button link primary on-tap="_handleConfirmTap" disabled="[[disabled]]">
+        <gr-button link primary on-tap="_handleConfirm" disabled="[[disabled]]">
           [[confirmLabel]]
         </gr-button>
       </footer>

polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.js

@@ -42,13 +42,19 @@
         type: Boolean,
         value: false,
       },
+      confirmOnEnter: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     hostAttributes: {
       role: 'dialog',
     },
 
-    _handleConfirmTap(e) {
+    _handleConfirm(e) {
+      if (this.disabled) { return; }
+
       e.preventDefault();
       this.fire('confirm', null, {bubbles: false});
     },
@@ -57,5 +63,9 @@
       e.preventDefault();
       this.fire('cancel', null, {bubbles: false});
     },
+
+    _handleKeydown(e) {
+      if (this.confirmOnEnter && e.keyCode === 13) { this._handleConfirm(e); }
+    },
   });
 })();

polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog_test.html

@@ -34,11 +34,15 @@ limitations under the License.
 <script>
   suite('gr-confirm-dialog tests', () => {
     let element;
+    let sandbox;
 
     setup(() => {
+      sandbox = sinon.sandbox.create();
       element = fixture('basic');
     });
 
+    teardown(() => { sandbox.restore(); });
+
     test('events', done => {
       let numEvents = 0;
       function handler() { if (++numEvents == 2) { done(); } }
@@ -49,5 +53,24 @@ limitations under the License.
       MockInteractions.tap(element.$$('gr-button[primary]'));
       MockInteractions.tap(element.$$('gr-button:not([primary])'));
     });
+
+    test('confirmOnEnter', () => {
+      element.confirmOnEnter = false;
+      const handleConfirmStub = sandbox.stub(element, '_handleConfirm');
+      const handleKeydownSpy = sandbox.spy(element, '_handleKeydown');
+      MockInteractions.pressAndReleaseKeyOn(element.$$('main'),
+          13, null, 'enter');
+      flushAsynchronousOperations();
+
+      assert.isTrue(handleKeydownSpy.called);
+      assert.isFalse(handleConfirmStub.called);
+
+      element.confirmOnEnter = true;
+      MockInteractions.pressAndReleaseKeyOn(element.$$('main'),
+          13, null, 'enter');
+      flushAsynchronousOperations();
+
+      assert.isTrue(handleConfirmStub.called);
+    });
   });
 </script>