Commit 5c9d9178 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '255985-snowplow-count-timeline-toggle' into 'master'

Snowplow count of clicks on timeline toggle for incident comments

See merge request gitlab-org/gitlab!44487
parents f12d9f9f 05bdf8d8
...@@ -4,6 +4,8 @@ import { mapActions, mapGetters } from 'vuex'; ...@@ -4,6 +4,8 @@ import { mapActions, mapGetters } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { COMMENTS_ONLY_FILTER_VALUE, DESC } from '../constants'; import { COMMENTS_ONLY_FILTER_VALUE, DESC } from '../constants';
import notesEventHub from '../event_hub'; 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 timelineEnabledTooltip = s__('Timeline|Turn timeline view off');
export const timelineDisabledTooltip = s__('Timeline|Turn timeline view on'); export const timelineDisabledTooltip = s__('Timeline|Turn timeline view on');
...@@ -14,6 +16,7 @@ export default { ...@@ -14,6 +16,7 @@ export default {
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
TrackEvent: TrackEventDirective,
}, },
computed: { computed: {
...mapGetters(['timelineEnabled', 'sortDirection']), ...mapGetters(['timelineEnabled', 'sortDirection']),
...@@ -23,6 +26,7 @@ export default { ...@@ -23,6 +26,7 @@ export default {
}, },
methods: { methods: {
...mapActions(['setTimelineView', 'setDiscussionSortDirection']), ...mapActions(['setTimelineView', 'setDiscussionSortDirection']),
trackToggleTimelineView,
setSort() { setSort() {
if (this.timelineEnabled && this.sortDirection !== DESC) { if (this.timelineEnabled && this.sortDirection !== DESC) {
this.setDiscussionSortDirection({ direction: DESC, persist: false }); this.setDiscussionSortDirection({ direction: DESC, persist: false });
...@@ -44,6 +48,7 @@ export default { ...@@ -44,6 +48,7 @@ export default {
<template> <template>
<gl-button <gl-button
v-gl-tooltip v-gl-tooltip
v-track-event="trackToggleTimelineView(timelineEnabled)"
icon="comments" icon="comments"
size="small" size="small"
:selected="timelineEnabled" :selected="timelineEnabled"
......
/* 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,
});
---
title: Snowplow count of clicks on timeline toggle for incident comments
merge_request: 44487
author:
type: added
...@@ -7,6 +7,8 @@ import TimelineToggle, { ...@@ -7,6 +7,8 @@ import TimelineToggle, {
} from '~/notes/components/timeline_toggle.vue'; } from '~/notes/components/timeline_toggle.vue';
import createStore from '~/notes/stores'; import createStore from '~/notes/stores';
import { ASC, DESC } from '~/notes/constants'; import { ASC, DESC } from '~/notes/constants';
import { trackToggleTimelineView } from '~/notes/utils';
import Tracking from '~/tracking';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -18,6 +20,7 @@ describe('Timeline toggle', () => { ...@@ -18,6 +20,7 @@ describe('Timeline toggle', () => {
const createComponent = () => { const createComponent = () => {
jest.spyOn(store, 'dispatch').mockImplementation(); jest.spyOn(store, 'dispatch').mockImplementation();
jest.spyOn(Tracking, 'event').mockImplementation();
wrapper = shallowMount(TimelineToggle, { wrapper = shallowMount(TimelineToggle, {
localVue, localVue,
...@@ -39,6 +42,7 @@ describe('Timeline toggle', () => { ...@@ -39,6 +42,7 @@ describe('Timeline toggle', () => {
} }
store.dispatch.mockReset(); store.dispatch.mockReset();
mockEvent.currentTarget.blur.mockReset(); mockEvent.currentTarget.blur.mockReset();
Tracking.event.mockReset();
}); });
describe('ON state', () => { describe('ON state', () => {
...@@ -66,6 +70,16 @@ describe('Timeline toggle', () => { ...@@ -66,6 +70,16 @@ describe('Timeline toggle', () => {
expect(findGlButton().attributes('selected')).toBe('true'); expect(findGlButton().attributes('selected')).toBe('true');
expect(mockEvent.currentTarget.blur).toHaveBeenCalled(); 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', () => { describe('OFF state', () => {
...@@ -89,5 +103,15 @@ describe('Timeline toggle', () => { ...@@ -89,5 +103,15 @@ describe('Timeline toggle', () => {
expect(findGlButton().attributes('selected')).toBe(undefined); expect(findGlButton().attributes('selected')).toBe(undefined);
expect(mockEvent.currentTarget.blur).toHaveBeenCalled(); 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 });
});
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment