Merge branch 'clipboard-buttons-fix' into 'master'

Fix clipboard buttons on "Check out branch" modal.

Closes #18794 

See merge request !4760

app/helpers/button_helper.rb

@@ -22,6 +22,16 @@ module ButtonHelper
       type: :button
   end
 
+  # Output a "Copy to Clipboard" button with a custom CSS class
+  #
+  # data - Data attributes passed to `content_tag`
+  # css_class - Class passed to the `content_tag`
+  #
+  # Examples:
+  # 
+  #   # Define the target element
+  #   clipboard_button_with_class({clipboard_target: "div#foo"}, css_class: "btn-clipboard")
+  #   # => "<button class='btn btn-clipboard' data-clipboard-target='div#foo'>...</button>"
   def clipboard_button_with_class(data = {}, css_class: 'btn-clipboard')
     content_tag :button,
       icon('clipboard'),

app/views/projects/merge_requests/show/_how_to_merge.html.haml

@@ -8,7 +8,7 @@
         %p
           %strong Step 1.
           Fetch and check out the branch for this merge request
-        = clipboard_button(clipboard_target: 'pre#merge-info-1')
+        = clipboard_button_with_class({clipboard_target: "pre#merge-info-1"}, css_class: "btn-clipboard")
         %pre.dark#merge-info-1
           - if @merge_request.for_fork?
             :preserve
@@ -25,7 +25,7 @@
         %p
           %strong Step 3.
           Merge the branch and fix any conflicts that come up
-        = clipboard_button(clipboard_target: 'pre#merge-info-3')
+        = clipboard_button_with_class({clipboard_target: "pre#merge-info-3"}, css_class: "btn-clipboard")
         %pre.dark#merge-info-3
           - if @merge_request.for_fork?
             :preserve
@@ -38,7 +38,7 @@
         %p
           %strong Step 4.
           Push the result of the merge to GitLab
-        = clipboard_button(clipboard_target: 'pre#merge-info-4')
+        = clipboard_button_with_class({clipboard_target: "pre#merge-info-4"}, css_class: "btn-clipboard")
         %pre.dark#merge-info-4
           :preserve
             git push origin #{h @merge_request.target_branch}