Add support for copying permalink to notes via more actions dropdown

app/assets/javascripts/copy_to_clipboard.js

@@ -29,12 +29,14 @@ showTooltip = function(target, title) {
   var $target = $(target);
   var originalTitle = $target.data('original-title');
 
-  $target
-    .attr('title', 'Copied')
-    .tooltip('fixTitle')
-    .tooltip('show')
-    .attr('title', originalTitle)
-    .tooltip('fixTitle');
+  if (!$target.data('hideTooltip')) {
+    $target
+      .attr('title', 'Copied')
+      .tooltip('fixTitle')
+      .tooltip('show')
+      .attr('title', originalTitle)
+      .tooltip('fixTitle');
+  }
 };
 
 $(function() {

app/helpers/button_helper.rb

@@ -20,6 +20,9 @@ module ButtonHelper
   def clipboard_button(data = {})
     css_class = data[:class] || 'btn-clipboard btn-transparent'
     title = data[:title] || 'Copy to clipboard'
+    button_text = data[:button_text] || ''
+    hide_tooltip = data[:hide_tooltip] || false
+    hide_button_icon = data[:hide_button_icon] || false
 
     # This supports code in app/assets/javascripts/copy_to_clipboard.js that
     # works around ClipboardJS limitations to allow the context-specific copy/pasting of plain text or GFM.
@@ -35,17 +38,22 @@ module ButtonHelper
     target = data.delete(:target)
     data[:clipboard_target] = target if target
 
-    data = { toggle: 'tooltip', placement: 'bottom', container: 'body' }.merge(data)
+    unless hide_tooltip
+      data = { toggle: 'tooltip', placement: 'bottom', container: 'body' }.merge(data)
+    end
 
-    content_tag :button,
-      icon('clipboard', 'aria-hidden': 'true'),
+    button_attributes = {
       class: "btn #{css_class}",
       data: data,
       type: :button,
       title: title,
-      aria: {
-        label: title
-      }
+      aria: { label: title }
+    }
+
+    content_tag :button, button_attributes do
+      concat(icon('clipboard', 'aria-hidden': 'true')) unless hide_button_icon
+      concat(button_text)
+    end
   end
 
   def http_clone_button(project, placement = 'right', append_link: true)

app/views/projects/notes/_more_actions_dropdown.html.haml

@@ -6,6 +6,8 @@
       %span.icon
         = custom_icon('ellipsis_v')
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
+      %li
+        = clipboard_button(text: noteable_note_url(note), title: "Copy reference to clipboard", button_text: 'Copy link', hide_tooltip: true, hide_button_icon: true)
       - unless is_current_user
         %li
           = link_to new_abuse_report_path(user_id: note.author.id, ref_url: noteable_note_url(note)) do

changelogs/unreleased/35811-copy-link-note.yml

+---
+title: Add support for copying permalink to notes via more actions dropdown
+merge_request: 13299
+author:
+type: added

spec/helpers/button_helper_spec.rb

@@ -62,4 +62,67 @@ describe ButtonHelper do
       end
     end
   end
+
+  describe 'clipboard_button' do
+    let(:user) { create(:user) }
+    let(:project) { build_stubbed(:project) }
+
+    def element(data = {})
+      element = helper.clipboard_button(data)
+      Nokogiri::HTML::DocumentFragment.parse(element).first_element_child
+    end
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    context 'with default options' do
+      context 'when no `text` attribute is not provided' do
+        it 'shows copy to clipboard button with default configuration and no text set to copy' do
+          expect(element.attr('class')).to eq('btn btn-clipboard btn-transparent')
+          expect(element.attr('type')).to eq('button')
+          expect(element.attr('aria-label')).to eq('Copy to clipboard')
+          expect(element.attr('data-toggle')).to eq('tooltip')
+          expect(element.attr('data-placement')).to eq('bottom')
+          expect(element.attr('data-container')).to eq('body')
+          expect(element.attr('data-clipboard-text')).to eq(nil)
+          expect(element.inner_text).to eq("")
+
+          expect(element).to have_selector('.fa.fa-clipboard')
+        end
+      end
+
+      context 'when `text` attribute is provided' do
+        it 'shows copy to clipboard button with provided `text` to copy' do
+          expect(element(text: 'Hello World!').attr('data-clipboard-text')).to eq('Hello World!')
+        end
+      end
+
+      context 'when `title` attribute is provided' do
+        it 'shows copy to clipboard button with provided `title` as tooltip' do
+          expect(element(title: 'Copy to my clipboard!').attr('aria-label')).to eq('Copy to my clipboard!')
+        end
+      end
+    end
+
+    context 'with `button_text` attribute provided' do
+      it 'shows copy to clipboard button with provided `button_text` as button label' do
+        expect(element(button_text: 'Copy text').inner_text).to eq('Copy text')
+      end
+    end
+
+    context 'with `hide_tooltip` attribute provided' do
+      it 'shows copy to clipboard button without tooltip support' do
+        expect(element(hide_tooltip: true).attr('data-placement')).to eq(nil)
+        expect(element(hide_tooltip: true).attr('data-toggle')).to eq(nil)
+        expect(element(hide_tooltip: true).attr('data-container')).to eq(nil)
+      end
+    end
+
+    context 'with `hide_button_icon` attribute provided' do
+      it 'shows copy to clipboard button without tooltip support' do
+        expect(element(hide_button_icon: true)).not_to have_selector('.fa.fa-clipboard')
+      end
+    end
+  end
 end