Resolve "Copy diff file path as GFM" is broken

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -108,6 +108,9 @@ export default {
         false,
       );
     },
+    gfmCopyText() {
+      return `\`${this.diffFile.filePath}\``;
+    },
   },
   methods: {
     ...mapActions('diffs', ['toggleFileDiscussions']),
@@ -191,6 +194,7 @@ export default {
       <clipboard-button
         :title="__('Copy file path to clipboard')"
         :text="diffFile.filePath"
+        :gfm="gfmCopyText"
         css-class="btn-default btn-transparent btn-clipboard"
       />
 

app/assets/javascripts/vue_shared/components/clipboard_button.vue

@@ -31,6 +31,11 @@ export default {
       type: String,
       required: true,
     },
+    gfm: {
+      type: String,
+      required: false,
+      default: null,
+    },
     title: {
       type: String,
       required: true,
@@ -51,6 +56,14 @@ export default {
       default: 'btn-default',
     },
   },
+  computed: {
+    clipboardText() {
+      if (this.gfm !== null) {
+        return JSON.stringify({ text: this.text, gfm: this.gfm });
+      }
+      return this.text;
+    },
+  },
 };
 </script>
 
@@ -59,7 +72,7 @@ export default {
     v-tooltip
     :class="cssClass"
     :title="title"
-    :data-clipboard-text="text"
+    :data-clipboard-text="clipboardText"
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     type="button"

changelogs/unreleased/48823-copy-gfm.yml

@@ -0,0 +1,5 @@
+---
+title: Resolve Copy diff file path as GFM is broken
+merge_request: 20725
+author:
+type: fixed

spec/javascripts/diffs/components/diff_file_header_spec.js

@@ -303,7 +303,7 @@ describe('diff_file_header', () => {
 
       const button = vm.$el.querySelector('.btn-clipboard');
       expect(button).not.toBe(null);
-      expect(button.dataset.clipboardText).toBe(props.diffFile.filePath);
+      expect(button.dataset.clipboardText).toBe('{"text":"files/ruby/popen.rb","gfm":"`files/ruby/popen.rb`"}');
     });
 
     describe('file mode', () => {

spec/javascripts/vue_shared/components/clipboard_button_spec.js

@@ -6,31 +6,47 @@ describe('clipboard button', () => {
   const Component = Vue.extend(clipboardButton);
   let vm;
 
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      text: 'copy me',
-      title: 'Copy this value into Clipboard!',
-      cssClass: 'btn-danger',
-    });
-  });
-
   afterEach(() => {
     vm.$destroy();
   });
 
-  it('renders a button for clipboard', () => {
+  describe('without gfm', () => {
-    expect(vm.$el.tagName).toEqual('BUTTON');
+    beforeEach(() => {
-    expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
+      vm = mountComponent(Component, {
-    expect(vm.$el).toHaveSpriteIcon('duplicate');
+        text: 'copy me',
+        title: 'Copy this value into Clipboard!',
+        cssClass: 'btn-danger',
+      });
+    });
+
+    it('renders a button for clipboard', () => {
+      expect(vm.$el.tagName).toEqual('BUTTON');
+      expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
+      expect(vm.$el).toHaveSpriteIcon('duplicate');
+    });
+
+    it('should have a tooltip with default values', () => {
+      expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
+      expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+      expect(vm.$el.getAttribute('data-container')).toEqual(null);
+    });
+
+    it('should render provided classname', () => {
+      expect(vm.$el.classList).toContain('btn-danger');
+    });
   });
 
-  it('should have a tooltip with default values', () => {
+  describe('with gfm', () => {
-    expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
+    it('sets data-clipboard-text with gfm', () => {
-    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+      vm = mountComponent(Component, {
-    expect(vm.$el.getAttribute('data-container')).toEqual(null);
+        text: 'copy me',
-  });
+        gfm: '`path/to/file`',
-
+        title: 'Copy this value into Clipboard!',
-  it('should render provided classname', () => {
+        cssClass: 'btn-danger',
-    expect(vm.$el.classList).toContain('btn-danger');
+      });
+      expect(vm.$el.getAttribute('data-clipboard-text')).toEqual(
+        '{"text":"copy me","gfm":"`path/to/file`"}',
+      );
+    });
   });
 });