diff --git a/app/assets/javascripts/notes/components/mr_discussion_filter.vue b/app/assets/javascripts/notes/components/mr_discussion_filter.vue index a98e5975c27043f5f8d6b561889484481d53e2b2..13fa3dee5f3081f7851074afc2250e8f6ebf3d2e 100644 --- a/app/assets/javascripts/notes/components/mr_discussion_filter.vue +++ b/app/assets/javascripts/notes/components/mr_discussion_filter.vue @@ -5,7 +5,16 @@ 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, MR_FILTER_TRACKING_OPENED } from '~/notes/constants'; +import { + MR_FILTER_OPTIONS, + MR_FILTER_TRACKING_OPENED, + MR_FILTER_TRACKING_USER_COMMENTS, +} from '~/notes/constants'; + +const filterOptionToTrackingEventMap = { + comments: MR_FILTER_TRACKING_USER_COMMENTS, +}; +const allFilters = MR_FILTER_OPTIONS.map((f) => f.value); export default { components: { @@ -19,7 +28,8 @@ export default { mixins: [InternalEvents.mixin()], data() { return { - selectedFilters: MR_FILTER_OPTIONS.map((f) => f.value), + selectedFilters: allFilters, + previousFilters: allFilters, }; }, computed: { @@ -62,18 +72,43 @@ export default { filterListShown() { this.trackEvent(MR_FILTER_TRACKING_OPENED); }, + trackDropdownSelection(selectedItem) { + const trackingEvent = filterOptionToTrackingEventMap[selectedItem]; + + if (trackingEvent) { + this.trackEvent(trackingEvent); + } + }, applyFilters() { this.updateMergeRequestFilters(this.selectedFilters); }, localSyncFilters(filters) { this.updateMergeRequestFilters(filters); this.selectedFilters = filters; + this.previousFilters = filters; }, deselectAll() { this.selectedFilters = []; + this.previousFilters = []; }, selectAll() { - this.selectedFilters = MR_FILTER_OPTIONS.map((f) => f.value); + this.selectedFilters = allFilters; + this.previousFilters = allFilters; + }, + select(allSelectedFilters) { + const removedFilters = this.previousFilters.filter( + (filterValue) => !allSelectedFilters.includes(filterValue), + ); + const addedFilters = allSelectedFilters.filter( + (filterValue) => !this.previousFilters.includes(filterValue), + ); + const allInteractedItems = removedFilters.concat(addedFilters); + + allInteractedItems.forEach((filterValue) => { + this.trackDropdownSelection(filterValue); + }); + + this.previousFilters = allSelectedFilters; }, }, MR_FILTER_OPTIONS, @@ -106,6 +141,7 @@ export default { @hidden="applyFilters" @reset="deselectAll" @select-all="selectAll" + @select="select" >