Add Multi-File Editor Using Monaco/VSCode
What does this MR do?
Replace repository view with a multi-file editor based on VSCode's editor engine, Monaco
Screen Shots:
Added extra tab height for IE different versions so it looks good on Windows.
Does work on IE11
Error when file cannot be loaded. If offline, for example.
Loading files for first time shows ghost text CSS animation.
Tasks
Process
- Fix pipeline
- Remove/update/add tests
- Feature flag
- Investigate page load size
- Investigate bundling and monaco as npm package
- Refactor to meet guidelines (single file components, vuex, ...)
- Tidy up more functions and make sure everything is named and classified/separated perfectly
- Tidy up props and state
- Remove jquery/vanilla DOM query methods where possible
- Check perms
Bugs/regressions/improvements
-
Fix editor not loading for project home (
/group/project) -
Fix editor not loading for initial render of a file vie (
/group/project/file) -
Add line number linking (
#L6) (currently half works) -
Add line number selection linking (
shift+click) (#L6-10) - Make whole file name table row clickable rather than just file name text
- Force nowrap on file name/icon table row for mobile views
- "Display source" and "Display rendered file" toggle (currently works for markdown)
- "Copy source to clipboard" button
- "Open raw" button
- "Lock" button
- "Delete" button
- "Replace" button
- "Blame" button
- "History" button
- Latest commit snippet for viewed file the one seen here
- Text-based breadcrumbs above the editor (Maybe not needed anymore?)
- New file/directory/tag/branch/upload button
- Clicking parent dir button on top level errors
- Alphabetize file list
- Keep the tabs when navigating away and returning
- Active no work
- Images start out broken
- Close a bunch of files at once
- Loading for folders
- Syntax highlighting sucks
- README shows up below when switching
- Don't show parent breadcrumb when not at root
- Disable scrolling past last line
- PNG's don't load initially when navigating straight to it
- Scrollbars always on messes up UI
- find in all open tabs entire project
- Closing needs to make non-closed file active and change URL
- Closing all needs to make URL change to dir
- Edit mode should disable preview view
- Don't forget a file template
- How to solve big files
- How big can commits be?
- What happens if someone changes something while you do something. Should check SHAs to see if they match and if not it should reject. In the future bring in their changes. For now overwrite your changes with whatever was pushed. Check if it's changed before you do more. Generate the diff you want to change. Save changes locally and apply them. If they are different.
- "View on env" button
-
CONTRIBUTING.mdinfo well - Dependency declaration file rich rendering (links to package manager package page)
Does this MR meet the acceptance criteria?
- Changelog entry added, if necessary
- Documentation created/updated
- API support added
- Tests
- Added for this feature/bug
- All builds are passing
- Conform by the merge request performance guides
- Conform by the style guides
-
Branch has no merge conflicts with
master(if it does - rebase it please) - Squashed related commits together
What are the relevant issue numbers?
closes: #31890 (closed)