Add Git decorators in file explorer and Gutter indicators for changed files in new Web IDE
<!-- This template is a great use for issues that are feature::additions or technical tasks for larger issues.--> ### Problem Editing files using the new Web IDE does not highlight changed files in the file explorer tree. ![Screenshot_2023-01-02_at_12.38.11](/uploads/a51f36d911f3407bf0cae2bdcf68ffa9/Screenshot_2023-01-02_at_12.38.11.png) The VS Code app on macOS provides the Git file decorators OOTB. ![Screenshot_2023-01-02_at_12.36.50](/uploads/7ac411a4d3bc9ed0de5a1a6e7c52b4a7/Screenshot_2023-01-02_at_12.36.50.png) As a user, I do not want to open `Source Control` to verify the changed files. A color Git decorator in the file explorer would keep the focus on continuing editing. The modified badges in the tab view of opened files can be helpful too. In addition, the Gutter indicator can be helpful to see changed lines in the editor view immediately. https://code.visualstudio.com/docs/sourcecontrol/overview#_gutter-indicators Idea from @Rwarcards762 in https://gitlab.com/gitlab-org/gitlab/-/issues/385787#note_1223634335 >>> ...but if I make changes to a file in the new Web IDE, I'm not seeing those files marked as having changes made to them as I work. The only way I know ANY changes are made is by the Source Control icon on the side. An edited file with changes can't be "saved" like in VSCode for Desktop, so no way to trigger the "M" for "Modified" next to a file name (even though IMO, that's the best workflow for telling what has changed while working) -- however, the original Web IDE at least put an orange (or green if new) box next to a file name that had been edited. This functionality is missing from VSCode Web IDE right now. Are there plans to implement a demarcation for "Modified"/"Added" files in the Explorer view? >>> ### Proposal 1. Add the Git file decorator for changed files (modified, added, deleted, untracked, etc.) in the file explorer view - This seems to be provided by the Git Source Control VS Code extension. The Web IDE VS Code fork uses a custom source control extension - maybe this is the location to replicate/implement this behavior as decorator provider (I did not read the source code yet). - The `Workbench > editor > Decorations` setting seems to influence this behaviour too, with `Colors` and `Badges` https://stackoverflow.com/a/65998050/1821348 1. Add `Gutter indicators` inline in the editing view https://code.visualstudio.com/docs/sourcecontrol/overview#_gutter-indicators 1. Provide a configuration setting similar to upstream. For example, `git.decorations.enabled`(via https://stackoverflow.com/questions/66905124/vscode-how-to-remove-git-decorator-information-from-file-tabs) <!-- Use this section to explain the feature and how it will work. It can be helpful to add technical details, design proposals, and links to related epics or issues. --> <!-- Consider adding related issues and epics to this issue. You can also reference the Feature Proposal Template (https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Feature%20proposal%20-%20detailed.md) for additional details to consider adding to this issue. Additionally, as a data oriented organization, when your feature exits planning breakdown, consider adding the `What does success look like, and how can we measure that?` section. --> <!-- Label reminders Use the following resources to find the appropriate labels: - https://gitlab.com/gitlab-org/gitlab/-/labels - https://about.gitlab.com/handbook/product/categories/features/ --> cc @ericschurter @mvanremmerden
issue