Web IDE editor beta
Continued from https://gitlab.com/gitlab-org/gitlab-ee/issues/4539
---
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 changes to 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 all from the web
User stories:
- When I am improving the GitLab handbook I want to be able to view and edit multiple files simultaneously, so that I am free to focus on making clear consistent changes without needing to hold a list of file by file changes in my head. I don't think file by file, but change by change where each change my span multiple files.
- When I am reviewing a merge request I want to be able to review changes in greater detail and context so that I can give more meaningful feedback to my colleagues. I don't want to be dissuaded from giving great feedback by the inconvenience of switching context in my local environment to review the change in full detail.
<details>
<pre class="code highlight js-syntax-highlight plaintext white" lang="plaintext" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">This description will hold the most up to date "Creative Brief", which includes:
- The business goals that have been established for the feature
- A brief summary of the problem statement or purpose of the feature
- A definition of whom (personas: average user vs pro-developer/user) we'll serve with which portion of this effort (multi-file editor vs web IDE)
- A clear description of the main scenarios in which the feature(s) will be used
- A visual design target at which we are aiming with this effort
- Roadmap (including issues) for upcoming 2 milestones
Each included issue will contain:
- Business goal contribution statement (not mandatory)
- Problem statement
- Persona definition
- Scenario description
- The latest designs as decided upon
- Link to the product design principles (if applicable)
</span></code></pre>
<h3>Established Business goals</h3>
TODO
<h3>Persona definition</h3>
TODO
<h3>Scenario description</h3>
TODO
</details>
## Proposal
**The beta will be opt-in via a feature switch in the user preferences.**
Build an online editor that can edit multiple files and change multiple files in a single commit.
### Backlog
- File type icons https://gitlab.com/gitlab-org/gitlab-ce/issues/37624
- Insert snippet from project snippets
- Insert snippet from personal snippets
- Popup dialog needs specs https://gitlab.com/gitlab-org/gitlab-ce/issues/36376
- DRY up Repo Editor HTML https://gitlab.com/gitlab-org/gitlab-ce/issues/36522
- Make `blobURLtoParentTree` less brittle https://gitlab.com/gitlab-org/gitlab-ce/issues/36364
- Fix `commitFiles` error handling https://gitlab.com/gitlab-org/gitlab-ce/issues/36365
- Use proper markup in dropdown_input helper https://gitlab.com/gitlab-org/gitlab-ce/issues/36370
- Remove root v-if's from repo components https://gitlab.com/gitlab-org/gitlab-ce/issues/36493
- Remove deep watchers https://gitlab.com/gitlab-org/gitlab-ce/issues/36494
- Refactor uses of Vue.nextTick to use returned promise and avoid nested callbacks https://gitlab.com/gitlab-org/gitlab-ce/issues/36371
- Fill in or remove empty specs for editClicked https://gitlab.com/gitlab-org/gitlab-ce/issues/36372
- Move branch-specific logic from gl_dropdown into repo editor https://gitlab.com/gitlab-org/gitlab-ce/issues/36373
- Reset RepoStore before each test https://gitlab.com/gitlab-org/gitlab-ce/issues/36462
- Expose proper entities in Repo Entity https://gitlab.com/gitlab-org/gitlab-ce/issues/36037
- Make `scrollTabsRight` less fragile https://gitlab.com/gitlab-org/gitlab-ce/issues/36362
- Don't rely on HTML to create whitespace in repo editor https://gitlab.com/gitlab-org/gitlab-ce/issues/36356
- Re-design and refactor store logic & data flow through repo editor https://gitlab.com/gitlab-org/gitlab-ce/issues/36357
- Break up makeCommit & write more tests https://gitlab.com/gitlab-org/gitlab-ce/issues/36358
- Determine a better approach to method use and re-use than repo_helper https://gitlab.com/gitlab-org/gitlab-ce/issues/36359
- Make `getLanguageIDForFile` less brittle https://gitlab.com/gitlab-org/gitlab-ce/issues/36360
- Break up `getContent` https://gitlab.com/gitlab-org/gitlab-ce/issues/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
### GA requirements
- [ ] Replace existing blob viewer/editor with Monaco editor (subset of multi-file editor)
- [ ] Port blob viewer syntax highlighting to Monaco
- [ ] Lock and unlock files https://gitlab.com/gitlab-org/gitlab-ce/issues/38623 ~"EE Premium"
- [ ] Create file from template https://gitlab.com/gitlab-org/gitlab-ce/issues/38630
- [ ] i18n https://gitlab.com/gitlab-org/gitlab-ce/issues/38611
- [ ] Auxiliary blob viewer https://gitlab.com/gitlab-org/gitlab-ce/issues/37060
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
## Acknowledgments
- Kudos to @jschatz1 for idea and proof of concept :+1: (https://gitlab.com/gitlab-org/gitlab-ce/issues/31890)
## People mentions
@timzallmann @jramsay
epic