[RFC] Application Notifications

[Janpot]

Which problem do we want to solve?

• Notifications are inherently imperative, cumbersome to manage the state.
• Many notifications are simple info/warning/error/success messages
• How to deal with multiple concurrent notifications
• Some notifications require an action, often “undo”

How do we solve the problem?

• Provide an imperative API to show notifications and shortcuts for common use-cases

API

interface NotificationOptions {
  key?: string; // To dedupe snackbars
  severity?: 'info' | 'warning' | 'error' | 'success';
  autoHideDuration?: number;
  actionText?: React.ReactNode;
  onAction: () => void;
}

interface NotificationHook {
  open(content: React.ReactNode, options: NotificationOptions): void;
  close(key: string);
}

function useNotification(): NotificationHook;

Notification types

We will support the following snackbar types, per the severity option:

• undefined: plain snackbar. See https://mui.com/material-ui/react-snackbar/
• 'info', 'warning', 'error', 'success': alert in snackbar. See https://mui.com/material-ui/react-snackbar/#use-with-alerts

Deduplication

Provide a key to the options to automatically deduplicate similar snackbars. Snackbars opened with the same key of an already open one doesn’t re-open.

Concurrent notifications

When a notification comes in while another one is already open, the original one will be closed automatically.

As a further expansion of the notification feature we can imagine a stacking behavior, where opened notifications are queued, with a counter to indicate the amount of queued notifications. This is out of scope for this RFC.

Auto hide

Snackbars hide automatically after autoHideDuration (milliseconds) when provided.

Actions

A notification can specify an action which renders as a button on the notification. The onAction handler is called when the user clicks that button.

Example:

const handleCreate = React.useCallback(async () => {
  const newItem = await db.create(values);
  const notificationId = notifications.open(`Created item ${newItem.id}`, {
    actionText: 'Undo',
    onAction: async () => {
      try {
        await dn.delete(item.id);
        notification.open('Item creation reverted!', { severity: 'success' });
      } catch (error) {
        notification.open(`Error while reverting: ${error.message}`, {
          severity: 'error',
        });
      }
    },
  });
}, [values]);

[Janpot]

Similar issue in core mui/material-ui#18098