Merge branch 'mle/336307-add-copy-code-embedded-snippets' into 'master'

Add copy button to snippet

See merge request !87677

app/assets/stylesheets/snippets.scss

@@ -26,6 +26,7 @@
     &.gl-snippet-icon-doc-code { background-position: 0 0;  }
     &.gl-snippet-icon-doc-text {  background-position: 0 -16px; }
     &.gl-snippet-icon-download {  background-position: 0 -32px; }
+    &.gl-snippet-icon-copy-to-clipboard {  background-position: 0 -48px; }
   }
 
   .blob-viewer {
@@ -109,6 +110,7 @@
 
     .file-header-content {
       max-width: 75%;
+      align-self: center;
 
       .file-title-name {
         font-weight: $gl-font-weight-bold;
@@ -143,6 +145,7 @@
   }
 
   .btn-group {
+    button.btn,
     a.btn {
       background-color: $white;
       text-decoration: none;
@@ -165,5 +168,9 @@
         border-right: $border-style;
       }
     }
+
+    button.btn {
+      padding: 9px 9px 8px;
+    }
   }
 }

app/helpers/snippets_helper.rb

@@ -62,6 +62,18 @@ def embedded_snippet_download_button(snippet, blob)
             rel: 'noopener noreferrer')
   end
 
+  def embedded_copy_snippet_button(blob)
+    return unless blob.rendered_as_text?(ignore_errors: false)
+
+    content_tag(:button,
+        class: 'gl-button btn btn-default copy-to-clipboard-btn',
+        title: 'Copy snippet contents',
+        onclick: "copyToClipboard('.blob-content[data-blob-id=\"#{blob.id}\"] > pre')"
+    ) do
+      external_snippet_icon('copy-to-clipboard')
+    end
+  end
+
   def snippet_file_count(snippet)
     file_count = snippet.statistics&.file_count
 

app/views/shared/snippets/_embed.html.haml

@@ -14,8 +14,8 @@
 
     .file-actions.d-none.d-sm-block
       .btn-group{ role: "group" }<
+        = embedded_copy_snippet_button(blob)
         = embedded_raw_snippet_button(@snippet, blob)
-
         = embedded_snippet_download_button(@snippet, blob)
   %figure.file-holder.snippet-file-content{ "aria-label" => _('Code snippet') }
     = render 'projects/blob/viewer', viewer: blob.simple_viewer, load_async: false, external_embed: true

app/views/shared/snippets/show.js.haml

+function copyToClipboard(queryEl) { const copyText = document.querySelector(queryEl).textContent; navigator.clipboard.writeText(copyText); }
 document.write('#{escape_javascript(stylesheet_link_tag("#{stylesheet_url 'snippets'}"))}');
 document.write('#{escape_javascript(render(partial: 'shared/snippets/embed', collection: @blobs, as: :blob))}');

spec/helpers/snippets_helper_spec.rb

@@ -64,6 +64,33 @@ def download_link(url)
     end
   end
 
+  describe '#embedded_snippet_copy_button' do
+    let(:blob) { snippet.blobs.first }
+    let(:ref) { blob.repository.root_ref }
+
+    subject { embedded_copy_snippet_button(blob) }
+
+    context 'for Personal Snippets' do
+      let(:snippet) { public_personal_snippet }
+
+      it 'returns copy button of embedded snippets' do
+        expect(subject).to eq(copy_button("#{blob.id}"))
+      end
+    end
+
+    context 'for Project Snippets' do
+      let(:snippet) { public_project_snippet }
+
+      it 'returns copy button of embedded snippets' do
+        expect(subject).to eq(copy_button("#{blob.id}"))
+      end
+    end
+
+    def copy_button(blob_id)
+      "<button class=\"gl-button btn btn-default copy-to-clipboard-btn\" title=\"Copy snippet contents\" onclick=\"copyToClipboard(&#39;.blob-content[data-blob-id=&quot;#{blob_id}&quot;] &gt; pre&#39;)\">#{external_snippet_icon('copy-to-clipboard')}</button>"
+    end
+  end
+
   describe '#snippet_badge' do
     let(:snippet) { build(:personal_snippet, visibility) }