Skip to content

Code Search - Git Blame Links

Zack Cuddy requested to merge 327052-code-search-git-blame-link into master

What does this MR do and why?

Closes #327052 (closed)

This change adds an additional link the code blobs of Code Search. This link will link the user to the File Blame rather than the File Diff. Additionally this change bumps the SVG size up and adds a background hover color identical to the MR Diff tab.

Due to the change in implementation here we opted to move this HAML partial into its own Search specific one rather than the shares/file_highlight. This was to ensure we didn't overreach in our change as the markup is changing quite a bit.

Essentially rather than using a ::before along with a :hover we are switching to simply using a :hover and visibility: visible effect.

Important: There are some contrast concerns with the icons. This will be addressed in the follow up: #346975 (closed)

Screenshots or screen recordings

Theme Before After
White White_Before Screen_Shot_2021-12-07_at_11.20.23_AM
Dark Dark_Before Screen_Shot_2021-12-07_at_11.20.34_AM
Solar Light Solar_Light_Before Screen_Shot_2021-12-07_at_11.20.47_AM
Solar Dark Solar_Dark_Before Screen_Shot_2021-12-07_at_11.20.59_AM
Monakai Monakai_Before Screen_Shot_2021-12-07_at_11.21.12_AM
None None_Before Screen_Shot_2021-12-07_at_11.21.23_AM

Tooltip

Screen_Shot_2021-12-07_at_11.21.33_AM

How to set up and validate locally

Standard Testing

  1. Fetch and checkout this branch
  2. Navigate to a project with code
  3. Using the top right search in the header nav, search for some code (ie const)
  4. Hover over a line number on a code blob
  5. Ensure both the Git Blame icon and the Link icon appear
  6. Hover over the Git Blame icon and ensure the hover text says "View blame"
  7. Click the Git Blame icon and ensure it takes you to the blame file for that line
  8. Go back to the search and click the Link Icon and ensure it takes you to the file for that line

Test edge cases

  1. Fetch and checkout this branch
  2. Download this patch file: cuddy-patch.txt
  3. Copy the file contents to your clipboard
  4. Navigate to your /gitlab directory in your terminal with this branch checked out
  5. Enter the command pbpaste | git apply
  6. This will apply local changes that will randomly generate 10^x - 1 for random line numbers
  7. Ensure the each line holder contains all the lines correctly and doesn't misalign them on desktop or mobile

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #327052 (closed)

Edited by Zack Cuddy

Merge request reports