Messages for the user in IDE

[wdanilo]

This task is automatically imported from the old Task Issue Board, and it was originally created by Adam Obuchowicz.
The original issue is here.

---

Why

As Enso IDE user
**I want ** to see clear messages: about any problems in the application (e.g. connectivity, compatibility) and result of actions giving no other visual feedback (e.g. making a vcs snapshot).
**So that ** I will see that my actions work, give better bug reports and fix problems on my side if possible (e.g. check my internet connection if using cloud).

Design

Currently, we display a single bar with single message, which is never hidden (except some cases, like compilation process).

Instead, we should be able to display multiple boxes with messages. The important information should be highlighted, e.g. in red. Each box shall be disposable, and some less important feedback should disappear after some time (~ 3 seconds).

Acceptance Criteria

Scenario: 
Given
When
Then

Notes:

Comments:

We should also have a dismiss button, so the user can close the notification at their will. (James Dunkerley - Feb 2, 2023)

---

[farmaazon]

We already have a stub for status bar view (see status_bar.rs files). We can extend it:

1. It accepts a new type of message: pop-up, which disappears after some time.
2. The messages are displayed in multiline boxes.
3. The message is split into synopsis and details. The details, if present, are in a scrollable box, allowing us to keep the box small.
4. Those boxes should have "dismiss" button.

I think the best way to implement it is to make boxes in HTML, because our current text implementation does not support multiline text very well (no word wrapping, no multiline selection). The one drawback is the mouse cursor: we would need to display the system cursor over message boxes (similarly to documentation panel) or do some trick like displaying only text in HTML, but box background would be in EnsoGL (perhaps a good idea anyway).

I do not intend this to be an ultimate design: I rather try to make something both decent for the UX and quick to implement, as this task is very important for the release.

[farmaazon]

Notes from call with @wdanilo

Actually, the design from my previous comment may be considered an ultimate design with a few amendments. I put this also to the task description

Notifications

• The notifications are displayed in HTML boxes. They contain a short message with optional "See more" button/link which expand the box and show a scroll area with detailed information.
• The Notifications button is displayed near the top-right corner of the scene. It looks like a bell.
• Those boxes are placed along the right edge of the scene. They are sorted from newest to oldest (newest on the top). They are usually hidden: they appear when the user clicks on the bell icon (and disappear again when the user clicks the bell icon again).
• Some notifications are shown upon arrival, even if other notifications are hidden. Some of them will be hidden after some time. The user can also hide them.
• Each notification may be removed from the list by the user.

Pop-ups

• The pop-ups give some feedback for the user action when it's not immediately visible. If it's mouse action (e.g. clicking twice on the background while being on the top module) the pop-up message should be displayed near the mouse cursor. The pop-ups for keyboard actions are displayed on the top (as currently the debug mode).

[wdanilo]

That's right. To bring more light here, we are talking about boxes similar to this (exact design will be done just before implementing this task):

Screen.Recording.2023-02-21.at.14.46.00.mov