Merge branch '47938-expand-diff' into 'master'

Resolve ""Click to expand" link in collapsed diffs should be blue"

Closes #47938

See merge request gitlab-org/gitlab-ce!19867

app/assets/javascripts/single_file_diff.js

@@ -11,7 +11,7 @@ import syntaxHighlight from './syntax_highlight';
 const WRAPPER = '<div class="diff-content"></div>';
 const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
 const ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
-const COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
+const COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>';
 
 export default class SingleFileDiff {
   constructor(file) {

app/assets/stylesheets/framework/blocks.scss

@@ -16,6 +16,7 @@
 
     .click-to-expand {
       cursor: pointer;
+      vertical-align: initial;
     }
   }
 }

app/views/projects/diffs/_collapsed.html.haml

@@ -2,4 +2,4 @@
 - url = url_for(safe_params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path, file_identifier: diff_file.file_identifier))
 .nothing-here-block.diff-collapsed{ data: { diff_for_path: url } }
   This diff is collapsed.
-  %a.click-to-expand Click to expand it.
+  %button.click-to-expand.btn.btn-link Click to expand it.

spec/features/projects/diffs/diff_show_spec.rb

@@ -166,8 +166,7 @@ feature 'Diff file viewer', :js do
 
     context 'expanding the diff' do
       before do
-        # We can't use `click_link` because the "link" doesn't have an `href`.
-        find('a.click-to-expand').click
+        click_button 'Click to expand it.'
 
         wait_for_requests
       end