Add a inline option to diff view in the Web IDE

Problem to solve

When using the WebIDE, the commit step shows tabs with the different files that were modified but it's not easy to get a summary of those changes.

To get a view like this now, the user has to make the commit and switch to the Merge Request view which means spotting a typo or error means going back to the WebIDE to fix it and cancel the running pipeline.

Intended users

Users who may use the WebIDE to make changes to multiple, very long files.

User experience goal

The user should be able to get a clear (or at least familiar) summary of the changes they're going to commit into a repo before committing. The WebIDE currently shows this for single file edits, or short files. Adding an accidental character in part of a file that was not intended becomes difficult to find before committing the change.

Proposal

One suggestion would be to change the diff view between the "review" tab and "commit" tab. In review tab, having side-by-side makes sense. When it's time to commit, switching to the inline git diff view would help establish a summary of changes to make and allow the user to act on that summary.

Further details

This will allow more advanced users to be comfortable with operating the web IDE.

It looks like inline diffs are already supported in Monaco: https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-inline-diff-example - we'd just need to build the UI to toggle that.

Documentation

What does success look like, and how can we measure that?

The user should be able to know all of the changes that will happen by creating a new commit without clicking through multiple open files and scrolling through them individually.

Edited by 🤖 GitLab Bot 🤖