feat: AI Assisted Code Suggestions: Improve UI status element to cover main scenarios
<!--- Please read this! Before opening a new issue, make sure to search for keywords in the issues filtered by the "feature" label: - https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/issues?label_name%5B%5D=feature and verify the issue you're about to submit isn't a duplicate. ---> ### 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 (https://gitlab.com/gitlab-org/gitlab-web-ide/-/issues/132). The icons we use in the status bar appear here: ![CleanShot_2023-04-27_at_13.30.58_2x](/uploads/c6126ad1e3421256920e0f3f1831ab11/CleanShot_2023-04-27_at_13.30.58_2x.png) The icons of the different status are as follows: | Image | Description | | ------ | ------ | | ![CleanShot_2023-04-25_at_15.53.01_2x](/uploads/75ae70e3f70c2b74d0c441e470c5a9e4/CleanShot_2023-04-25_at_15.53.01_2x.png) | Enabled | | ![CleanShot_2023-04-25_at_15.53.07_2x](/uploads/07e759bd88bf146ea92307f8c68c246e/CleanShot_2023-04-25_at_15.53.07_2x.png) | Disabled | | ![CleanShot_2023-04-25_at_15.53.05_2x](/uploads/3671adf43028dcb9ab04d93594232699/CleanShot_2023-04-25_at_15.53.05_2x.png) | 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](/uploads/7ee34ba53f5c3a609fabefc67851ad57/CleanShot_2023-04-27_at_13.33.48_2x.png) | Icon to indicate that there is code suggestion loading | Gif: ![CleanShot_2023-04-27_at_13.28.09](/uploads/3ada5e4a3d469797c0cf17473f512caa/CleanShot_2023-04-27_at_13.28.09.gif) [Figma file](https://www.figma.com/file/n8e5S9eGCDKy9n15q68l4M/Code-Suggestions?node-id=185%3A290&t=yFEy3AaT9IuVAKz9-1) ### 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 <!-- Include examples, use cases, benefits, goals, or any other details that will help us understand the problem better. --> ### Links / references
issue