Close modal with esc (#10929)

* added var to check if modal is open and an if for escape fullview

* moved showconfirmmodal to utils, showconfirmmodal now uses showmodal, esc works in textinput

* made esc global

public/app/core/services/alert_srv.ts

@@ -7,7 +7,7 @@ export class AlertSrv {
   list: any[];
 
   /** @ngInject */
-  constructor(private $timeout, private $rootScope, private $modal) {
+  constructor(private $timeout, private $rootScope) {
     this.list = [];
   }
 
@@ -39,7 +39,6 @@ export class AlertSrv {
     appEvents.on('alert-warning', options => this.set(options[0], options[1], 'warning', 5000));
     appEvents.on('alert-success', options => this.set(options[0], options[1], 'success', 3000));
     appEvents.on('alert-error', options => this.set(options[0], options[1], 'error', 7000));
-    appEvents.on('confirm-modal', this.showConfirmModal.bind(this));
   }
 
   getIconForSeverity(severity) {
@@ -96,45 +95,6 @@ export class AlertSrv {
   clearAll() {
     this.list = [];
   }
-
-  showConfirmModal(payload) {
-    var scope = this.$rootScope.$new();
-
-    scope.onConfirm = function() {
-      payload.onConfirm();
-      scope.dismiss();
-    };
-
-    scope.updateConfirmText = function(value) {
-      scope.confirmTextValid = payload.confirmText.toLowerCase() === value.toLowerCase();
-    };
-
-    scope.title = payload.title;
-    scope.text = payload.text;
-    scope.text2 = payload.text2;
-    scope.confirmText = payload.confirmText;
-
-    scope.onConfirm = payload.onConfirm;
-    scope.onAltAction = payload.onAltAction;
-    scope.altActionText = payload.altActionText;
-    scope.icon = payload.icon || 'fa-check';
-    scope.yesText = payload.yesText || 'Yes';
-    scope.noText = payload.noText || 'Cancel';
-    scope.confirmTextValid = scope.confirmText ? false : true;
-
-    var confirmModal = this.$modal({
-      template: 'public/app/partials/confirm_modal.html',
-      persist: false,
-      modalClass: 'confirm-modal',
-      show: false,
-      scope: scope,
-      keyboard: false,
-    });
-
-    confirmModal.then(function(modalEl) {
-      modalEl.modal('show');
-    });
-  }
 }
 
 coreModule.service('alertSrv', AlertSrv);

public/app/core/services/keybindingSrv.ts

@@ -5,9 +5,11 @@ import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
 
 import Mousetrap from 'mousetrap';
+import 'mousetrap-global-bind';
 
 export class KeybindingSrv {
   helpModal: boolean;
+  modalOpen = false;
 
   /** @ngInject */
   constructor(private $rootScope, private $location) {
@@ -19,6 +21,7 @@ export class KeybindingSrv {
     });
 
     this.setupGlobal();
+    appEvents.on('show-modal', () => (this.modalOpen = true));
   }
 
   setupGlobal() {
@@ -30,6 +33,7 @@ export class KeybindingSrv {
     this.bind('s o', this.openSearch);
     this.bind('s t', this.openSearchTags);
     this.bind('f', this.openSearch);
+    this.bindGlobal('esc', this.exit);
   }
 
   openSearchStarred() {
@@ -60,6 +64,28 @@ export class KeybindingSrv {
     appEvents.emit('show-modal', { templateHtml: '<help-modal></help-modal>' });
   }
 
+  exit() {
+    var popups = $('.popover.in');
+    if (popups.length > 0) {
+      return;
+    }
+
+    appEvents.emit('hide-modal');
+
+    if (!this.modalOpen) {
+      appEvents.emit('panel-change-view', { fullscreen: false, edit: false });
+    } else {
+      this.modalOpen = false;
+    }
+
+    // close settings view
+    var search = this.$location.search();
+    if (search.editview) {
+      delete search.editview;
+      this.$location.search(search);
+    }
+  }
+
   bind(keyArg, fn) {
     Mousetrap.bind(
       keyArg,
@@ -73,6 +99,19 @@ export class KeybindingSrv {
     );
   }
 
+  bindGlobal(keyArg, fn) {
+    Mousetrap.bindGlobal(
+      keyArg,
+      evt => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        evt.returnValue = false;
+        return this.$rootScope.$apply(fn.bind(this));
+      },
+      'keydown'
+    );
+  }
+
   showDashEditView() {
     var search = _.extend(this.$location.search(), { editview: 'settings' });
     this.$location.search(search);
@@ -204,23 +243,6 @@ export class KeybindingSrv {
     this.bind('d v', () => {
       appEvents.emit('toggle-view-mode');
     });
-
-    this.bind('esc', () => {
-      var popups = $('.popover.in');
-      if (popups.length > 0) {
-        return;
-      }
-
-      scope.appEvent('hide-modal');
-      scope.appEvent('panel-change-view', { fullscreen: false, edit: false });
-
-      // close settings view
-      var search = this.$location.search();
-      if (search.editview) {
-        delete search.editview;
-        this.$location.search(search);
-      }
-    });
   }
 }
 

public/app/core/services/util_srv.ts

@@ -10,6 +10,7 @@ export class UtilSrv {
   init() {
     appEvents.on('show-modal', this.showModal.bind(this), this.$rootScope);
     appEvents.on('hide-modal', this.hideModal.bind(this), this.$rootScope);
+    appEvents.on('confirm-modal', this.showConfirmModal.bind(this), this.$rootScope);
   }
 
   hideModal() {
@@ -47,6 +48,38 @@ export class UtilSrv {
       modalEl.modal('show');
     });
   }
+
+  showConfirmModal(payload) {
+    var scope = this.$rootScope.$new();
+
+    scope.onConfirm = function() {
+      payload.onConfirm();
+      scope.dismiss();
+    };
+
+    scope.updateConfirmText = function(value) {
+      scope.confirmTextValid = payload.confirmText.toLowerCase() === value.toLowerCase();
+    };
+
+    scope.title = payload.title;
+    scope.text = payload.text;
+    scope.text2 = payload.text2;
+    scope.confirmText = payload.confirmText;
+
+    scope.onConfirm = payload.onConfirm;
+    scope.onAltAction = payload.onAltAction;
+    scope.altActionText = payload.altActionText;
+    scope.icon = payload.icon || 'fa-check';
+    scope.yesText = payload.yesText || 'Yes';
+    scope.noText = payload.noText || 'Cancel';
+    scope.confirmTextValid = scope.confirmText ? false : true;
+
+    appEvents.emit('show-modal', {
+      src: 'public/app/partials/confirm_modal.html',
+      scope: scope,
+      modalClass: 'confirm-modal',
+    });
+  }
 }
 
 coreModule.service('utilSrv', UtilSrv);