[meta] Multi-file editor
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.
Proof of concept can be accessed by creating a cookie with the key
new_repo with the value
Feature switch in
User > Settings
Building 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.
- Hide 'recent commit viewer'
- File tree list #13723
- File tree while viewing and editing #13723
- Link to file
- PRIORITY Blob viewer, @fatihacet #38355 MR: !14574
- PRIORITY Handle rejected push, @jschatz1 #38356
- PRIORITY Permissions: fork vs branch, @jschatz1 #38357 !14673
- PRIORITY Remove source-target branch switcher, @jschatz1 !14558 (merged)
- PRIORITY Create new branch, @jschatz1 #38485 !14714
- PRIORITY Create merge request, @jschatz1 #38626 (closed) !14665 (merged)
- PRIORITY Detect and handle changes to target branch #38606
- PRIORITY Upgrade Monaco editor, @timzallmann #38607 (closed) !14629 (merged)
- Browser history/back button, @timzallmann #36436 (closed) FE Test Spin next
- Page title, @timzallmann #36029 (closed) FE Done
- PRIORITY Upload file #38629
- PRIORITY New file/folder #38614
- PRIORITY Prevent locked files from being edited (EE) #38610
- About to lose changes warning
- Performance issues
- PRIORITY Link to file line/range, @fatihacet #38254 (closed)
- PRIORITY Tree panel header styling, @jschatz1 #38363 !14510
PRIORITY Create branch issue because of
- PRIORITY Incorrect default target branch #36367 (closed)
- Focus open file when selected in tree nav #38250 (closed)
- Right align Last Update column #38624 (closed)
- Files are sorted differently in multi-file editor #38625
- Directories missing latest commit data #38627 !14458
last_commit_shato batch commits API #36038 (closed)
- Popup dialog needs specs #36376
- DRY up Repo Editor HTML #36522
blobURLtoParentTreeless brittle #36364
commitFileserror handling #36365
- Use proper markup in dropdown_input helper #36370
- Remove root v-if's from repo components #36493
- Remove deep watchers #36494
- Refactor uses of Vue.nextTick to use returned promise and avoid nested callbacks #36371
- Fill in or remove empty specs for editClicked #36372
- Move branch-specific logic from gl_dropdown into repo editor #36373
- Reset RepoStore before each test #36462
2. Beta (aiming for 10.3)
The beta should be a mostly complete replacement for the existing repo editor, providing solid improvements and a foundation (monaco-editor) for future innovation towards making contributing accessible to everyone.
- Selecting already open file in tree nav downloads file again #38256 (closed)
- Max file size limits - don't download
- Max tab number limits - 5
- Max files in tree
- Known bugs
- Discuss introduction of axios further #36363
- Expose proper entities in Repo Entity #36037
scrollTabsRightless fragile #36362
- Repo editor commit button is not aligned #36149
- Repo editor: Double border under repo file buttons #36248
- Don't rely on HTML to create whitespace in repo editor #36356
- Re-design and refactor store logic & data flow through repo editor #36357
- Break up makeCommit & write more tests #36358
- Determine a better approach to method use and re-use than repo_helper #36359
getLanguageIDForFileless brittle #36360
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.
Global area above editor:
- The branch can be changed using the branch dropdown.
- Users toggle into ‘Edit’ mode by pressing the
- 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.
- There is no commit section visible when the file is in read-only mode.
Repo File Editor - Edit View
Edit Mode button enables the editing of files.
- 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
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
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.
*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.
Links / references
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.
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.
Make sure these are completed before closing the issue, with a link to the relevant commit.