Move Edit and Code for tree header
What does this MR do and why?
This MR is a part of a bigger effort that aims to consolidate various tiny Vue apps in the header area of tree and blob view into one common Vue application.
Note: There's a potential for refactor, but that part will be handled in the following issues within &13018. The MRs for #497051 (closed) goal is to move everything as is.
Even though the end result should not change any UI and behaviour, it is quite a ride
- all changes are behind a
common_repository_blob_header_app=trueURL param - elements are being moved in batches, what you're reviewing may not yet look like the old version
- breaking the work into smaller parts means that feature tests won't pass, due to missing UI elements. We will take care of the feature tests in the last step, after all other MRs are merged
- please make sure you give it a go and thoroughly test all the buttons
The breakdown of #497051 (closed) MRs:
| step | status |
|---|---|
| introduce ff & move first batch of controls, move web ide button for tree header, recreate projects/tree/lock_link in Vue | |
| move code buttons (desktop & mobile) for tree header | |
| move contents of app/views/projects/blob/_breadcrumb.html.haml | |
| recreate projects/tree/lock_link in Vue | |
turn on feature tests for when the ff is true
|
References
Please include cross links to any resources that are relevant to this MR This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- Prepare common Vue app for Repository and Blob header area
- Design proposal for mobile clone code button
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Context | Before | After |
|---|---|---|
| Edit | ![]() |
![]() |
| Code desktop. | ![]() |
![]() |
| Download mobile | ![]() |
![]() |
| Clone mobile | ![]() |
![]() |
| Project overview in Readme mode | ![]() |
![]() |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Go to Project overview or Code / Repository
- Add
common_repository_blob_header_app=trueparam to the URL - Make sure you can use Edit button and its dropdown includes the same options as the page without the param (including a correct WebIDE url that successfully takes you to the editor).
- On desktop, make sure you can use Code button and its dropdown includes the same options as the page without the param: there are the same clone urls, the same open in IDE options, the same download options (aka. the urls match between old and new view).
- Switch to mobile view, make sure there's a separate dropdown for download options and another one for copying clone urls (exception: this part will be slightly different looking than the previous implementation due to an already existing component that we're reusing, but matches a future iteration planned here: !168098 (comment 2154543036) )
Related to #497051 (closed) Related to #497563 (closed)









