#10099 adds keyboard handling to close confirm_modal on ESC (#10455)

* #10099 adds keyboard handling to close confirm_modal on ESC * remove resetSpyCounts, use beforeEach * #10099 change from .bind to .on and remove unnecessary onKeyDown call * #10099 move ESC handling to confirm_modal.js
elastic · Mar 1, 2017 · 6641bc1 · 6641bc1
1 parent 5aa5769
commit 6641bc1
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/src/ui/public/modals/__tests__/confirm_modal.js b/src/ui/public/modals/__tests__/confirm_modal.js
@@ -125,14 +125,13 @@ describe('ui/modals/confirm_modal', function () {
       showClose: true
     };
 
-    function resetSpyCounts() {
+    beforeEach(() => {
       confirmCallback.reset();
       closeCallback.reset();
       cancelCallback.reset();
-    }
+    });
 
     it('onClose', function () {
-      resetSpyCounts();
       confirmModal('hi', confirmModalOptions);
       $rootScope.$digest();
       findByDataTestSubj('confirmModalCloseButton').click();
@@ -143,7 +142,6 @@ describe('ui/modals/confirm_modal', function () {
     });
 
     it('onCancel', function () {
-      resetSpyCounts();
       confirmModal('hi', confirmModalOptions);
       $rootScope.$digest();
       findByDataTestSubj('confirmModalCancelButton').click();
@@ -154,7 +152,6 @@ describe('ui/modals/confirm_modal', function () {
     });
 
     it('onConfirm', function () {
-      resetSpyCounts();
       confirmModal('hi', confirmModalOptions);
       $rootScope.$digest();
       findByDataTestSubj('confirmModalConfirmButton').click();
@@ -166,7 +163,6 @@ describe('ui/modals/confirm_modal', function () {
 
 
     it('onClose defaults to onCancel if not specified', function () {
-      resetSpyCounts();
       const confirmModalOptions = {
         confirmButtonText: 'bye',
         onConfirm: confirmCallback,
@@ -182,5 +178,39 @@ describe('ui/modals/confirm_modal', function () {
       expect(confirmCallback.called).to.be(false);
       expect(cancelCallback.called).to.be(true);
     });
+
+    it('onKeyDown detects ESC and calls onCancel', function () {
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: confirmCallback,
+        onCancel: cancelCallback,
+        title: 'hi'
+      };
+
+      confirmModal('hi', confirmModalOptions);
+
+      const e = angular.element.Event('keydown'); // eslint-disable-line new-cap
+      e.keyCode = 27;
+      angular.element(document.body).trigger(e);
+
+      expect(cancelCallback.called).to.be(true);
+    });
+
+    it('onKeyDown ignores keys other than ESC', function () {
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: confirmCallback,
+        onCancel: cancelCallback,
+        title: 'hi'
+      };
+
+      confirmModal('hi', confirmModalOptions);
+
+      const e = angular.element.Event('keydown'); // eslint-disable-line new-cap
+      e.keyCode = 50;
+      angular.element(document.body).trigger(e);
+
+      expect(cancelCallback.called).to.be(false);
+    });
   });
 });
diff --git a/src/ui/public/modals/confirm_modal.html b/src/ui/public/modals/confirm_modal.html
@@ -3,7 +3,6 @@
     <div class="kuiModalHeader__title" data-test-subj="confirmModalTitleText">
       {{title}}
     </div>
-
     <div
       ng-if="showClose"
       class="kuiModalHeaderCloseButton kuiIcon fa-times"

diff --git a/src/ui/public/modals/confirm_modal.js b/src/ui/public/modals/confirm_modal.js
@@ -1,3 +1,4 @@
+import angular from 'angular';
 import { noop } from 'lodash';
 import uiModules from 'ui/modules';
 import template from './confirm_modal.html';
@@ -73,11 +74,19 @@ module.factory('confirmModal', function ($rootScope, $compile) {
 
     const modalInstance = $compile(template)(confirmScope);
     modalPopover = new ModalOverlay(modalInstance);
+
+    angular.element(document.body).on('keydown', (event) => {
+      if(event.keyCode === 27) {
+        confirmScope.onCancel();
+      }
+    });
+
     modalInstance.find('[data-test-subj=confirmModalConfirmButton]').focus();
 
     function destroy() {
       modalPopover.destroy();
       modalPopover = undefined;
+      angular.element(document.body).off('keydown');
       confirmScope.$destroy();
     }
   };

diff --git a/src/ui/public/modals/modal_overlay.js b/src/ui/public/modals/modal_overlay.js
@@ -8,6 +8,7 @@ export class ModalOverlay {
   constructor(modalElement) {
     this.overlayElement = angular.element(modalOverlayTemplate);
     this.overlayElement.append(modalElement);
+
     angular.element(document.body).append(this.overlayElement);
   }