Use dashboard date filters on UTC date

app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js

@@ -730,3 +730,13 @@ export const getTimeRemainingInWords = (date) => {
   const years = dateInFuture.getFullYear() - today.getFullYear();
   return n__('1 year remaining', '%d years remaining', years);
 };
+
+/**
+ * Returns the current date according to UTC time at midnight
+ * @return {Date} The current date in UTC
+ */
+export const getCurrentUtcDate = () => {
+  const now = new Date();
+
+  return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+};

ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/constants.js

-import { __, n__, sprintf } from '~/locale';
-import { getDateInPast } from '~/lib/utils/datetime_utility';
+import { __, n__, s__, sprintf } from '~/locale';
+import { getDateInPast, getCurrentUtcDate } from '~/lib/utils/datetime_utility';
 
-export const TODAY = new Date();
+export const TODAY = getCurrentUtcDate();
 
 export const CUSTOM_DATE_RANGE_KEY = 'custom';
 
@@ -47,5 +47,8 @@ export const I18N_DATE_RANGE_FILTER_TOOLTIP = (dateRangeLimit = 0) =>
   n__('Date range limited to %d day', 'Date range limited to %d days', dateRangeLimit);
 export const I18N_DATE_RANGE_FILTER_TO = __('To');
 export const I18N_DATE_RANGE_FILTER_FROM = __('From');
+export const I18N_DATE_RANGE_TIMEZONE_TOOLTIP = s__(
+  'Analytics|Dates and times are displayed in the UTC timezone',
+);
 
 export const DEFAULT_SELECTED_OPTION_INDEX = 1;

ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/date_range_filter.vue

 <script>
-import { GlDaterangePicker, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlDaterangePicker,
+  GlDropdown,
+  GlDropdownItem,
+  GlIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { dateRangeOptionToFilter, getDateRangeOption } from '../utils';
 import {
   TODAY,
@@ -8,6 +14,7 @@ import {
   I18N_DATE_RANGE_FILTER_TOOLTIP,
   I18N_DATE_RANGE_FILTER_TO,
   I18N_DATE_RANGE_FILTER_FROM,
+  I18N_DATE_RANGE_TIMEZONE_TOOLTIP,
 } from './constants';
 
 export default {
@@ -16,6 +23,10 @@ export default {
     GlDaterangePicker,
     GlDropdown,
     GlDropdownItem,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     defaultOption: {
@@ -83,6 +94,7 @@ export default {
   },
   I18N_DATE_RANGE_FILTER_TO,
   I18N_DATE_RANGE_FILTER_FROM,
+  I18N_DATE_RANGE_TIMEZONE_TOOLTIP,
   DATE_RANGE_OPTIONS,
   TODAY,
 };
@@ -113,5 +125,11 @@ export default {
       :tooltip="dateRangeTooltip"
       same-day-selection
     />
+    <gl-icon
+      v-gl-tooltip
+      :title="$options.I18N_DATE_RANGE_TIMEZONE_TOOLTIP"
+      name="information-o"
+      class="gl-align-self-center gl-text-gray-500"
+    />
   </div>
 </template>

ee/spec/frontend/vue_shared/components/customizable_dashboard/filters/date_range_filter_spec.js

-import { GlDaterangePicker, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDaterangePicker, GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DateRangeFilter from 'ee/vue_shared/components/customizable_dashboard/filters/date_range_filter.vue';
 import {
   DATE_RANGE_OPTIONS,
@@ -8,6 +9,7 @@ import {
   I18N_DATE_RANGE_FILTER_TOOLTIP,
   I18N_DATE_RANGE_FILTER_TO,
   I18N_DATE_RANGE_FILTER_FROM,
+  I18N_DATE_RANGE_TIMEZONE_TOOLTIP,
 } from 'ee/vue_shared/components/customizable_dashboard/filters/constants';
 import { dateRangeOptionToFilter } from 'ee/vue_shared/components/customizable_dashboard/utils';
 
@@ -23,6 +25,9 @@ describe('DateRangeFilter', () => {
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMountExtended(DateRangeFilter, {
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
       propsData: {
         ...props,
       },
@@ -32,6 +37,7 @@ describe('DateRangeFilter', () => {
   const findDateRangePicker = () => wrapper.findComponent(GlDaterangePicker);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findHelpIcon = () => wrapper.findComponent(GlIcon);
 
   describe('default behaviour', () => {
     beforeEach(() => {
@@ -57,6 +63,15 @@ describe('DateRangeFilter', () => {
         [dateRangeOptionToFilter(DATE_RANGE_OPTIONS[dateRangeOptionIndex])],
       ]);
     });
+
+    it('should show an icon with a tooltip explaining dates are in UTC', () => {
+      const helpIcon = findHelpIcon();
+      const tooltip = getBinding(helpIcon.element, 'gl-tooltip');
+
+      expect(helpIcon.props('name')).toBe('information-o');
+      expect(helpIcon.attributes('title')).toBe(I18N_DATE_RANGE_TIMEZONE_TOOLTIP);
+      expect(tooltip).toBeDefined();
+    });
   });
 
   describe('with a default option', () => {

locale/gitlab.pot

@@ -5278,6 +5278,9 @@ msgstr ""
 msgid "Analytics|Data Table"
 msgstr ""
+msgid "Analytics|Dates and times are displayed in the UTC timezone"
+msgstr ""
+
 msgid "Analytics|Edit"
 msgstr ""

spec/frontend/lib/utils/datetime/date_calculation_utility_spec.js

 import {
   getDateWithUTC,
+  getCurrentUtcDate,
   newDateAsLocaleTime,
   nSecondsAfter,
   nSecondsBefore,
@@ -84,3 +85,11 @@ describe('isToday', () => {
     });
   });
 });
+
+describe('getCurrentUtcDate', () => {
+  useFakeDate(2022, 11, 5, 10, 10);
+
+  it('returns the date at midnight', () => {
+    expect(getCurrentUtcDate()).toEqual(new Date('2022-12-05T00:00:00.000Z'));
+  });
+});