Web UI Development Using the application notification system

The Web UI uses a single application notification system.

Characteristics

• All notifications appear in the bottom left.
• Success and Informational messages are auto removed after a delay.
• Warning and Error are not auto removed.
• Errors show error details (if present). By default, the error details are collapsed, but they are displayed on clicking the expand icon.
• Warning and Error message shave a close button.
• All messages can be dismissed by clicking the 'x' icon.
• Success and info messages are throttled, only a few shown at a time.
• Errors and warnings are not throttled, show immediately.

Using in a Component

export function Counter() {
  const {notifySuccess, notifyInfo, notifyWarning, notifyError} = useNotifications();

  notifySuccess('a success message');
  notifyInfo('an info message');
  notifyWarning('a warning message');
  notifyError('something went wrong');
  notifyError('something went wrong', 'reason');
  notifyError('something went wrong', error); // error.message = 'reason'
}