Merge branch...

Merge branch '333944-add-snowplow-tracking-to-audit-events-date-range-segmented-control' into 'master'

Add Snowplow tracking to audit events date range segmented control

See merge request gitlab-org/gitlab!66443

ee/app/assets/javascripts/audit_events/components/date_range_buttons.vue

 <script>
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { datesMatch, dateAtFirstDayOfMonth, getDateInPast } from '~/lib/utils/datetime_utility';
+import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import { n__, s__ } from '~/locale';
 import { CURRENT_DATE } from '../constants';
 
@@ -41,6 +42,9 @@ export default {
       const { dateRange } = this;
       return datesMatch(startDate, dateRange.startDate) && datesMatch(endDate, dateRange.endDate);
     },
+    trackingLabel({ text }) {
+      return `date_range_button_${convertToSnakeCase(text)}`;
+    },
   },
   DATE_RANGE_OPTIONS,
 };
@@ -52,6 +56,8 @@ export default {
       v-for="(dateRangeOption, idx) in $options.DATE_RANGE_OPTIONS"
       :key="idx"
       :selected="isCurrentDateRange(dateRangeOption)"
+      data-track-action="click_date_range_button"
+      :data-track-label="trackingLabel(dateRangeOption)"
       @click="onDateRangeClicked(dateRangeOption)"
       >{{ dateRangeOption.text }}</gl-button
     >

ee/config/events/admin_audit_logs_index_click_date_range_button.yml

+---
+description: Clicks a date range button in audit events
+category: admin:audit_logs:index
+action: click_date_range_button
+label_description: Notes which date range was selected
+property_description:
+value_description:
+extra_properties:
+identifiers:
+product_section: dev
+product_stage: manage
+product_group: compliance
+product_category: audit_events
+milestone: "14.2"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/66443
+distributions:
+- ee
+tiers:
+- premium
+

ee/spec/frontend/audit_events/components/date_range_buttons_spec.js

 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-
 import DateRangeButtons from 'ee/audit_events/components/date_range_buttons.vue';
 import { CURRENT_DATE } from 'ee/audit_events/constants';
 import { getDateInPast } from '~/lib/utils/datetime_utility';
@@ -14,9 +13,24 @@ describe('DateRangeButtons component', () => {
     });
   };
 
+  const findButtonGroup = () => wrapper.findComponent(GlButtonGroup);
+  const findButtons = (f) => findButtonGroup().findAllComponents(GlButton).filter(f);
+  const findSelectedButtons = () => findButtons((b) => b.props('selected'));
+  const findUnSelectedButtons = () => findButtons((b) => !b.props('selected'));
+
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
+  });
+
+  it('sets the tracking data on the button', () => {
+    createComponent({
+      dateRange: { startDate: getDateInPast(CURRENT_DATE, 7), endDate: CURRENT_DATE },
+    });
+
+    expect(findSelectedButtons().at(0).attributes()).toMatchObject({
+      'data-track-action': 'click_date_range_button',
+      'data-track-label': 'date_range_button_last_7_days',
+    });
   });
 
   it('shows the selected the option that matches the provided dateRange property', () => {
@@ -24,7 +38,7 @@ describe('DateRangeButtons component', () => {
       dateRange: { startDate: getDateInPast(CURRENT_DATE, 7), endDate: CURRENT_DATE },
     });
 
-    expect(wrapper.find(GlButtonGroup).find('[selected="true"]').text()).toBe('Last 7 days');
+    expect(findSelectedButtons().at(0).text()).toBe('Last 7 days');
   });
 
   it('shows no date range as selected when the dateRange property does not match any option', () => {
@@ -35,19 +49,19 @@ describe('DateRangeButtons component', () => {
       },
     });
 
-    expect(wrapper.find(GlButtonGroup).find('[selected="true"]').exists()).toBe(false);
+    expect(findSelectedButtons()).toHaveLength(0);
   });
 
   it('emits an "input" event with the dateRange when a new date range is selected', async () => {
     createComponent({
-      dateRange: { startDate: getDateInPast(CURRENT_DATE, 1), endDate: CURRENT_DATE },
+      dateRange: { startDate: getDateInPast(CURRENT_DATE, 7), endDate: CURRENT_DATE },
     });
-    wrapper.find(GlButtonGroup).find(GlButton).vm.$emit('click');
+    findUnSelectedButtons().at(0).vm.$emit('click');
 
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted().input[0]).toEqual([
       {
-        startDate: getDateInPast(CURRENT_DATE, 7),
+        startDate: getDateInPast(CURRENT_DATE, 14),
         endDate: CURRENT_DATE,
       },
     ]);