elastic#10099 adds keyboard handling to close confirm_modal on ESC

src/ui/public/modals/__tests__/confirm_modal.js

@@ -182,5 +182,48 @@ 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 () {
+      resetSpyCounts();
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: confirmCallback,
+        onCancel: cancelCallback,
+        onClose: closeCallback,
+        title: 'hi',
+        showClose: false
+      };
+
+      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 () {
+      resetSpyCounts();
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: confirmCallback,
+        onCancel: cancelCallback,
+        onClose: closeCallback,
+        title: 'hi',
+        showClose: false
+      };
+
+      confirmModal('hi', confirmModalOptions);
+
+      const e = angular.element.Event('keydown'); // eslint-disable-line new-cap
+      e.keyCode = 27;
+      while(e.keyCode === 27) {
+        e.keyCode = Math.floor((Math.random() * 100) + 1);
+      }
+      angular.element(document.body).trigger(e);
+
+      expect(cancelCallback.called).to.be(false);
+    });
   });
 });

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"

src/ui/public/modals/confirm_modal.js

@@ -72,7 +72,7 @@ module.factory('confirmModal', function ($rootScope, $compile) {
     };
 
     const modalInstance = $compile(template)(confirmScope);
-    modalPopover = new ModalOverlay(modalInstance);
+    modalPopover = new ModalOverlay(modalInstance, confirmScope);
     modalInstance.find('[data-test-subj=confirmModalConfirmButton]').focus();
 
     function destroy() {

src/ui/public/modals/modal_overlay.html

@@ -1 +1 @@
-<div class="kuiModalOverlay"></div>
+<div class="kuiModalOverlay" ng-keydown="onKeyDown($event)"></div>

src/ui/public/modals/modal_overlay.js

@@ -5,16 +5,25 @@ import modalOverlayTemplate from './modal_overlay.html';
  * Appends the modal to the dom on instantiation, and removes it when destroy is called.
  */
 export class ModalOverlay {
-  constructor(modalElement) {
+  constructor(modalElement, scope) {
     this.overlayElement = angular.element(modalOverlayTemplate);
     this.overlayElement.append(modalElement);
+
+    const onKeyDown = (event) => {
+      if(event.keyCode === 27) {
+        scope.onCancel();
+      }
+    };
+
+    angular.element(document.body).bind('keydown', onKeyDown);
     angular.element(document.body).append(this.overlayElement);
   }
 
   /**
    * Removes the overlay and modal from the dom.
    */
   destroy() {
+    angular.element(document.body).off('keydown');
     this.overlayElement.remove();
   }
 }