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

package.json

@@ -150,6 +150,7 @@
     "mobx-state-tree": "^1.3.1",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
+    "mousetrap-global-bind": "^1.1.0",
     "perfect-scrollbar": "^1.2.0",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",

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);

yarn.lock

@@ -224,14 +224,6 @@
   version "16.0.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.25.tgz#bf696b83fe480c5e0eff4335ee39ebc95884a1ed"
 
-"@types/strip-bom@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
-
-"@types/strip-json-comments@0.0.30":
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
-
 JSONStream@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.1.tgz#707f761e01dae9e16f1bcf93703b78c70966579a"
@@ -1641,14 +1633,6 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chalk@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
-  dependencies:
-    ansi-styles "^3.2.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.2.0"
-
 chalk@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
@@ -2799,7 +2783,7 @@ diff@^2.0.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
 
-diff@^3.1.0, diff@^3.2.0:
+diff@^3.2.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
 
@@ -4414,10 +4398,6 @@ has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
 
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-
 has-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
@@ -4546,12 +4526,6 @@ home-or-tmp@^2.0.0:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.1"
 
-homedir-polyfill@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
-  dependencies:
-    parse-passwd "^1.0.0"
-
 hooker@^0.2.3, hooker@~0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/hooker/-/hooker-0.2.3.tgz#b834f723cc4a242aa65963459df6d984c5d3d959"
@@ -6250,10 +6224,6 @@ make-dir@^1.0.0:
   dependencies:
     pify "^3.0.0"
 
-make-error@^1.1.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.3.tgz#a97ae14ffd98b05f543e83ddc395e1b2b6e4cc6a"
-
 make-fetch-happen@^2.4.13, make-fetch-happen@^2.5.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-2.6.0.tgz#8474aa52198f6b1ae4f3094c04e8370d35ea8a38"
@@ -6555,6 +6525,10 @@ moment@^2.18.1:
   version "2.19.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.2.tgz#8a7f774c95a64550b4c7ebd496683908f9419dbe"
 
+mousetrap-global-bind@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mousetrap-global-bind/-/mousetrap-global-bind-1.1.0.tgz#cd7de9222bd0646fa2e010d54c84a74c26a88edd"
+
 mousetrap@^1.6.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
@@ -7414,10 +7388,6 @@ parse-json@^3.0.0:
   dependencies:
     error-ex "^1.3.1"
 
-parse-passwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
-
 parse5@^3.0.1, parse5@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
@@ -9648,7 +9618,7 @@ strip-json-comments@1.0.x, strip-json-comments@~1.0.1, strip-json-comments@~1.0.
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
 
-strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
+strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
@@ -9680,12 +9650,6 @@ supports-color@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.2.0.tgz#b0d5333b1184dd3666cbe5aa0b45c5ac7ac17a4a"
-  dependencies:
-    has-flag "^3.0.0"
-
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -9994,30 +9958,6 @@ ts-loader@^3.2.0:
     loader-utils "^1.0.2"
     semver "^5.0.1"
 
-ts-node@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-4.1.0.tgz#36d9529c7b90bb993306c408cd07f7743de20712"
-  dependencies:
-    arrify "^1.0.0"
-    chalk "^2.3.0"
-    diff "^3.1.0"
-    make-error "^1.1.1"
-    minimist "^1.2.0"
-    mkdirp "^0.5.1"
-    source-map-support "^0.5.0"
-    tsconfig "^7.0.0"
-    v8flags "^3.0.0"
-    yn "^2.0.0"
-
-tsconfig@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
-  dependencies:
-    "@types/strip-bom" "^3.0.0"
-    "@types/strip-json-comments" "0.0.30"
-    strip-bom "^3.0.0"
-    strip-json-comments "^2.0.0"
-
 tslib@^1.7.1:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.0.tgz#dc604ebad64bcbf696d613da6c954aa0e7ea1eb6"
@@ -10379,12 +10319,6 @@ uuid@^3.0.0, uuid@^3.1.0, uuid@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
-v8flags@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.0.1.tgz#dce8fc379c17d9f2c9e9ed78d89ce00052b1b76b"
-  dependencies:
-    homedir-polyfill "^1.0.1"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
@@ -10849,10 +10783,6 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-yn@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
-
 zip-stream@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"