Custom Notifications

[panda01]

Fixes #6933.

• Adds a customActions ability to Notifier.
• Adds a custom function on the notifier that gives granular control to the user.

In order to use these notifications one must do something similar to the following code

import Notifier from 'ui/notify/notifier';
const notify = new Notifier({location: 'AppName'});
notify.custom({
  markdown: 'Some markdown content',
  customActions: [{
    key: 'More Info',
    callback: function() { window.alert('hello world'); }
  }, {
    key: 'Cancel',
    callback: function() { fooCancelBar(); }
  }]
});

All of the callbacks are wrapped in a close function. If you wish to display new information make a new notification.

[tsullivan]

I got a working example of using this. So far it seems pretty good, and I like that it comes with a small code change.

[ycombinator]

@panda01 Thanks for including sample code on how to use this new functionality! Would you mind pasting below that code a screenshot of the notification it generates? It'll just make it super obvious what this awesome functionality does.

[tsullivan]

I was thinking of commenting that it would be nice to have some kind of spinner or loading icon shown when the action clicked is asynchronous, that we can see while the response is waiting. But that might be overkill. I think we can provide feedback that we're waiting for a response using multiple notifications in sequence.

Using multiple notifications in sequence seems like it will be a common pattern, since each notification can only show a static message. But that should be fine -- I don't think that needs to change.

[w33ble]

You don't need to assign to an empty object here, you can just mutate the default settings object.

[w33ble]

I'm a bigger fan of putting the message as a first parameter, with the options following. The message is the only part that's really required, and then you don't leak the markdown property, or have to explain the difference between that and content:

import Notifier from 'ui/notify/notifier';
const notify = new Notifier({location: 'AppName'});
notify.custom('Some markdown *content*', {
  customActions: [{
    key: 'More Info',
    callback: function() { window.alert('hello world'); }
  }, {
    key: 'Cancel',
    callback: function() { fooCancelBar(); }
  }]
});

@tsullivan you're the other person that's going to be using this right away, what do you think?

[w33ble]

Why use key in the definition? From the outside, that parameter is really just defining the button text, isn't it? Couldn't it be text, like:

customActions: [{ text: 'Do it!', callback: doTheThing }]

[panda01]

Agreed I'll change this

[w33ble]

I thought we were going to make it so that clicking on any of the controls would close the notification, and if you needed a follow-up, your callback could just open a new notification. Right now, I don't think there's any way for the callback to close the notification, it doesn't look like the instance is passed to the callback.

It looks like the code should be closing the dialog. Perhaps it's not working as expected?

[panda01]

It looks like the code should be closing the dialog. Perhaps it's not working as expected?

Definitely not working as expected. I'll take a look

[w33ble]

hey, jenkins, buddy, can you test this please?

[tsullivan]

This should be bumped to 3, so we can have actions like "Sure", "No thanks", and "Maybe later"

[tsullivan]

Replacing with #7781