Prepare common Vue app for Repository header area
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 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 derisk feature flag
- 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. That is why I decided to stub the ff and 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 MRs:
| step | status |
|---|---|
| introduce ff & move first batch of controls | |
| move web ide button for tree header | |
| move code buttons (desktop & mobile) for tree header | |
| move contents of app/views/projects/blob/_breadcrumb.html.haml | |
turn on feature tests for when the ff is true
|
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 |
|---|---|---|
| tree: old version with multiple Vue apps |  |
 |
| blob: old version with multiple Vue apps |  |
 |
| tree: different ref than root ref (ff off vs. ff on) |  |
 |
| blob |  |
 |
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
- Make sure you can switch Git revision to a different name or branch
- After point 2 you should see Compare button. Make sure it redirects to Compare revisions page with correct data
- Go back to project overview
- Click + button next to the project's breadcrumbs and try adding a file or a branch.
- Click History button and make sure it opens Commits page for a revision you've selected in point 2
- Go back to project overview
- Click Find file button and make sure it opens the search modal with
~prefix for searching for files - Select a file from the tree list
- Make sure you can see blob controls on the right: Find file, Blame, History and Permalink. Check their behaviour.
- Optional: with Vue browser extension make sure you can see HeaderArea app. Then refresh the page to get the legacy blob view. The Vue extension should then list the old structure (that's the part to be moved in 4th MR from the breakdown table
🔝 ). Here's how it should look like:
| new blob | legacy blob |
|---|---|
 |
 |
Related to #497051