Code Search - Git Blame Links

app/assets/stylesheets/highlight/themes/dark.scss

@@ -94,7 +94,8 @@ $dark-il: #de935f;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $dark-main-bg;
   }
 
@@ -168,7 +169,8 @@ $dark-il: #de935f;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }

app/assets/stylesheets/highlight/themes/monokai.scss

@@ -95,7 +95,8 @@ $monokai-gh: #75715e;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $monokai-bg;
   }
 
@@ -169,7 +170,8 @@ $monokai-gh: #75715e;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }

app/assets/stylesheets/highlight/themes/none.scss

@@ -16,7 +16,8 @@
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $gray-light;
   }
 
@@ -66,7 +67,8 @@
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }

app/assets/stylesheets/highlight/themes/solarized-dark.scss

@@ -98,7 +98,8 @@ $solarized-dark-il: #2aa198;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $solarized-dark-line-bg;
   }
 
@@ -148,7 +149,8 @@ $solarized-dark-il: #2aa198;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }

app/assets/stylesheets/highlight/themes/solarized-light.scss

@@ -105,7 +105,8 @@ $solarized-light-il: #2aa198;
   }
 
   .line-numbers,
-  .diff-line-num {
+  .diff-line-num,
+  .code-search-line {
     background-color: $solarized-light-line-bg;
   }
 
@@ -168,7 +169,8 @@ $solarized-light-il: #2aa198;
     }
 
     .diff-grid-left:hover,
-    .diff-grid-right:hover {
+    .diff-grid-right:hover,
+    &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }

app/assets/stylesheets/highlight/white_base.scss

@@ -82,7 +82,8 @@ $white-gc-bg: #eaf2f5;
 }
 
 .line-numbers,
