Add ability to pass a title and show the close button on a modal

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

@@ -0,0 +1,114 @@
+import angular from 'angular';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import _ from 'lodash';
+
+describe('ui/modals/confirm_modal', function () {
+  let confirmModal;
+  let $rootScope;
+
+  beforeEach(function () {
+    ngMock.module('kibana');
+    ngMock.inject(function ($injector) {
+      confirmModal = $injector.get('confirmModal');
+      $rootScope = $injector.get('$rootScope');
+    });
+  });
+
+  function findByDataTestSubj(dataTestSubj) {
+    return angular.element(document.body).find(`[data-test-subj=${dataTestSubj}]`);
+  }
+
+  afterEach(function () {
+    const confirmButton = findByDataTestSubj('confirmModalConfirmButton');
+    if (confirmButton) {
+      angular.element(confirmButton).click();
+    }
+  });
+
+  describe('throws an exception', function () {
+    it('when no custom confirm button passed', function () {
+      try {
+        confirmModal('hi', { onConfirm: _.noop });
+        expect(true).to.be(false);
+      } catch (error) {
+        expect(error).to.not.be(undefined);
+      }
+    });
+
+    it('when no custom noConfirm function is passed', function () {
+      try {
+        confirmModal('hi', { confirmButtonText: 'bye' });
+        expect(true).to.be(false);
+      } catch (error) {
+        expect(error).to.not.be(undefined);
+      }
+    });
+
+    it('when showClose is on but title is not given', function () {
+      try {
+        confirmModal('hi', { customConfirmButton: 'b', onConfirm: _.noop, showClose: true });
+        expect(true).to.be(false);
+      } catch (error) {
+        expect(error).to.not.be(undefined);
+      }
+    });
+  });
+
+  it('shows the message', function () {
+    const myMessage = 'Hi, how are you?';
+    confirmModal(myMessage, { confirmButtonText: 'GREAT!', onConfirm: _.noop });
+
+    $rootScope.$digest();
+    const message = findByDataTestSubj('confirmModalBodyText')[0].innerText;
+    expect(message).to.equal(myMessage);
+  });
+
+  it('shows custom text', function () {
+    const confirmModalOptions = {
+      confirmButtonText: 'Troodon',
+      cancelButtonText: 'Dilophosaurus',
+      title: 'Dinosaurs',
+      onConfirm: _.noop
+    };
+    confirmModal('What\'s your favorite dinosaur?', confirmModalOptions);
+
+    $rootScope.$digest();
+    const confirmButtonText = findByDataTestSubj('confirmModalConfirmButton')[0].innerText;
+    expect(confirmButtonText).to.equal('Troodon');
+    const cancelButtonText = findByDataTestSubj('confirmModalCancelButton')[0].innerText;
+    expect(cancelButtonText).to.equal('Dilophosaurus');
+    const titleText = findByDataTestSubj('confirmModalTitleText')[0].innerText;
+    expect(titleText).to.equal('Dinosaurs');
+  });
+
+  describe('x icon', function () {
+    it('is visible when showClose is true', function () {
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: _.noop,
+        showClose: true,
+        title: 'hi'
+      };
+      confirmModal('hi', confirmModalOptions);
+
+      $rootScope.$digest();
+      const xIcon = findByDataTestSubj('confirmModalCloseButton');
+      expect(xIcon.length).to.be(1);
+    });
+
+    it('is not visible when showClose is false', function () {
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: _.noop,
+        title: 'hi',
+        showClose: false
+      };
+      confirmModal('hi', confirmModalOptions);
+
+      $rootScope.$digest();
+      const xIcon = findByDataTestSubj('confirmModalCloseButton');
+      expect(xIcon.length).to.be(0);
+    });
+  });
+});

src/ui/public/modals/confirm_modal.html

@@ -1,4 +1,16 @@
 <div class="kuiModal" style="width: 450px" data-test-subj="confirmModal">
+  <div class="kuiModalHeader" ng-if="title">
+    <div class="kuiModalHeader__title" data-test-subj="confirmModalTitleText">
+      {{title}}
+    </div>
+
+    <div
+      ng-if="showClose"
+      class="kuiModalHeaderCloseButton kuiIcon fa-times"
+      data-test-subj="confirmModalCloseButton"
+      ng-click="onClose()"
+    ></div>
+  </div>
   <div class="kuiModalBody">
     <div
       class="kuiModalBodyText"

src/ui/public/modals/confirm_modal.js

@@ -11,6 +11,10 @@ const module = uiModules.get('kibana');
  * @property {String=} cancelButtonText
  * @property {function} onConfirm
  * @property {function=} onCancel
+ * @property {String=} title - If given, shows a title on the confirm modal. A title must be given if
+ * showClose is true, for aesthetic reasons.
+ * @property {Boolean=} showClose - If true, shows an [x] icon close button which by default is a noop
+ * @property {function=} onClose - Custom close button to call if showClose is true
  */
 
 module.factory('confirmModal', function ($rootScope, $compile) {
@@ -23,9 +27,15 @@ module.factory('confirmModal', function ($rootScope, $compile) {
   return function confirmModal(message, customOptions) {
     const defaultOptions = {
       onCancel: noop,
-      cancelButtonText: 'Cancel'
+      cancelButtonText: 'Cancel',
+      onClose: noop,
+      showClose: false
     };
 
+    if (customOptions.showClose === true && !customOptions.title) {
+      throw new Error('A title must be supplied when a close icon is shown');
+    }
+
     if (!customOptions.confirmButtonText || !customOptions.onConfirm) {
       throw new Error('Please specify confirmation button text and onConfirm action');
     }
@@ -41,6 +51,8 @@ module.factory('confirmModal', function ($rootScope, $compile) {
     confirmScope.message = message;
     confirmScope.confirmButtonText = options.confirmButtonText;
     confirmScope.cancelButtonText = options.cancelButtonText;
+    confirmScope.title = options.title;
+    confirmScope.showClose = options.showClose;
     confirmScope.onConfirm = () => {
       destroy();
       options.onConfirm();
@@ -49,6 +61,10 @@ module.factory('confirmModal', function ($rootScope, $compile) {
       destroy();
       options.onCancel();
     };
+    confirmScope.onClose = () => {
+      destroy();
+      options.onClose();
+    };
 
     const modalInstance = $compile(template)(confirmScope);
     modalPopover = new ModalOverlay(modalInstance);