Fixed copy contents functionality for snippets

Switched from relying on ID for the blob content to
generated hash-based data-* attribute to make sure we're
generating the unique one for each blob.

app/assets/javascripts/blob/components/blob_header_default_actions.vue

@@ -32,6 +32,7 @@ export default {
       default: false,
     },
   },
+  inject: ['blobHash'],
   computed: {
     downloadUrl() {
       return `${this.rawPath}?inline=false`;
@@ -39,6 +40,9 @@ export default {
     copyDisabled() {
       return this.activeViewer === RICH_BLOB_VIEWER;
     },
+    getBlobHashTarget() {
+      return `[data-blob-hash="${this.blobHash}"]`;
+    },
   },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -53,7 +57,7 @@ export default {
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
       :disabled="copyDisabled"
-      data-clipboard-target="#blob-code-content"
+      :data-clipboard-target="getBlobHashTarget"
       data-testid="copyContentsButton"
       icon="copy-to-clipboard"
       category="primary"

app/assets/javascripts/snippets/components/snippet_blob_view.vue

@@ -51,6 +51,13 @@ export default {
       required: true,
     },
   },
+  provide() {
+    return {
+      blobHash: Math.random()
+        .toString()
+        .split('.')[1],
+    };
+  },
   data() {
     return {
       blobContent: '',

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

@@ -9,6 +9,7 @@ export default {
     GlIcon,
   },
   mixins: [ViewerMixin],
+  inject: ['blobHash'],
   data() {
     return {
       highlightedLine: null,
@@ -64,7 +65,7 @@ export default {
       </a>
     </div>
     <div class="blob-content">
-      <pre class="code highlight"><code id="blob-code-content" v-html="content"></code></pre>
+      <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre>
     </div>
   </div>
 </template>

changelogs/unreleased/dmishunov-276913-snippet-copy-content.yml

+---
+title: Fixed copy contents functionality for snippets
+merge_request: 47646
+author:
+type: fixed

spec/frontend/blob/components/blob_header_default_actions_spec.js

@@ -14,8 +14,13 @@ describe('Blob Header Default Actions', () => {
   let btnGroup;
   let buttons;
 
+  const blobHash = 'foo-bar';
+
   function createComponent(propsData = {}) {
     wrapper = mount(BlobHeaderActions, {
+      provide: {
+        blobHash,
+      },
       propsData: {
         rawPath: Blob.rawPath,
         ...propsData,

spec/frontend/blob/components/blob_header_spec.js

@@ -11,7 +11,11 @@ describe('Blob Header Default Actions', () => {
 
   function createComponent(blobProps = {}, options = {}, propsData = {}, shouldMount = false) {
     const method = shouldMount ? mount : shallowMount;
+    const blobHash = 'foo-bar';
     wrapper = method.call(this, BlobHeader, {
+      provide: {
+        blobHash,
+      },
       propsData: {
         blob: { ...Blob, ...blobProps },
         ...propsData,

spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap

@@ -59,7 +59,7 @@ exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
       class="code highlight"
     >
       <code
-        id="blob-code-content"
+        data-blob-hash="foo-bar"
       >
         <span
           id="LC1"

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

@@ -5,9 +5,13 @@ import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/const
 describe('Blob Simple Viewer component', () => {
   let wrapper;
   const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`;
+  const blobHash = 'foo-bar';
 
   function createComponent(content = contentMock) {
     wrapper = shallowMount(SimpleViewer, {
+      provide: {
+        blobHash,
+      },
       propsData: {
         content,
         type: 'text',