Improve Web IDE left panel and modes
In the coming months, the Web IDE will have many significant new features added, including CI traces, CI pipeline status, and a Web Terminal. We need to make sure the structure supports all these features.
We also want to make the Web IDE easy to use, even for users who are less familiar with integrated development environments, be they a marketing specialist updating website copy, or a student learning to program. Because the Web IDE is not aiming to replace a local development environment for professional software engineers in the near future, we should be able to balance the needs of both, so that we can achieve the goal of making it possible for anyone to contribute.
The Web IDE should be useful to professional software engineers, as an editor that makes it easy to fix a failing test, make small updates.
Proposal
Based on the ~"UX Deliverable" https://gitlab.com/gitlab-org/gitlab-ce/issues/44316 there should be three modes (Edit, Review, Commit) that are accessible from the left sidebar.
-
Edit
- Left panel shows file tree
- Content panel shows Monaco editor, file tabs above
-
Review
- Left panel shows file tree, the
source...target
of the comparison and ability to switch between Commit review and Merge Request review - Content panel shows two column diff, file tabs above
- Left panel shows file tree, the
-
Commit
- Left panel shows changed file list of staged and unstaged changes
- Content panel shows two column diff (only one file may be reviewed at a time) - the intention is this diff will become collapsed diff, hiding unchanged lines in a future release
The user should be able to switch from between any mode with a single click.
Designs
Edit mode
- default mode to open when opening web ide
Review mode
- Diff mode is editable (cc: @timzallmann @jramsay)
-
edit
opens a dropdown similar to what we currently have to switch between the 2 diff review modes -
edit
dissappears when the ide has not opened from a merge request
Default review mode (latest changes)
Merge request review mode
- This mode opens automatically if opened from a merge request
Commit mode
- unstaged and staged icons are introduced
- only 1 file can be opened at the same time
- opens by default the file you had last open in edit/review mode (@jramsay I think we could iterate on this with a general all files diff blob view similar as in vscode/atom, when no files are selected)
Commit overview at bottom sidebar
- Will be statically positioned at the bottom of every screen/mode
- Clicking will change to the commit mode. Additionally, the commit write panel will slide up from the bottom.
Commit overview:
Commit write panel:
- When writing a commit message, the collapse button becomes unavailable and is replaced by the discard draft button.
- Slides up from the bottom with an animation
Links
https://gitlab.com/gitlab-org/gitlab-ce/issues/44316
Merge request scopes
This is a very high level list of the different scopes for each merge request. This could change at various points if more merge requests need to be created. The order below may not represent the order in which merge requests will be completed.
-
Create left sidebar with ability to have mode switching buttons -
First merge request will include buttons for tree list & commit view -
Tidy up tree list to better match design of tree list. This includes fixing some spacing to better align & moving the branch name into the project name header. -
Commit view opens last file had open & only allows 1 file to be opened. -
Create review mode switch in sidebar -
This will include a full review mode in the sidebar that will replicate what the current review mode dropdown does. -
Add ability to edit in review mode -
Merge request review mode (same as review mode) just different elements. -
Show change icon & count on folders to represent changes inside of that folder -
Commit overview at bottom sidebar. -
Final UI polish to make sure it matches 100% with the designs.