Repo File View as VSCode Editor

Replace the file view with this:

https://spiffcode.github.io/ghedit/?repo=gitlabhq/gitlabhq&branch=master

Repository - Initial view of files

Initial View upon entering the repository tab. Double-click a file name to open it.

Repo File Editor - Read-Only View

Once the file is opened, the view of that file appears to slide in from the right. The files view remains and other files can be opened from this menu. Once all files opened are closed, we return to the initial view of the files. The last file closed appears to slide off to the right.

Notes:

Global area above editor:

• The branch can be changed using the branch dropdown.
• Users toggle into ‘Edit’ mode by pressing the Edit Mode button.
• Users can download all files (same functionality as exists now).

File tree editor:

• This design shows the ability to download all files within the tree editor. This is a duplicate of the download capability in the global bar. Was left in for possible future iterations.
• Ability to create a new folder or file using the icons.
• Ability to lock or unlock files. Shown only on subset of folders - when implemented all folders would be unlocked by default, shown via the light gray lock symbol.

Commit Section:

• There is no commit section visible when the file is in read-only mode.

Repo File Editor - Edit View

Clicking the Edit Mode button enables the editing of files.

Notes:

Target Branch

• The 'Edit Mode` button text changes to say, 'Cancel Editing'.
• The branch dropdown becomes locked and a new dropdown appears next to it. This new dropdown selects the target branch for the edits. It is set to create a new branch by default. Users can click the drop-down arrow to change the new branch name or search for and select an existing branch.
• If you don’t have permission (or the branch is protected) then you cannot edit the files.

Cancel Edit

Users can cancel their edits by selecting the 'Cancel Editing' button.

A confirmation modal is triggered. This modal should match the design from issue#28849

Edit

When a file has been edited, the x becomes a green circle to let users know there are edits that need to be committed.

Repo File Editor - Committing changes

When a file (or files) have been edited, the file appears as staged in the commit section.

Notes:

*When you make a change on master (with permissions), you will be encouraged to create a merge request. We should not stop people from making changes directly to master if they wish.

*The target branch appears but cannot be changed here.