[General]: Notification UI is very clunky and usually takes too much valuable space

[vovakulikov]

We need to figure out a better way to show our notifications and global alerts in Sourcegraph Web app. At the moment, in most cases these global notification items take too much space from actual content area (and since this is a global UI they appear on every page in the app). Also some of them are not skippable or dismissible, means that this will be always with you.

Place	Screenshot
Home page
Blob UI
Blob UI with promo bar is even worse

Personal suggestion would be to have a designated panel for notifications, similar to what JetBrains products have. There we could put all other important or low-key notification as well.

[taiyab]

@vovakulikov These seem more like alerts/errors than notifications (just trying to get the nomenclature right here).

Notification -> Assumed dismissible, not necessarily that important. Alert (type: Error) -> Big deals that basically have to get resolved. Potentially block progression if not resolved.

Am I right in assuming that?

How important are the set of errors that typically get shown there to resolve? Are they things that essentially have to get resolved, or they're not that important?

If: the alerts are super severe, and basically need to be resolved for good continued use of the service -> Then: We stick an alert bar at the top that can deal with multiple alerts simultaneously, cleanly and sensibly

Let me know and I can rock up a solution for you.

cc @rrhyne

[vovakulikov]

@taiyab good questions

To be more specific about this top bar panel,

• In this global top bar we can have both notifications and alerts (notifications could be dismissed with a close icon there, and usually they are blue ones)
• Alerts could be different types (as you said, it could be significant and serious service errors, and in this case, I think you're right that this is something that should block the client from further usage) and it could be just a warning alert (for example the yellow bars on the screenshot in the description are warnings, means that you still can use Sourcegraph, but there is some part that doesn't work as it supposed to. Usually, that means that you need to somehow fix your service setup)

So, I think the problem here is that we're mixing alerts and notifications in the same UI (colour coding should help here, but since it's in a global bar, it makes you think that you have to resolve it immediately, plus the main issue in my experience that it's hard to use Sourcegraph UI and actually resolve this problem while you have big header full of warning content)

When I mentioned JetBrains products notification panel, I mean this UI, where you can see notifications and alerts and actually log important events without loading the main layout with additional things. We still can have the top bar for big errors though, maybe this top bar could lead to/open a notification panel where we also could have an error section for more details about the problem.

[taiyab]

@vovakulikov Thanks for this.

Do we have a list of a subset of the types of messages that go in that top area?

Just to be absolutely clear, that top bar should only be reserved for breaking/semi-breaking (service) messages that prompt an immediate action (if there is one).

Every other kind of message or alert should be relegated to a notification style system (like the Jetbrains one you've shown) or otherwise (which I don't think we have?)

[vovakulikov]

@taiyab got it, yeah I don't have a clear list of what messages we have at the moment, from what I saw there that could be any generic message (warning, error, notification message), it all comes from the backend HMTL injection so we don't have any control over it. I will take a look closer this week and put the errors list in the issue description above. 😉

[rrhyne]

The admin onboarding project added UI for admin setup that is more appropriate to non-site-wide events a user should be notified of.