Unclear code suggestions status
Problems to solve
Configuration problems are difficult to debug
- Like during Onboarding, people only know if something is working. There is no indication or explanation on what is happening when it’s not working.
Unclear whether code suggestions are working or not. Users only know when they are working as they see them, but if nothing happens, they are left in the dark about why. (slide 26)
How do we currently communicate status?
Click to see current state
| state | ui | comment |
|---|---|---|
| Enabled states | ||
| Idle |  |
|
| Loading |  |
|
| Disabled states | ||
| Disabled in settings |  |
|
| Unsupported language |  |
|
| Disabled by user |  |
will be added in gitlab-vscode-extension!942 (merged) Highlight (square has another color) is due-to toolbar element is now clickable |
| Error states | ||
| Failed to load suggestion |  |
All errors now will have same icon, but will have different messages to send to end user |
As a part of gitlab-vscode-extension#750 (closed) we will have following notification added:
Learn more will be taking to docs Never show this again will effectively suppress this notification forever
Wording is not final. (potentially we might have Open preferences instead of Learn more which is better actionable, but this will be a follow-up)
This will also put extension in Error state with message Disabled by user preferences on gitlab.com or smth like that. Clicking that will re-enable extension
(the tricky part here from UX perspective is that we do not know when user enables this on web side, so it requires either user intervention to re-enable it or just restart)
Design proposal
Move the loading status to its own area in the gutter...
...therefore status bar only has three states
The status bar states have an additional tooltip on hover
| State | Image |
|---|---|
| Error |  |
| Error |  |
| Error |  |
| Disabled |  |
| Disabled |  |
| Enabled |  |
Design proposal: happy path - code suggestions is working
User has code suggestions correctly configured and is receiving suggestions
| Image | Description |
|---|---|
 |
As user types, code suggestions attempts to find a suggestion but does not (is this a thing?) |
 |
As user types, code suggestions attempts to find a suggestion and finds a suggestion |
 |
If the user disables code suggestions, the gutter icon is no longer shown |
User wants to enable or disable code suggestions
Design proposal: unhappy path - code suggestions is not working
User opens the IDE and code suggestions in unavailable for some reason
| Image | Description |
|---|---|
 |
When there is a configuration error, the notification is shown. Nothing would be shown in the gutter |
 |
Should the user dismiss the error, or should they have do not disturb on, they could click on the error icon for more details |
 |
Some errors would be clickable |
 |
Some errors would not be clickable |
 |
Examples of different kinds of notifications |