CE backport of Add Snowplow tracking to notes

Bacport of Snowplow tracking for
- Reply comment button
- Start discussion and Comment buttons

5 files changed, 27 insertions, 0 deletions

diff --git a/app/assets/javascripts/event_tracking/notes.js b/app/assets/javascripts/event_tracking/notes.js
new file mode 100644
index 00000000000..2d1ec238274
--- /dev/null
+++ b/app/assets/javascripts/event_tracking/notes.js
@@ -0,0 +1 @@
+export default () => {};
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 3f5fc5dd306..cc1d85fd97d 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -51,6 +51,13 @@ export const dasherize = str => str.replace(/[_\s]+/g, '-');
 export const slugifyWithHyphens = str => str.toLowerCase().replace(/\s+/g, '-');
 
 /**
+ * Replaces whitespaces with underscore and converts to lower case
+ * @param {String} str
+ * @returns {String}
+ */
+export const slugifyWithUnderscore = str => str.toLowerCase().replace(/\s+/g, '_');
+
+/**
  * Truncates given text
  *
  * @param {String} string
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index b30d7fa9b73..caf22f71bf9 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -11,6 +11,7 @@ import {
   capitalizeFirstCharacter,
   convertToCamelCase,
   splitCamelCase,
+  slugifyWithUnderscore,
 } from '../../lib/utils/text_utility';
 import * as constants from '../constants';
 import eventHub from '../event_hub';
@@ -129,6 +130,9 @@ export default {
         ? 'merge request'
         : 'issue';
     },
+    trackingLabel() {
+      return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
+    },
   },
   watch: {
     note(newNote) {
@@ -370,6 +374,8 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                   class="btn btn-success js-comment-button js-comment-submit-button
                     qa-comment-button"
                   type="submit"
+                  :data-track-label="trackingLabel"
+                  data-track-event="click_button"
                   @click.prevent="handleSave()"
                 >
                   {{ __(commentButtonTitle) }}
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 30372103590..57dd1c5cab2 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import { isEE } from '~/lib/utils/common_utils';
+import initNoteStats from 'ee_else_ce/event_tracking/notes';
 import notesApp from './components/notes_app.vue';
 import initDiscussionFilters from './discussion_filters';
 import createStore from './stores';
@@ -38,6 +40,11 @@ document.addEventListener('DOMContentLoaded', () => {
         notesData: JSON.parse(notesDataset.notesData),
       };
     },
+    mounted() {
+      if (isEE) {
+        initNoteStats();
+      }
+    },
     render(createElement) {
       return createElement('notes-app', {
         props: {
diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js
index a63631e09d2..0878c1de095 100644
--- a/spec/frontend/lib/utils/text_utility_spec.js
+++ b/spec/frontend/lib/utils/text_utility_spec.js
@@ -144,6 +144,12 @@ describe('text_utility', () => {
     });
   });
 
+  describe('slugifyWithUnderscore', () => {
+    it('should replaces whitespaces with underscore and convert to lower case', () => {
+      expect(textUtils.slugifyWithUnderscore('My Input String')).toEqual('my_input_string');
+    });
+  });
+
   describe('truncateNamespace', () => {
     it(`should return the root namespace if the namespace only includes one level`, () => {
       expect(textUtils.truncateNamespace('a / b')).toBe('a');