Snowplow count of clicks on timeline toggle for incident comments

app/assets/javascripts/notes/components/timeline_toggle.vue

@@ -4,6 +4,8 @@ import { mapActions, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import { COMMENTS_ONLY_FILTER_VALUE, DESC } from '../constants';
 import notesEventHub from '../event_hub';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { trackToggleTimelineView } from '../utils';
 
 export const timelineEnabledTooltip = s__('Timeline|Turn timeline view off');
 export const timelineDisabledTooltip = s__('Timeline|Turn timeline view on');
@@ -14,6 +16,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    TrackEvent: TrackEventDirective,
   },
   computed: {
     ...mapGetters(['timelineEnabled', 'sortDirection']),
@@ -23,6 +26,7 @@ export default {
   },
   methods: {
     ...mapActions(['setTimelineView', 'setDiscussionSortDirection']),
+    trackToggleTimelineView,
     setSort() {
       if (this.timelineEnabled && this.sortDirection !== DESC) {
         this.setDiscussionSortDirection({ direction: DESC, persist: false });
@@ -44,6 +48,7 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip
+    v-track-event="trackToggleTimelineView(timelineEnabled)"
     icon="comments"
     size="small"
     :selected="timelineEnabled"

app/assets/javascripts/notes/utils.js

+/* eslint-disable @gitlab/require-i18n-strings */
+
+/**
+ * Tracks snowplow event when User toggles timeline view
+ * @param {Boolean} enabled that will be send as a property for the event
+ */
+export const trackToggleTimelineView = enabled => ({
+  category: 'Incident Management',
+  action: 'toggle_incident_comments_into_timeline_view',
+  label: 'Status',
+  property: enabled,
+});

changelogs/unreleased/255985-snowplow-count-timeline-toggle.yml

+---
+title: Snowplow count of clicks on timeline toggle for incident comments
+merge_request: 44487
+author:
+type: added

spec/frontend/notes/components/timeline_toggle_spec.js

@@ -7,6 +7,8 @@ import TimelineToggle, {
 } from '~/notes/components/timeline_toggle.vue';
 import createStore from '~/notes/stores';
 import { ASC, DESC } from '~/notes/constants';
+import { trackToggleTimelineView } from '~/notes/utils';
+import Tracking from '~/tracking';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -18,6 +20,7 @@ describe('Timeline toggle', () => {
 
   const createComponent = () => {
     jest.spyOn(store, 'dispatch').mockImplementation();
+    jest.spyOn(Tracking, 'event').mockImplementation();
 
     wrapper = shallowMount(TimelineToggle, {
       localVue,
@@ -39,6 +42,7 @@ describe('Timeline toggle', () => {
     }
     store.dispatch.mockReset();
     mockEvent.currentTarget.blur.mockReset();
+    Tracking.event.mockReset();
   });
 
   describe('ON state', () => {
@@ -66,6 +70,16 @@ describe('Timeline toggle', () => {
       expect(findGlButton().attributes('selected')).toBe('true');
       expect(mockEvent.currentTarget.blur).toHaveBeenCalled();
     });
+
+    it('should track Snowplow event', async () => {
+      store.state.isTimelineEnabled = true;
+      await wrapper.vm.$nextTick();
+
+      findGlButton().trigger('click');
+
+      const { category, action, label, property, value } = trackToggleTimelineView(true);
+      expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
+    });
   });
 
   describe('OFF state', () => {
@@ -89,5 +103,15 @@ describe('Timeline toggle', () => {
       expect(findGlButton().attributes('selected')).toBe(undefined);
       expect(mockEvent.currentTarget.blur).toHaveBeenCalled();
     });
+
+    it('should track Snowplow event', async () => {
+      store.state.isTimelineEnabled = false;
+      await wrapper.vm.$nextTick();
+
+      findGlButton().trigger('click');
+
+      const { category, action, label, property, value } = trackToggleTimelineView(false);
+      expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
+    });
   });
 });