diff --git a/app/assets/javascripts/notes/components/mr_discussion_filter.vue b/app/assets/javascripts/notes/components/mr_discussion_filter.vue index 4d78a888be70569210ab92193daaa71944a328c1..a98e5975c27043f5f8d6b561889484481d53e2b2 100644 --- a/app/assets/javascripts/notes/components/mr_discussion_filter.vue +++ b/app/assets/javascripts/notes/components/mr_discussion_filter.vue @@ -2,9 +2,10 @@ import { GlCollapsibleListbox, GlButton, GlIcon, GlSprintf, GlButtonGroup } from '@gitlab/ui'; // eslint-disable-next-line no-restricted-imports import { mapActions, mapState } from 'vuex'; +import { InternalEvents } from '~/tracking'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { __ } from '~/locale'; -import { MR_FILTER_OPTIONS } from '~/notes/constants'; +import { MR_FILTER_OPTIONS, MR_FILTER_TRACKING_OPENED } from '~/notes/constants'; export default { components: { @@ -15,6 +16,7 @@ export default { GlSprintf, LocalStorageSync, }, + mixins: [InternalEvents.mixin()], data() { return { selectedFilters: MR_FILTER_OPTIONS.map((f) => f.value), @@ -57,6 +59,9 @@ export default { direction: this.isSortAsc ? 'desc' : 'asc', }); }, + filterListShown() { + this.trackEvent(MR_FILTER_TRACKING_OPENED); + }, applyFilters() { this.updateMergeRequestFilters(this.selectedFilters); }, @@ -97,6 +102,7 @@ export default { :reset-button-label="__('Deselect all')" multiple placement="right" + @shown="filterListShown" @hidden="applyFilters" @reset="deselectAll" @select-all="selectAll" diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js index 153834ea9e4c590bbae9550b2a4b8e342aa6cbb3..32923d56c7964cbbfa1acc680e67f94e25c892bc 100644 --- a/app/assets/javascripts/notes/constants.js +++ b/app/assets/javascripts/notes/constants.js @@ -127,3 +127,4 @@ export const MR_FILTER_OPTIONS = [ systemNoteIcons: ['timer'], }, ]; +export const MR_FILTER_TRACKING_OPENED = 'user_clicks_comment_filter_dropdown'; diff --git a/config/events/user_clicks_comment_filter_dropdown.yml b/config/events/user_clicks_comment_filter_dropdown.yml new file mode 100644 index 0000000000000000000000000000000000000000..5df8dc097e746c26faa1f4d5b9439c9525a73955 --- /dev/null +++ b/config/events/user_clicks_comment_filter_dropdown.yml @@ -0,0 +1,20 @@ +--- +description: A user clicks the merge request comment filter dropdown +category: InternalEventTracking +action: user_clicks_comment_filter_dropdown +identifiers: +- project +- namespace +- user +product_section: dev +product_stage: create +product_group: code_review +milestone: '16.10' +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145998 +distributions: +- ce +- ee +tiers: +- free +- premium +- ultimate diff --git a/config/metrics/counts_28d/count_distinct_user_id_from_user_clicks_comment_filter_dropdown_monthly.yml b/config/metrics/counts_28d/count_distinct_user_id_from_user_clicks_comment_filter_dropdown_monthly.yml new file mode 100644 index 0000000000000000000000000000000000000000..7353cc2838a03a8bd487c3d501c82dfe50359123 --- /dev/null +++ b/config/metrics/counts_28d/count_distinct_user_id_from_user_clicks_comment_filter_dropdown_monthly.yml @@ -0,0 +1,24 @@ +--- +key_path: redis_hll_counters.count_distinct_user_id_from_user_clicks_comment_filter_dropdown_monthly +description: Monthly count of unique users who opened the MR comment filter dropdown +product_section: dev +product_stage: create +product_group: code_review +performance_indicator_type: [] +value_type: number +status: active +milestone: '16.10' +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145998 +time_frame: 28d +data_source: internal_events +data_category: optional +distribution: +- ce +- ee +tier: +- free +- premium +- ultimate +events: +- name: user_clicks_comment_filter_dropdown + unique: user.id diff --git a/config/metrics/counts_28d/count_total_user_clicks_comment_filter_dropdown_monthly.yml b/config/metrics/counts_28d/count_total_user_clicks_comment_filter_dropdown_monthly.yml new file mode 100644 index 0000000000000000000000000000000000000000..89ebc58582ce293614d2884ce9b7c4b2bd255163 --- /dev/null +++ b/config/metrics/counts_28d/count_total_user_clicks_comment_filter_dropdown_monthly.yml @@ -0,0 +1,23 @@ +--- +key_path: counts.count_total_user_clicks_comment_filter_dropdown_monthly +description: Monthly count of times the MR comment filter dropdown is opened +product_section: dev +product_stage: create +product_group: code_review +performance_indicator_type: [] +value_type: number +status: active +milestone: '16.10' +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145998 +time_frame: 28d +data_source: internal_events +data_category: optional +distribution: +- ce +- ee +tier: +- free +- premium +- ultimate +events: +- name: user_clicks_comment_filter_dropdown diff --git a/config/metrics/counts_7d/count_distinct_user_id_from_user_clicks_comment_filter_dropdown_weekly.yml b/config/metrics/counts_7d/count_distinct_user_id_from_user_clicks_comment_filter_dropdown_weekly.yml new file mode 100644 index 0000000000000000000000000000000000000000..05fa3679c93bbe526ada26241e69f6406a0246eb --- /dev/null +++ b/config/metrics/counts_7d/count_distinct_user_id_from_user_clicks_comment_filter_dropdown_weekly.yml @@ -0,0 +1,24 @@ +--- +key_path: redis_hll_counters.count_distinct_user_id_from_user_clicks_comment_filter_dropdown_weekly +description: Weekly count of unique users who opened the MR comment filter dropdown +product_section: dev +product_stage: create +product_group: code_review +performance_indicator_type: [] +value_type: number +status: active +milestone: '16.10' +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145998 +time_frame: 7d +data_source: internal_events +data_category: optional +distribution: +- ce +- ee +tier: +- free +- premium +- ultimate +events: +- name: user_clicks_comment_filter_dropdown + unique: user.id diff --git a/config/metrics/counts_7d/count_total_user_clicks_comment_filter_dropdown_weekly.yml b/config/metrics/counts_7d/count_total_user_clicks_comment_filter_dropdown_weekly.yml new file mode 100644 index 0000000000000000000000000000000000000000..7d40822ea0e8a33b2e035aa19aba508b836ae41f --- /dev/null +++ b/config/metrics/counts_7d/count_total_user_clicks_comment_filter_dropdown_weekly.yml @@ -0,0 +1,23 @@ +--- +key_path: counts.count_total_user_clicks_comment_filter_dropdown_weekly +description: Weekly count of times the MR comment filter dropdown is opened +product_section: dev +product_stage: create +product_group: code_review +performance_indicator_type: [] +value_type: number +status: active +milestone: '16.10' +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145998 +time_frame: 7d +data_source: internal_events +data_category: optional +distribution: +- ce +- ee +tier: +- free +- premium +- ultimate +events: +- name: user_clicks_comment_filter_dropdown diff --git a/spec/frontend/notes/components/mr_discussion_filter_spec.js b/spec/frontend/notes/components/mr_discussion_filter_spec.js index 73fd6da811dfaf5faa92b331779c4ce7eba5de49..a01c886381a921a1c1f480c7dce33c09eccdc06d 100644 --- a/spec/frontend/notes/components/mr_discussion_filter_spec.js +++ b/spec/frontend/notes/components/mr_discussion_filter_spec.js @@ -3,8 +3,9 @@ import { GlCollapsibleListbox, GlListboxItem, GlButton } from '@gitlab/ui'; import Vue, { nextTick } from 'vue'; // eslint-disable-next-line no-restricted-imports import Vuex from 'vuex'; +import { mockTracking } from 'helpers/tracking_helper'; import DiscussionFilter from '~/notes/components/mr_discussion_filter.vue'; -import { MR_FILTER_OPTIONS } from '~/notes/constants'; +import { MR_FILTER_OPTIONS, MR_FILTER_TRACKING_OPENED } from '~/notes/constants'; Vue.use(Vuex); @@ -135,4 +136,23 @@ describe('Merge request discussion filter component', () => { expect(wrapper.findAll('[aria-selected="true"]')).toHaveLength(11); }); + + describe('instrumentation', () => { + let trackingSpy; + + beforeEach(() => { + trackingSpy = mockTracking(undefined, window.document, jest.spyOn); + createComponent(); + }); + + it('tracks overall opens of the filter dropdown', () => { + wrapper.findComponent(GlCollapsibleListbox).vm.$emit('shown'); + + expect(trackingSpy).toHaveBeenCalledWith( + undefined, + MR_FILTER_TRACKING_OPENED, + expect.any(Object), + ); + }); + }); });