[go: up one dir, main page]

Skip to content

Prepare common Vue app for Repository and Blob header area

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

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

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

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 !167906 (merged)
move code buttons (desktop & mobile) for tree header !171946 (merged)
move contents of app/views/projects/blob/_breadcrumb.html.haml !172515 (merged)
recreate projects/tree/lock_link in Vue !174896 (merged) !174967 (merged) !175324 (merged) !175591 (merged)
remove the param and display the new layout as a default will be done in a following issue 🚧
Edited by Paulina Sedlak-Jakubowska