Adds snowplow to audit events date range buttons

This adds the tracking data attributes to the audit events date range
buttons. This will be picked up by snowplow and used to determine if the
buttons are actually used

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,
       },
     ]);