Follow up to Improve commit flow from unstaged to staged to commit
From https://gitlab.com/gitlab-org/gitlab-ce/issues/46122
The flow from edit to commit has been improved as of 10.8, but once you reach the commit interface it isn't clear what to do next.
This has was improved in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/19735 but there were a number of proposals that weren't addressed that should also be resolved.
Further details
- The discard changes button is small and right next to the stage changes button - it is too easy to mis-click and lose changes
- This was partially address, but the click zone is still very small, and there are lots of small neighboring click zones. Also, because of the use of tooltips to explain the icon buttons there are lots of hover zones.
- The stage all button is very small and requires a tool tip to interpret
- It is now always shown, but it is still very small and the color of it makes it look disabled relative to the tick buttons just below
- Ambiguous filenames are also resolved with a tooltip, further increasing tooltip noise in a very small area
Stage | Discard | Click zones | Ambiguous filenames |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
The correct click zones are hard to hit with the cursor because they are small and close to other click zones. The tooltips that appear as you move the cursor obstruct the buttons below, and make moving the cursor in that area visually noisy.
We need to make sure that staging files is easy and obvious. The current interface has lots of tooltips and small click zones that do not make it easy, and the tooltips reveal that it is not obvious.
We should try to find a boring solution, that probably involves using buttons with borders, and preferring text over icons to reduce the need for tooltips.
Original proposal
### Proposal- Make state/discard all buttons text buttons and remove tooltips
- Make stage/discard file buttons text buttons and remove tooltips
- Move file level stage/discard buttons out of the file list so the click zones can be larger and less closely packed
- Show the full file path above the file so that it is immediately obvious without needing a tooltip
From https://gitlab.com/gitlab-org/gitlab-ce/issues/46122#note_72693412 and https://gitlab.com/gitlab-org/gitlab-ce/issues/46122#note_77018355
Proposed designs
Unstaged changes | Staged changes | Discard a single change | Discard all changes |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
- Stage all, Discard all buttons added in the Unstaged changes section.
- Unstage all button added in the Staged changes section.
- All icon buttons will have a tooltip.
- Discard and Discard all buttons are gated with a confirmation modal to prevent user error.
- When there aren't any staged changes, the Unstage all button is disabled (similarly for unstaged changes).
- The tab bar has been replaced with a header area to display file name and action buttons.
- Double-clicking on a file in the file-list will stage or unstage it. When double-clicking, the default browser behavior of the file name getting selected should be avoided to give a native feel.
- Empty state copy text
- Unstaged changes -
There are no unstaged changes
- Staged changes -
There are no staged changes
- Unstaged changes -