Alert component for errors and notifications

[jldec]

There are places where the dashboard client uses alert() or console.error().

• console.error() messages obscure the error instead of alerting the user in a visble way in the UI.
• alert() is blocking and not stylistically consistent with other dashboard UI.
• Other scenario-specific notification mechanisms (like [dashboard] display warning for latest IDE versions #8783) are are not suitable for general purpose use.

It would be better to show notifications and errors in a simple, consistent way that does not demand interaction, but nevertheless makes it visible in a clear but non-surprising way.

GitHub uses a banner at the top of the page for notifications and errors. The banner can be dismissed but also disappears automatically after navigating. See also Bootstrap examples here.

Requirements

• not modal - do not cover or block other interations
• dismissable
• allow multiple notifications (ok to overlay, and view one by one)
• works across admin dashboard, regular dashboard, and start-workspace UI
• loud (red?) notification for errors
• less-loud (orange?) notifications for non-error alerts
• visible on small screens (top of page, not bottom)

Typical use cases

• license errors in self-hosted deployments
  • [Self-Hosted] Notify Self-Hosted Users when they lost features above 10 users #9971
  • [Self-Hosted] Handle No More Seats on License Error #9972
• usage and billing notifications e.g. when approaching seat limit or free-usage limit
  • [Self-Hosted] Proactive Admin notifications #9974
• websocket connection problems

[gtsiolis]

Using an alert component on the top of the corresponsing page could sounds good. Do we have any concrete cases where this needs to be visible? For example, see #8831 (comment).

... now when the configuration is invalid we're blocking the users from starting a new workspace without any error or visual feedback as we did with when having the ability to trigger a prebuild ...

[geropl]

Cases I can think of:

• (technical) websocket connection cannot be established: most common cause that triggers alert atm
  If we had an unobtrusive alert component/banner, there are a lot of opportunities to use it for product-related stuff:
• (product) warn/notify of double subscriptions (team+personal): we had an issue for that, cannot find it
• (product) limit warnings for hour-limited subscriptions
• (?) (product) announce important product changes: slightly different usecase, not sure if that should be the same component/channel
• (?) (ops) announce downtime ahead of time: we will have that at some point
• ... (I feel that there are some more here)

[jldec]

See #8783 for example which was designed for workspace start screen only.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gtsiolis]

Now with the AppNotifications in place from #11556, this could use a global alert component (error variant) to surface such errors, see also #12452 (comment). Cc @AlexTugarev @jldec @geropl