Improve Alert message dialog created with IModelApp.notifications.outputMessage

karolis-zukauskas commented 1 month ago

Is your feature request related to a problem? Please describe.

I need to show some kind of dialog when an error happens. I found the following API from core-frontend, that seems to do what I want:

 const message = new NotifyMessageDetails(OutputMessagePriority.Error, "TEST Brief message", "TEST Detailed message", OutputMessageType.Alert)
IModelApp.notifications.outputMessage(message);

It creates the following Dialog:

With more reasonable text values, it looks like this:

I'm no a UI/UX expert, but the component seems to have some issues:

briefMessage and detailedMessage blend in together and are laid out weirdly - I would expect brief message to be in a stronger font and maybe at the top and detailed message in a less intense font below.
I used OutputMessagePriority.Error so I would expect the title to be "Error" or instead use the briefMessage - the current"Alert" message seems to vague
Error icon doesn't seem to be aligned with text (at least in its current form).

Describe the Solution you'd like

N/A - Would be nice to get some UX input here.

Describe alternatives you've considered

No response

Additional context

No response

VeroniqueVezina commented 1 month ago

@karolis-zukauskas This would appear when a user tries to open one of the iModel he has on his iModel home page, right? If it's the case, here are a few recommendations on the interactions:

If the user can't open an iModel because it is already being used by another colleague, we should make that clear on the iModel tile so that there is no bad surprise on click. We might be able to avoid some frustration that way. We could have the avatar of the person using it or a lock icon that shows the name of the person who's already in. We also have the "disabled" tile here (https://itwinui.bentley.com/docs/tile/#overview) where the "badge" could say "in use"..... We can explore multiple possibilities.
We'd still need feedback in case the user clicks on the tile anyway, but I am unsure if we should go with an overlay modal (https://itwinui.bentley.com/docs/dialog) or a simple alert (https://itwinui.bentley.com/docs/alert). Since the message of the dialog is about a blocker the user has, maybe the modal is better.
"Contact your administrator for help".... users often don't know who the admin is. If we can provide a link to documentation or more details to the user, it would be more useful.
We usually do not have icons in the modal dialog. By removing that and readjusting the space, it will be better balanced.
The title of the dialog should be more descriptive and specific to the action the user is trying to accomplish. In this case maybe "iModel already in use" or "Impossible to open" instead of "Alert" would be useful.

Hope that helps!

GerardasB commented 1 month ago

Additionally, the notification can be displayed differently based on OutputMessageType. As part of this item, let's add a storybook story to showcase different options and how those look currently.

karolis-zukauskas commented 1 month ago

@VeroniqueVezina

If the user can't open an iModel because it is already being used by another colleague, we should make that clear on the iModel tile so that there is no bad surprise on click.

Great idea, not cheap to have and implement (depends on how many iModels are in the iTwin), but I think we could do it - I'll create a backlog item for us.

"Contact your administrator for help".... users often don't know who the admin is.

Yeah that might be especially true for smaller companies. We'll need to put more effort into these messages as they are very critical to not get users frustrated. If you can't open an iModel, you can't work - we need good communication here.

One thing we haven't done or thought about - opening an iModel in readonly mode. We could avoid the frustration of not being even able to open the iModel by allowing to open it, but preventing any kind of modification to it, while clearly communicating that the open iModel is in such mode.

VeroniqueVezina commented 1 month ago

@karolis-zukauskas
This is sooooo true: If you can't open an iModel, you can't work - we need good communication here.

I like the idea of opening it in read-only mode if the user can still visualize and navigate properties. We could use the Alert component and show it as a banner at the top of the view to specify it's in read only mode. Maybe have: "This iModel is opened in read only mode because another user is editing it. Contact __ for help"

Even with the read-only mode, I'd tend to explore having something visual on the tile as well, but we can think about this later if you think it's too expensive

GerardasB commented 1 month ago

Added a couple of stories for the notifications APIs https://github.com/iTwin/appui/pull/854

iTwin / appui