CE backport of Add Snowplow tracking to notes

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

app/assets/javascripts/event_tracking/notes.js

@@ -0,0 +1 @@
+export default () => {};

app/assets/javascripts/lib/utils/text_utility.js

@@ -50,6 +50,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
  *

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) }}

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: {

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');