feat: AI Assisted Code Suggestions: Improve UI status element to cover main scenarios

Problem to solve

Right now there is no way of knowing whether Code Suggestions actually works, other than getting a suggestion. It would be nice if there is a clear visual indication that Code Suggestions is configured correctly but 1) the service is offline 2) for this particular case no suggestions are made

Right now at least the following cases will not generate suggestions:

  1. First line of a file
  2. Service is offline

Background for this issue

We have an icon in the status bar that shows the various states of code suggestions (gitlab-web-ide#132 (moved)).

The icons we use in the status bar appear here: CleanShot_2023-04-27_at_13.30.58_2x

The icons of the different status are as follows:

Image Description
CleanShot_2023-04-25_at_15.53.01_2x Enabled
CleanShot_2023-04-25_at_15.53.07_2x Disabled
CleanShot_2023-04-25_at_15.53.05_2x Error (e.g. code suggestions down)

Problem to solve

We have received feedback that it can be difficult to tell if there is a code suggestion loading as one is typing. Even though code suggestion is enabled, it is not clear if it is currently retrieving a suggestion.

Suggested solution

  • Add an additional icon to display the status when a code suggestion is loading.
  • When the suggestion has loaded, the icon goes back to the normal/enabled state

Icon to add:

Image Description
CleanShot_2023-04-27_at_13.33.48_2x Icon to indicate that there is code suggestion loading

Gif:

CleanShot_2023-04-27_at_13.28.09

Figma file

Cases to cover

Some will use the same icon but expand information through a tooltip.

Required:

  • Enabled
  • Loading
  • Disabled: unsupported context
  • Disabled: by user preference
  • Error: any error fetching user suggestions

Nice to have:

  • Disabled: by group setting

Further details

See also this Loom recording: https://www.loom.com/share/25786f98cb7d435092c411a872c539a9

Links / references

Edited by Illya Klymov