Custom Notifications

src/ui/public/notify/__tests__/notifier.js

@@ -6,11 +6,23 @@ import Notifier from 'ui/notify/notifier';
 
 describe('Notifier', function () {
   let $interval;
-  let message = 'Oh, the humanity!';
   let notifier;
   let params;
-  let version = window.__KBN__.version;
-  let buildNum = window.__KBN__.buildNum;
+  const version = window.__KBN__.version;
+  const buildNum = window.__KBN__.buildNum;
+  const message = 'Oh, the humanity!';
+  const customParams = {
+    title: 'fooTitle',
+    markdown: 'fooMardown',
+    lifetime: 10000,
+    customActions:[{
+      key: 'Cancel',
+      callback: sinon.spy()
+    }, {
+      key: 'OK',
+      callback: sinon.spy()
+    }]
+  };
 
   beforeEach(function () {
     ngMock.module('kibana');
@@ -185,6 +197,33 @@ describe('Notifier', function () {
     });
   });
 
+  describe('#custom', function () {
+    it('has a custom function to make notifications', function () {
+      expect(notifier.custom).to.be.defined;
+    });
+    it('properly merges options', function () {
+      const customNotif = notifier.custom(customParams);
+      expect(customNotif.title).to.equal(customParams.title);
+      expect(customNotif.markdown).to.equal(customParams.markdown);
+      expect(customNotif.lifetime).to.equal(customParams.lifetime);
+    });
+    it('gives a default action if none are provided', function () {
+      const noActionParams = _.assign({}, customParams, { customActions: []});
+      const customNotif = notifier.custom(noActionParams);
+      expect(customNotif.actions.length).to.equal(1);
+    });
+    it('should wrap the callback functions in a close function', function () {
+      const customNotif = notifier.custom(customParams);
+      customNotif.customActions.forEach((action, idx) => {
+        expect(action.callback).not.to.equal(customParams.customActions[idx]);
+        action.callback();
+      });
+      customParams.customActions.forEach(action => {
+        expect(action.callback.called).to.true;
+      });
+    });
+  });
+
   describe('#banner', function () {
     testVersionInfo('banner');
 

src/ui/public/notify/notifier.js

@@ -93,6 +93,12 @@ function add(notif, cb) {
     notif.actions.forEach(function (action) {
       notif[action] = closeNotif(notif, cb, action);
     });
+  } else if (notif.customActions) {
+    // wrap all of the custom functions in a close
+    notif.customActions = notif.customActions.map(action => {
+      action.callback = closeNotif(notif, action.callback, action.key);
+      return action;
+    });
   }
 
   notif.count = (notif.count || 0) + 1;
@@ -364,6 +370,41 @@ Notifier.prototype.banner = function (msg, cb) {
   }, cb);
 };
 
+/**
+ * Display a custom message
+ * @param  {Object} config
+ * config = {
+ *   title: 'Some Title here',
+ *   markdown: 'Some markdown content',
+ *   type: 'info',
+ *   customActions: [{
+ *     key: 'next',
+ *     callback: function() { next(); }
+ *   }, {
+ *     key: 'prev',
+ *     callback: function() { prev(); }
+ *   }]
+ * }
+ */
+Notifier.prototype.custom = function (config) {
+  const customActionMax = 3;
+  const mergedConfig = _.assign({}, {
+    type: 'banner',
+    markdown: '',
+    lifetime: Notifier.config.bannerLifetime,
+  }, config);
+
+  const hasActions = _.get(mergedConfig, 'customActions.length') || _.get(mergedConfig, 'actions.length');
+  // Add an ok if there are no actions, so you don't end up with a orphan notification
+  if (!hasActions) {
+    mergedConfig.actions = ['accept'];
+  } else if (mergedConfig.customActions) {
+    mergedConfig.customActions = mergedConfig.customActions.slice(0, customActionMax);
+  }
+
+  return add(mergedConfig);
+};
+
 Notifier.prototype.describeError = formatMsg.describeError;
 
 if (log === _.noop) {

src/ui/public/notify/partials/toaster.html

@@ -48,6 +48,15 @@
             ng-class="'btn-' + notif.type"
             ng-click="notif.address()"
             >Fix it</button>
+          <button
+            type="button"
+            class="btn"
+            ng-repeat="action in notif.customActions"
+            ng-if="notif.customActions"
+            ng-class="'btn-' + notif.type"
+            ng-click="action.callback()"
+            ng-bind="action.key"
+            ></button>
         </div>
       </div>