-.diff-line-num {
+.diff-line-num,
+.code-search-line {
   background-color: $gray-light;
 
   &.conflict_marker,
@@ -128,7 +129,8 @@ pre.code,
   }
 
   .diff-grid-left:hover,
-  .diff-grid-right:hover {
+  .diff-grid-right:hover,
+  &.code-search-line:hover {
     .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) {
       @include line-number-hover;
     }

app/assets/stylesheets/pages/search.scss

@@ -321,6 +321,51 @@ input[type='checkbox']:hover {
   }
 }
 
+// This overrides parts of the Project File View CSS
+// We leverage most of the styling but broke off
+// from how we were doing it in `shared/file_highlight`
+#search-blob-content {
+  .line_holder {
+    pre {
+      padding: 0; // This overrides the existing style that will add space between each line.
+    }
+
+    svg {
+      float: none; // We have more than one icon on this implementation and don't want to float them.
+      margin: 0; // We will manage the margin with GitLab UI utility classes
+    }
+
+    .line-numbers {
+      padding: 0; // This overrides the existing style that will add space between each line.
+      min-width: 6.5rem; // Ensure our numbers fit
+
+      .diff-line-num {
+        a {
+          transition: none; // There will be a hover transition from theme, blue, darkened
+        }
+      }
+    }
+
+    &:hover {
+      svg {
+        visibility: visible; // We want to show the icons when the any part of the line is hovered
+      }
+    }
+
+    // The icons only appear on hover
+    // So on mobile we can hide them and retake the space for the code blob
+    @include media-breakpoint-down(sm) {
+      svg {
+        display: none;
+      }
+
+      .line-numbers {
+        min-width: 4rem;
+      }
+    }
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,

app/views/search/results/_blob.html.haml

 - project = blob.project
 - return unless project
 - blob_link = project_blob_path(project, tree_join(repository_ref(project), blob.path))
+- blame_link = project_blame_path(project, tree_join(repository_ref(project), blob.path))
 
-= render partial: 'search/results/blob_data', locals: { blob: blob, project: project, path: blob.path, blob_link: blob_link }
+= render partial: 'search/results/blob_data', locals: { blob: blob, project: project, path: blob.path, blob_link: blob_link, blame_link: blame_link }

app/views/search/results/_blob_data.html.haml

@@ -9,7 +9,7 @@
     - if blob.data
       - if blob.data.size > 0
         .file-content.code.term{ data: { qa_selector: 'file_text_content' } }
-          = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link, highlight_line: blob.highlight_line
+          = render 'search/results/blob_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link, blame_link: blame_link, highlight_line: blob.highlight_line
       - else
         .file-content.code
           .nothing-here-block

app/views/search/results/_blob_highlight.html.haml

+- offset = defined?(first_line_number) ? first_line_number : 1
+- highlight = defined?(highlight_line) && highlight_line ? highlight_line - offset : nil
+
+#search-blob-content.file-content.code.js-syntax-highlight{ class: 'gl-py-3!' }
+  - if blob.present?
+    .blob-content{ data: { blob_id: blob.id, path: blob.path, highlight_line: highlight, qa_selector: 'file_content' } }
+      - blob.present.highlight.lines.each_with_index do |line, index|
+        - i = index + offset
+        .line_holder.code-search-line
+          .line-numbers
+            .gl-display-flex
+              %span.diff-line-num.gl-pl-3
+                %a.has-tooltip{ href: "#{blame_link}#L#{i}", id: "blame-L#{i}", 'data-line-number' => i, title: _('View blame') }
+                  = sprite_icon('git')
+              %span.diff-line-num.flex-grow-1.gl-pr-3
+                %a{ href: "#{blob_link}#L#{i}", id: "blob-L#{i}", 'data-line-number' => i, class: 'gl-display-flex! gl-align-items-center gl-justify-content-end' }
+                  = sprite_icon('link', css_class: 'gl-ml-3! gl-mr-1!')
+                  = i
+          %pre.code.highlight
+            %code
+              = line.html_safe
+

locale/gitlab.pot

@@ -38570,6 +38570,9 @@ msgstr ""
 msgid "View all issues"
 msgstr ""
 
+msgid "View blame"
+msgstr ""
+
 msgid "View blame prior to this change"
 msgstr ""
 

spec/features/search/user_searches_for_code_spec.rb

@@ -40,14 +40,24 @@ RSpec.describe 'User searches for code' do
       include_examples 'top right search form'
       include_examples 'search timeouts', 'blobs'
 
-      it 'finds code' do
+      it 'finds code and links to blob' do
+        fill_in('dashboard_search', with: 'rspec')
+        find('.btn-search').click
+
+        expect(page).to have_selector('.results', text: 'Update capybara, rspec-rails, poltergeist to recent versions')
+
+        find("#blob-L3").click
+        expect(current_url).to match(%r{blob/master/.gitignore#L3})
+      end
+
+      it 'finds code and links to blame' do
         fill_in('dashboard_search', with: 'rspec')
         find('.btn-search').click
 
         expect(page).to have_selector('.results', text: 'Update capybara, rspec-rails, poltergeist to recent versions')
 
-        find("#L3").click
-        expect(current_url).to match(%r{master/.gitignore#L3})
+        find("#blame-L3").click
+        expect(current_url).to match(%r{blame/master/.gitignore#L3})
       end
 
       it 'search mutiple words with refs switching' do
@@ -65,7 +75,8 @@ RSpec.describe 'User searches for code' do
         expect(page).to have_selector('.results', text: expected_result)
 
         expect(find_field('dashboard_search').value).to eq(search)
-        expect(find("#L1502")[:href]).to match(%r{v1.0.0/files/markdown/ruby-style-guide.md#L1502})
+        expect(find("#blob-L1502")[:href]).to match(%r{blob/v1.0.0/files/markdown/ruby-style-guide.md#L1502})
+        expect(find("#blame-L1502")[:href]).to match(%r{blame/v1.0.0/files/markdown/ruby-style-guide.md#L1502})
       end
     end