From e6253ba4b0188695ca7b2c85673d833d774e7227 Mon Sep 17 00:00:00 2001 From: Joe Fleming Date: Fri, 13 Jan 2017 18:09:52 -0700 Subject: [PATCH] refactor no point making vanilla code that's really only going to work with angular i guess... also broke apart the confirm modal from the injector, and made safeConfirm just use the confirm modal --- src/ui/public/autoload/modules.js | 3 +- .../dialogues/confirm_dialogue_container.html | 6 --- .../directives/confirm_dialogue.html | 15 -------- .../dialogues/directives/confirm_dialogue.js | 18 --------- .../dialogues/modal_dialogue.factory.js | 12 ------ src/ui/public/dialogues/modal_dialogue.js | 27 ------------- .../public/dialogues/safe_confirm.factory.js | 11 ------ src/ui/public/dialogues/safe_confirm.js | 34 ----------------- src/ui/public/modals/confirm_modal.factory.js | 38 +++++++++++++++++++ src/ui/public/modals/confirm_modal.html | 23 +++++++++++ src/ui/public/modals/index.js | 1 + src/ui/public/modals/popover.js | 17 +++++++++ .../__tests__/safe_confirm.js | 0 .../{dialogues => safe_confirm}/index.js | 0 .../safe_confirm/safe_confirm.factory.js | 12 ++++++ 15 files changed, 93 insertions(+), 124 deletions(-) delete mode 100644 src/ui/public/dialogues/confirm_dialogue_container.html delete mode 100644 src/ui/public/dialogues/directives/confirm_dialogue.html delete mode 100644 src/ui/public/dialogues/directives/confirm_dialogue.js delete mode 100644 src/ui/public/dialogues/modal_dialogue.factory.js delete mode 100644 src/ui/public/dialogues/modal_dialogue.js delete mode 100644 src/ui/public/dialogues/safe_confirm.factory.js delete mode 100644 src/ui/public/dialogues/safe_confirm.js create mode 100644 src/ui/public/modals/confirm_modal.factory.js create mode 100644 src/ui/public/modals/confirm_modal.html create mode 100644 src/ui/public/modals/index.js create mode 100644 src/ui/public/modals/popover.js rename src/ui/public/{dialogues => safe_confirm}/__tests__/safe_confirm.js (100%) rename src/ui/public/{dialogues => safe_confirm}/index.js (100%) create mode 100644 src/ui/public/safe_confirm/safe_confirm.factory.js diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js index 8413983c1a04a..1fa5218dcbf11 100644 --- a/src/ui/public/autoload/modules.js +++ b/src/ui/public/autoload/modules.js @@ -20,7 +20,8 @@ import 'ui/parse_query'; import 'ui/persisted_log'; import 'ui/private'; import 'ui/promises'; -import 'ui/dialogues'; +import 'ui/modals'; +import 'ui/safe_confirm'; import 'ui/state_management/app_state'; import 'ui/state_management/global_state'; import 'ui/storage'; diff --git a/src/ui/public/dialogues/confirm_dialogue_container.html b/src/ui/public/dialogues/confirm_dialogue_container.html deleted file mode 100644 index c209b5bd5b987..0000000000000 --- a/src/ui/public/dialogues/confirm_dialogue_container.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/src/ui/public/dialogues/directives/confirm_dialogue.html b/src/ui/public/dialogues/directives/confirm_dialogue.html deleted file mode 100644 index 95e7469215934..0000000000000 --- a/src/ui/public/dialogues/directives/confirm_dialogue.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
- {{message}} -
-
- - -
-
-
diff --git a/src/ui/public/dialogues/directives/confirm_dialogue.js b/src/ui/public/dialogues/directives/confirm_dialogue.js deleted file mode 100644 index 56da72981bd60..0000000000000 --- a/src/ui/public/dialogues/directives/confirm_dialogue.js +++ /dev/null @@ -1,18 +0,0 @@ -import uiModules from 'ui/modules'; -import confirmDialogueTemplate from './confirm_dialogue.html'; - -const module = uiModules.get('kibana'); - -module.directive('confirmDialogue', function () { - return { - restrict: 'E', - template: confirmDialogueTemplate, - scope: { - message: '@', - confirmButtonText: '@', - cancelButtonText: '@', - onConfirm: '&', - onCancel: '&' - } - }; -}); diff --git a/src/ui/public/dialogues/modal_dialogue.factory.js b/src/ui/public/dialogues/modal_dialogue.factory.js deleted file mode 100644 index f9e146789017a..0000000000000 --- a/src/ui/public/dialogues/modal_dialogue.factory.js +++ /dev/null @@ -1,12 +0,0 @@ -import uiModules from 'ui/modules'; -import { ModalDialogue } from './modal_dialogue'; - -const module = uiModules.get('kibana'); - -module.factory('ModalDialogue', function ($rootScope, $compile) { - return class AngularModalDialogue extends ModalDialogue { - constructor(html, scopeObject) { - super(html, scopeObject, $rootScope, $compile); - } - }; -}); diff --git a/src/ui/public/dialogues/modal_dialogue.js b/src/ui/public/dialogues/modal_dialogue.js deleted file mode 100644 index 40a29dc6caae3..0000000000000 --- a/src/ui/public/dialogues/modal_dialogue.js +++ /dev/null @@ -1,27 +0,0 @@ -import angular from 'angular'; - -export class ModalDialogue { - /** - * - * @param html - * @param scopeObject - * @param $rootScope - * @param $compile {function} - */ - constructor(html, scopeObject, $rootScope, $compile) { - this.modalScope = $rootScope.$new(); - - Object.keys(scopeObject).forEach((key) => { this.modalScope[key] = scopeObject[key]; }); - - this.innerElement = $compile(html)(this.modalScope); - angular.element(document.body).append(this.innerElement); - } - - /** - * Removes the element from the dom. - */ - destroy() { - this.innerElement.remove(); - this.modalScope.$destroy(); - } -} diff --git a/src/ui/public/dialogues/safe_confirm.factory.js b/src/ui/public/dialogues/safe_confirm.factory.js deleted file mode 100644 index fbdd9144a79b3..0000000000000 --- a/src/ui/public/dialogues/safe_confirm.factory.js +++ /dev/null @@ -1,11 +0,0 @@ -import uiModules from 'ui/modules'; -import { safeConfirm } from './safe_confirm'; -import './directives/confirm_dialogue'; -import './modal_dialogue.factory'; - -const module = uiModules.get('kibana'); - -module.factory('safeConfirm', function ($timeout, ModalDialogue, Promise) { - return (message, confirmButtonText = 'Okay', cancelButtonText = 'Cancel') => - $timeout(() => safeConfirm(message, confirmButtonText, cancelButtonText, Promise, ModalDialogue)); -}); diff --git a/src/ui/public/dialogues/safe_confirm.js b/src/ui/public/dialogues/safe_confirm.js deleted file mode 100644 index 2409d49fc9c66..0000000000000 --- a/src/ui/public/dialogues/safe_confirm.js +++ /dev/null @@ -1,34 +0,0 @@ -import confirmDialogueContainerTemplate from './confirm_dialogue_container.html'; - -/** - * Shows a modal confirmation dialogue with the given message. - * - * @param {String} message - * @param {String} confirmButtonText - Text to show for the button that will resolve the returned promise - * @param {String} cancelButtonText - Text to show for the button that will reject the returned promise - * @param {Promise} Promise - a promise class. - * @param {ModalDialogue} ModalDialogue service - * @return {Promise} Returns an angular promise that will be resolved to true if the user - * clicks the yes/okay button and rejected if the user clicks the no/cancel button. - */ -export function safeConfirm(message, confirmButtonText, cancelButtonText, Promise, ModalDialogue) { - return new Promise((resolve, reject) => { - let modalDialogue = undefined; - - const dialogueScope = { - onConfirm: () => { - modalDialogue.destroy(); - resolve(true); - }, - onCancel: () => { - modalDialogue.destroy(); - reject(false); - }, - message, - confirmButtonText, - cancelButtonText - }; - - modalDialogue = new ModalDialogue(confirmDialogueContainerTemplate, dialogueScope); - }); -} diff --git a/src/ui/public/modals/confirm_modal.factory.js b/src/ui/public/modals/confirm_modal.factory.js new file mode 100644 index 0000000000000..62c4e5baf6195 --- /dev/null +++ b/src/ui/public/modals/confirm_modal.factory.js @@ -0,0 +1,38 @@ +import { noop } from 'lodash'; +import uiModules from 'ui/modules'; +import template from './confirm_modal.html'; +import { Popover } from './popover'; + +const module = uiModules.get('kibana'); + +module.factory('confirmModal', function ($rootScope, $compile) { + let modalPopover; + + return function confirmModal(message, onConfirm = noop, onCancel = noop, confirmButtonText = 'Confirm', cancelButtonText = 'Cancel') { + + if (modalPopover) throw new Error('Ah ah ah, only one modal, buddy!'); + + const confirmScope = $rootScope.$new(); + + confirmScope.message = message; + confirmScope.confirmButtonText = confirmButtonText; + confirmScope.cancelButtonText = cancelButtonText; + confirmScope.onConfirm = () => { + destroy(); + onConfirm(); + }; + confirmScope.onCancel = () => { + destroy(); + onCancel(); + }; + + const modalInstance = $compile(template)(confirmScope); + modalPopover = new Popover(modalInstance); + + function destroy() { + modalPopover.destroy(); + modalPopover = undefined; + confirmScope.$destroy(); + } + }; +}); \ No newline at end of file diff --git a/src/ui/public/modals/confirm_modal.html b/src/ui/public/modals/confirm_modal.html new file mode 100644 index 0000000000000..f8526e3709d1d --- /dev/null +++ b/src/ui/public/modals/confirm_modal.html @@ -0,0 +1,23 @@ +
+
+
+ {{message}} +
+
+ + +
+
+
diff --git a/src/ui/public/modals/index.js b/src/ui/public/modals/index.js new file mode 100644 index 0000000000000..5b2bb0a6598d1 --- /dev/null +++ b/src/ui/public/modals/index.js @@ -0,0 +1 @@ +import './confirm_modal.factory'; diff --git a/src/ui/public/modals/popover.js b/src/ui/public/modals/popover.js new file mode 100644 index 0000000000000..c13dc7745a979 --- /dev/null +++ b/src/ui/public/modals/popover.js @@ -0,0 +1,17 @@ +import angular from 'angular'; + +export class Popover { + constructor(element) { + this.element = element; + // document.body.appendChild(this.element); + angular.element(document.body).append(this.element); + } + + /** + * Removes the element from the dom. + */ + destroy() { + // document.body.removeChild(this.element); + this.element.remove(); + } +} diff --git a/src/ui/public/dialogues/__tests__/safe_confirm.js b/src/ui/public/safe_confirm/__tests__/safe_confirm.js similarity index 100% rename from src/ui/public/dialogues/__tests__/safe_confirm.js rename to src/ui/public/safe_confirm/__tests__/safe_confirm.js diff --git a/src/ui/public/dialogues/index.js b/src/ui/public/safe_confirm/index.js similarity index 100% rename from src/ui/public/dialogues/index.js rename to src/ui/public/safe_confirm/index.js diff --git a/src/ui/public/safe_confirm/safe_confirm.factory.js b/src/ui/public/safe_confirm/safe_confirm.factory.js new file mode 100644 index 0000000000000..384c62f4dc069 --- /dev/null +++ b/src/ui/public/safe_confirm/safe_confirm.factory.js @@ -0,0 +1,12 @@ +import uiModules from 'ui/modules'; +import 'ui/modals'; + +const module = uiModules.get('kibana'); + +module.factory('safeConfirm', function ($timeout, Promise, confirmModal) { + return (message) => $timeout(() => { + return new Promise((resolve, reject) => { + confirmModal(message, resolve, reject, 'Yes', 'No'); + }); + }); +});