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.vue renders the link on the right of the README header (the header is already justify-content: space-between), reusing the existing Edit file string.
  • A new small blob_edit.query.graphql fetches canModifyBlob and editBlobPath for 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

Screenshots or screen recordings

State Before After
Project member (the fix) readme_edit_link_owner readme_edit_link_owner
Signed out (unchanged) readme_edit_link_signed_out readme_edit_link_signed_out

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

  1. 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.
  2. 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 when canModifyBlob, 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.

Edited by Paul W

Merge request reports

Loading
Loading