Add Edit file link to the README preview header
What does this MR do and why?
The project home page renders the README with only the file name in the file-holder header, so fixing a typo means opening the blob page and clicking Edit there. Requested in 2017; UX settled the treatment in 2024: a low-key "Edit file" link matching the profile README header, not a button.
repository/components/preview/index.vuerenders the link on the right of the README header (the header is alreadyjustify-content: space-between), reusing the existingEdit filestring.- A new small
blob_edit.query.graphqlfetchescanModifyBlobandeditBlobPathfor the previewed blob; the link only renders when the user can modify the blob on the current ref, so signed-out users and non-members see no change.
The issue also mentions a HAML render path (app/views/projects/_readme.html.haml). That partial is dead code: nothing renders it anywhere in app/, ee/, or lib/. The Vue preview is the only live path, so the link is added there; removing the orphaned partial is a separate cleanup.
References
- Add Edit button on README file-holder on Project homepage
- Copy and treatment agreed in-thread, 2024-04: link labeled "Edit file", matching
app/views/users/_overview.html.haml.
Screenshots or screen recordings
| State | Before | After |
|---|---|---|
| Project member (the fix) | ![]() |
![]() |
| Signed out (unchanged) | ![]() |
![]() |
The signed-out pair is identical by design: the Edit file button is gated on canModifyBlob. Signed-out pages render in the capture environment's dark scheme; both sides match.
How to set up and validate locally
- Open the home page of a project with a README as a member who can push: the README header shows Edit file on the right, linking to the single-file editor.
- Sign out (or use a non-member): the link is gone.
Tests
spec/frontend/repository/components/preview/index_spec.js: link rendered with the edit path whencanModifyBlob, hidden when the user cannot modify or the blob lookup returns nothing.spec/features/projects/show/content_display_spec.rb(renders the README on the project home) passes unchanged.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.



