Prepare a sort of scaffolding - a common Vue app that will include all the UI elements and migrate inside it everything in its current shape. **Important:** that means the blob will end up having one Vue app and we will move away from the duality in the top part of the page. I suggest implementing this with one MR per location. We might want to use a short-lived feature flag to make sure we can easily switch back to previous implementation, when we encounter any issues. ### Proposed structure Here's a graphical representation of the header Vue app and its inner components, based on the location. The names of new components are just a suggestions. #### Repository ```mermaid flowchart LR subgraph LastCommit direction LR CommitInfo ~~~ History end subgraph ide1 [Repository header] direction LR RefSelector ~~~ Search ~~~ Breadcrumbs ~~~ CopyPath Icon&DirectoryName ~~~ AddNew ~~~ Code ~~~ Actions end ``` #### Blob ```mermaid flowchart LR subgraph LastCommit direction LR CommitInfo ~~~ History end subgraph ide1 [Repository header] direction LR RefSelector ~~~ Search ~~~ Breadcrumbs ~~~ CopyPath Icon&FileName ~~~ Edit ~~~ Actions end CodeOwners ``` ### Technical breakdown [Spike: Repository Usability Improvements: Propose a Vue app structure for Repository and Blob](https://gitlab.com/gitlab-org/gitlab/-/issues/486950) ### Implementation plan | step | status | |------|--------| | ~~introduce ff~~ introduce a param to display the new layout & move first batch of controls, move web ide button for tree header | https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167906 | | move code buttons (desktop & mobile) for tree header | https://gitlab.com/gitlab-org/gitlab/-/merge_requests/171946 | | move contents of [app/views/projects/blob/\_breadcrumb.html.haml](https://gitlab.com/gitlab-org/gitlab/-/blob/2cd0d8dabfa0dafefaddf01746c0711678d622b3/app/views/projects/blob/\_breadcrumb.html.haml) | https://gitlab.com/gitlab-org/gitlab/-/merge_requests/172515 | | recreate projects/tree/lock_link in Vue | https://gitlab.com/gitlab-org/gitlab/-/merge_requests/174896 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/174967 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/175324 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/175591 | | ~~remove the param and display the new layout as a default~~ will be done in a following issue | :construction: |