Update audit events filter date range

This updates the audit events date range to
set a startDate when only a endDate has been
selected.

It also fixes the issue where date range buttons
are not selected due to the dates not matching.

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

 <script>
 import { GlDaterangePicker } from '@gitlab/ui';
-import { dateAtFirstDayOfMonth } from '~/lib/utils/datetime_utility';
+import { dateAtFirstDayOfMonth, getDateInPast } from '~/lib/utils/datetime_utility';
 import { CURRENT_DATE, MAX_DATE_RANGE } from '../constants';
 import DateRangeButtons from './date_range_buttons.vue';
 
@@ -33,8 +33,12 @@ export default {
     },
   },
   methods: {
-    onInput(dates) {
-      this.$emit('selected', dates);
+    onInput({ startDate, endDate }) {
+      if (!startDate && endDate) {
+        this.$emit('selected', { startDate: getDateInPast(endDate, 1), endDate });
+      } else {
+        this.$emit('selected', { startDate, endDate });
+      }
     },
   },
   CURRENT_DATE,
@@ -55,6 +59,7 @@ export default {
       :default-end-date="defaultEndDate"
       :default-max-date="$options.CURRENT_DATE"
       :max-date-range="$options.MAX_DATE_RANGE"
+      :same-day-selection="true"
       start-picker-class="gl-mb-5 gl-pr-5 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-flex-fill-1"
       end-picker-class="gl-mb-5 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-flex-fill-1"
       @input="onInput"

ee/app/assets/javascripts/audit_events/constants.js

@@ -59,4 +59,5 @@ export const AVAILABLE_TOKEN_TYPES = AUDIT_FILTER_CONFIGS.map(token => token.typ
 
 export const MAX_DATE_RANGE = 31;
 
-export const CURRENT_DATE = new Date();
+// This creates a date with zero time, making it simpler to match to the query date values
+export const CURRENT_DATE = new Date(new Date().toDateString());

ee/changelogs/unreleased/jl-update-audit-events-filter-date-range.yml

+---
+title: Update the audit events filter to have a fallback starting date
+merge_request: 44005
+author:
+type: changed

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

@@ -4,7 +4,11 @@ import { GlDaterangePicker } from '@gitlab/ui';
 import DateRangeButtons from 'ee/audit_events/components/date_range_buttons.vue';
 import DateRangeField from 'ee/audit_events/components/date_range_field.vue';
 import { CURRENT_DATE, MAX_DATE_RANGE } from 'ee/audit_events/constants';
-import { dateAtFirstDayOfMonth, parsePikadayDate } from '~/lib/utils/datetime_utility';
+import {
+  dateAtFirstDayOfMonth,
+  getDateInPast,
+  parsePikadayDate,
+} from '~/lib/utils/datetime_utility';
 
 describe('DateRangeField component', () => {
   let wrapper;
@@ -73,6 +77,21 @@ describe('DateRangeField component', () => {
     });
   });
 
+  describe('when a only a endDate is picked', () => {
+    it('emits the "selected" event with the picked endDate and startDate set to the day before', async () => {
+      createComponent();
+      findDatePicker().vm.$emit('input', { endDate });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted().selected[0]).toEqual([
+        {
+          startDate: getDateInPast(endDate, 1),
+          endDate,
+        },
+      ]);
+    });
+  });
+
   describe('when a new date range is picked', () => {
     it('emits the "selected" event with the picked startDate and endDate', async () => {
       createComponent();