Track usage of merge request file header buttons

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

@@ -210,6 +210,9 @@ export default {
         :text="diffFile.file_path"
         :gfm="gfmCopyText"
         css-class="btn-default btn-transparent btn-clipboard"
+        data-track-event="click_copy_file_button"
+        data-track-label="diff_copy_file_path_button"
+        data-track-property="diff_copy_file"
       />
 
       <small v-if="isModeChanged" ref="fileMode" class="mr-1">
@@ -233,6 +236,9 @@ export default {
               :class="{ active: diffHasExpandedDiscussions(diffFile) }"
               class="js-btn-vue-toggle-comments btn"
               data-qa-selector="toggle_comments_button"
+              data-track-event="click_toggle_comments_button"
+              data-track-label="diff_toggle_comments_button"
+              data-track-property="diff_toggle_comments"
               type="button"
               @click="toggleFileDiscussionWrappers(diffFile)"
             >
@@ -245,6 +251,9 @@ export default {
             :can-current-user-fork="canCurrentUserFork"
             :edit-path="diffFile.edit_path"
             :can-modify-blob="diffFile.can_modify_blob"
+            data-track-event="click_toggle_edit_button"
+            data-track-label="diff_toggle_edit_button"
+            data-track-property="diff_toggle_edit"
             @showForkMessage="showForkMessage"
           />
         </template>
@@ -263,6 +272,9 @@ export default {
           v-gl-tooltip.hover
           :title="expandDiffToFullFileTitle"
           class="expand-file"
+          data-track-event="click_toggle_view_full_button"
+          data-track-label="diff_toggle_view_full_button"
+          data-track-property="diff_toggle_view_full"
           @click="toggleFullDiff(diffFile.file_path)"
         >
           <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
@@ -275,6 +287,9 @@ export default {
           :href="diffFile.view_path"
           target="blank"
           class="view-file"
+          data-track-event="click_toggle_view_sha_button"
+          data-track-label="diff_toggle_view_sha_button"
+          data-track-property="diff_toggle_view_sha"
           :title="viewFileButtonText"
         >
           <icon name="doc-text" />
@@ -288,6 +303,9 @@ export default {
           :title="`View on ${diffFile.formatted_external_url}`"
           target="_blank"
           rel="noopener noreferrer"
+          data-track-event="click_toggle_external_button"
+          data-track-label="diff_toggle_external_button"
+          data-track-property="diff_toggle_external"
           class="btn btn-file-option"
         >
           <icon name="external-link" />

changelogs/unreleased/197412.yml

+---
+title: Track usage of merge request file header buttons
+merge_request:
+author: Oregand
+type: other

spec/javascripts/diffs/components/diff_file_spec.js

 import Vue from 'vue';
 import { createStore } from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mockTracking, triggerEvent } from 'spec/helpers/tracking_helper';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import diffFileMockDataReadable from '../mock_data/diff_file';
@@ -8,12 +9,14 @@ import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
 describe('DiffFile', () => {
   let vm;
+  let trackingSpy;
 
   beforeEach(() => {
     vm = createComponentWithStore(Vue.extend(DiffFileComponent), createStore(), {
       file: JSON.parse(JSON.stringify(diffFileMockDataReadable)),
       canCurrentUserFork: false,
     }).$mount();
+    trackingSpy = mockTracking('_category_', vm.$el, spyOn);
   });
 
   afterEach(() => {
@@ -30,6 +33,7 @@ describe('DiffFile', () => {
 
       expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0);
       expect(el.querySelector('.js-file-title')).toBeDefined();
+      expect(el.querySelector('.btn-clipboard')).toBeDefined();
       expect(el.querySelector('.file-title-name').innerText.indexOf(file_path)).toBeGreaterThan(-1);
       expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
 
@@ -39,6 +43,25 @@ describe('DiffFile', () => {
         .then(() => {
           expect(el.querySelectorAll('.line_content').length).toBe(5);
           expect(el.querySelectorAll('.js-line-expansion-content').length).toBe(1);
+          triggerEvent('.btn-clipboard');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('should track a click event on copy to clip board button', done => {
+      const el = vm.$el;
+
+      expect(el.querySelector('.btn-clipboard')).toBeDefined();
+      vm.file.renderIt = true;
+      vm.$nextTick()
+        .then(() => {
+          triggerEvent('.btn-clipboard');
+
+          expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_copy_file_button', {
+            label: 'diff_copy_file_path_button',
+            property: 'diff_copy_file',
+          });
         })
         .then(done)
         .catch(done.fail);