Web IDE editor
See EPIC: &24 (closed)
Description
Editing more than a single file using the GitLab interface can feel laborious because each file must be edited one by one, requiring at least one commit for each edited file. This makes contributing larger changes multiple files, be they markdown or source code, through the GitLab interface difficult.
We want to make it easy for everyone to collaborate. Removing barriers will help people contribute more than fixes to typos and dead links, but allow people to contribute larger changes, offer more comprehensive code review suggestions and more.
Kudos to @jschatz1 for idea and proof of concept
Proposal
The beta should be available as an alternative for the existing blob editor. It should be focussed on editing multiple text files with a single commit.
- Multi-file editor should allow multiple text files to opened, created, edited and committed as a single commit
- Multi-file editor should co-exist with existing blob viewer and editor, so that users of current interface are not impacted by limitations or performance problems with the new multi-file editor
-
Decouple multi-file editor from file list, to an IDE route gitlab-ce#40040 -
Edit in multi-file editor button gitlab-ce#40032 -
Return to blob editor from multi-file editor gitlab-ce#40035
-
- Multi-file editor should allow the user to view images
-
Blob viewer gitlab-ce#38355
-
- Multi-file editor should allow the user to see a list of the changed files staged for commit and add a commit message. The user should also be able to identify which lines have changed in those files
-
Right hand commit panel gitlab-ce#40041 -
Highlight changed lines gitlab-ce#40046
-
- Multi-file editor should allow the user to adjust the width of panels to suit the information within each panel and make the best use of their screen size
-
Full width responsiveness (task gitlab-ce#40040)
-
- Multi-file editor should attempt to prevent users losing their work by navigating to a new page or closing the browser
-
Show warning trying to close page without committing changes
-
- Multi-file editor should be consistent with GitLab visual language
-
Tree panel header styling gitlab-ce#38363 -
Resizable left/right panels gitlab-ce#40042
-
- Performance and reliability
-
Prevent changes being lost or overwritten when branches diverge gitlab-ce#38606 (backend gitlab-ce#38356) -
Tab switching performance gitlab-ce#38562
-
Improvements
-
Save changes to local storage gitlab-ce#40045 -
Create branch when committing to a project with write permissions gitlab-ce#40942 -
Create fork when opening a project without write permissions gitlab-ce#38357 -
Fuzzy file finder -
Open all files from merge request gitlab-ce#40961
Backlog
- Popup dialog needs specs gitlab-ce#36376
- DRY up Repo Editor HTML gitlab-ce#36522
- Make
blobURLtoParentTree
less brittle gitlab-ce#36364 - Fix
commitFiles
error handling gitlab-ce#36365 - Use proper markup in dropdown_input helper gitlab-ce#36370
- Remove root v-if's from repo components gitlab-ce#36493
- Remove deep watchers gitlab-ce#36494
- Refactor uses of Vue.nextTick to use returned promise and avoid nested callbacks gitlab-ce#36371
- Fill in or remove empty specs for editClicked gitlab-ce#36372
- Move branch-specific logic from gl_dropdown into repo editor gitlab-ce#36373
- Reset RepoStore before each test gitlab-ce#36462
- Expose proper entities in Repo Entity gitlab-ce#36037
- Make
scrollTabsRight
less fragile gitlab-ce#36362 - Don't rely on HTML to create whitespace in repo editor gitlab-ce#36356
- Re-design and refactor store logic & data flow through repo editor gitlab-ce#36357
- Break up makeCommit & write more tests gitlab-ce#36358
- Determine a better approach to method use and re-use than repo_helper gitlab-ce#36359
- Make
getLanguageIDForFile
less brittle gitlab-ce#36360 - Break up
getContent
gitlab-ce#36361 - https://gitlab.com/gitlab-org/gitlab-ce/issues/36102
- https://gitlab.com/gitlab-org/gitlab-ce/issues/36040
- https://gitlab.com/gitlab-org/gitlab-ce/issues/36142
Source: https://gitlab.com/gitlab-org/gitlab-ce/issues/31890
Links / references
- https://gitlab.com/gitlab-org/gitlab-ce/issues/13723
- https://gitlab.com/gitlab-org/gitlab-ce/issues/31890
Documentation blurb
Overview
There are users of GitLab who contributor exclusively through the web interface or occasionally through the web interface to commit changes to documentation, static sites, and even source code.
This feature will improve the experience of those existing users by making contributions to more than one file easier.
Use cases
When web-only GitLab users want to make related edits to multiple files, they are obstructed by having to complete multiple manual steps that are separated by many screens.
Feature checklist
Make sure these are completed before closing the issue, with a link to the relevant commit.
-
Feature assurance -
Documentation -
Added to features.yml
Alpha plan
#### 1. Alpha %10.2Building on the proof of concept, the alpha should demonstrate a working editor with no obvious performance regressions. It should work well browsing repositories and be suitable for editing the handbook and other projects commonly edited in the web interface.
Features
-
Hide 'recent commit viewer' -
File tree list gitlab-ce#13723 -
File tree while viewing and editing gitlab-ce#13723 -
Link to file -
Remove source-target branch switcher, @jschatz1 gitlab-ce!14558 -
Create new branch, @jschatz1 gitlab-ce#38485 gitlab-ce!14714 -
Create merge request, @jschatz1 gitlab-ce#38626 gitlab-ce!14665 -
Upgrade Monaco editor, @timzallmann gitlab-ce#38607 gitlab-ce!14629 -
Browser history/back button, @timzallmann gitlab-ce#36436 FE Test Spin next -
Page title, @timzallmann gitlab-ce#36029 FE Done -
Upload file gitlab-ce#38629 -
New file/folder gitlab-ce#38614 -
Prevent locked files from being edited gitlab-ce~2278657 gitlab-org/gitlab-ee#3918
Performance
-
File list, @jschatz1 gitlab-ce#38360 gitlab-ce!14458
Bugs
-
Link to file line/range, @fatihacet gitlab-ce#38254 -
Create branch issue because of new_branch
gitlab-ce#38477 -
Incorrect default target branch gitlab-ce#36367 -
Focus open file when selected in tree nav gitlab-ce#38250 -
Right align Last Update column gitlab-ce#38624 -
Directories missing latest commit data gitlab-ce#38627 gitlab-ce!14458
Tech debt
-
Add last_commit_sha
to batch commits API gitlab-ce#36038
Initial designs
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.
TODO: Needs Mockup
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
TODO: Needs Mockup
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.