Add UTC setting for the date time picker

Users sometimes want to see the data in UTC format, this adds
a "utc" prop so the date time picker can support UTC mode rendering.

Some handling of dates had to change to make this change possible.

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

 <script>
-import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
+import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
 
-import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import DateTimePickerInput from './date_time_picker_input.vue';
 import {
   defaultTimeRanges,
   defaultTimeRange,
-  isValidDate,
-  stringToISODate,
-  ISODateToString,
-  truncateZerosInDateTime,
-  isDateTimePickerInputValid,
+  isValidInputString,
+  inputStringToIsoDate,
+  isoDateToInputString,
 } from './date_time_picker_lib';
 
 const events = {
@@ -24,13 +21,13 @@ const events = {
 
 export default {
   components: {
-    Icon,
-    TooltipOnTruncate,
-    DateTimePickerInput,
-    GlFormGroup,
+    GlIcon,
     GlDeprecatedButton,
     GlDropdown,
     GlDropdownItem,
+    GlFormGroup,
+    TooltipOnTruncate,
+    DateTimePickerInput,
   },
   props: {
     value: {
@@ -48,20 +45,41 @@ export default {
       required: false,
       default: true,
     },
+    utc: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       timeRange: this.value,
-      startDate: '',
-      endDate: '',
+
+      /**
+       * Valid start iso date string, null if not valid value
+       */
+      startDate: null,
+      /**
+       * Invalid start date string as input by the user
+       */
+      startFallbackVal: '',
+
+      /**
+       * Valid end iso date string, null if not valid value
+       */
+      endDate: null,
+      /**
+       * Invalid end date string as input by the user
+       */
+      endFallbackVal: '',
     };
   },
   computed: {
     startInputValid() {
-      return isValidDate(this.startDate);
+      return isValidInputString(this.startDate);
     },
     endInputValid() {
-      return isValidDate(this.endDate);
+      return isValidInputString(this.endDate);
     },
     isValid() {
       return this.startInputValid && this.endInputValid;
@@ -69,21 +87,31 @@ export default {
 
     startInput: {
       get() {
-        return this.startInputValid ? this.formatDate(this.startDate) : this.startDate;
+        return this.dateToInput(this.startDate) || this.startFallbackVal;
       },
       set(val) {
-        // Attempt to set a formatted date if possible
-        this.startDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val;
+        try {
+          this.startDate = this.inputToDate(val);
+          this.startFallbackVal = null;
+        } catch (e) {
+          this.startDate = null;
+          this.startFallbackVal = val;
+        }
         this.timeRange = null;
       },
     },
     endInput: {
       get() {
-        return this.endInputValid ? this.formatDate(this.endDate) : this.endDate;
+        return this.dateToInput(this.endDate) || this.endFallbackVal;
       },
       set(val) {
-        // Attempt to set a formatted date if possible
-        this.endDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val;
+        try {
+          this.endDate = this.inputToDate(val);
+          this.endFallbackVal = null;
+        } catch (e) {
+          this.endDate = null;
+          this.endFallbackVal = val;
+        }
         this.timeRange = null;
       },
     },
@@ -96,10 +124,10 @@ export default {
         }
 
         const { start, end } = convertToFixedRange(this.value);
-        if (isValidDate(start) && isValidDate(end)) {
+        if (isValidInputString(start) && isValidInputString(end)) {
           return sprintf(__('%{start} to %{end}'), {
-            start: this.formatDate(start),
-            end: this.formatDate(end),
+            start: this.stripZerosInDateTime(this.dateToInput(start)),
+            end: this.stripZerosInDateTime(this.dateToInput(end)),
           });
         }
       } catch {
@@ -107,6 +135,13 @@ export default {
       }
       return '';
     },
+
+    customLabel() {
+      if (this.utc) {
+        return __('Custom range (UTC)');
+      }
+      return __('Custom range');
+    },
   },
   watch: {
     value(newValue) {
@@ -132,8 +167,17 @@ export default {
     }
   },
   methods: {
-    formatDate(date) {
-      return truncateZerosInDateTime(ISODateToString(date));
+    dateToInput(date) {
+      if (date === null) {
+        return null;
+      }
+      return isoDateToInputString(date, this.utc);
+    },
+    inputToDate(value) {
+      return inputStringToIsoDate(value, this.utc);
+    },
+    stripZerosInDateTime(str = '') {
+      return str.replace(' 00:00:00', '');
     },
     closeDropdown() {
       this.$refs.dropdown.hide();
@@ -169,10 +213,16 @@ export default {
       menu-class="date-time-picker-menu"
       toggle-class="date-time-picker-toggle text-truncate"
     >
+      <template #button-content>
+        <span class="gl-flex-grow-1 text-truncate">{{ timeWindowText }}</span>
+        <span v-if="utc" class="text-muted gl-font-weight-bold gl-font-sm">{{ __('UTC') }}</span>
+        <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
+      </template>
+
       <div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
         <gl-form-group
           v-if="customEnabled"
-          :label="__('Custom range')"
+          :label="customLabel"
           label-for="custom-from-time"
           label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
           class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
@@ -214,7 +264,7 @@ export default {
             active-class="active"
             @click="setQuickRange(option)"
           >
-            <icon
+            <gl-icon
               name="mobile-issue-close"
               class="align-bottom"
               :class="{ invisible: !isOptionActive(option) }"

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_input.vue

@@ -6,9 +6,9 @@ import { dateFormats } from './date_time_picker_lib';
 
 const inputGroupText = {
   invalidFeedback: sprintf(__('Format: %{dateFormat}'), {
-    dateFormat: dateFormats.stringDate,
+    dateFormat: dateFormats.inputFormat,
   }),
-  placeholder: dateFormats.stringDate,
+  placeholder: dateFormats.inputFormat,
 };
 
 export default {

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker_lib.js

 import dateformat from 'dateformat';
 import { __ } from '~/locale';
 
-/**
- * Valid strings for this regex are
- * 2019-10-01 and 2019-10-01 01:02:03
- */
-const dateTimePickerRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])(?: (0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]))?$/;
-
 /**
  * Default time ranges for the date picker.
  * @see app/assets/javascripts/lib/utils/datetime_range.js
@@ -34,23 +28,33 @@ export const defaultTimeRanges = [
 export const defaultTimeRange = defaultTimeRanges.find(tr => tr.default);
 
 export const dateFormats = {
-  ISODate: "yyyy-mm-dd'T'HH:MM:ss'Z'",
-  stringDate: 'yyyy-mm-dd HH:MM:ss',
+  /**
+   * Format used by users to input dates
+   *
+   * Note: Should be a format that can be parsed by Date.parse.
+   */
+  inputFormat: 'yyyy-mm-dd HH:MM:ss',
+  /**
+   * Format used to strip timezone from inputs
+   */
+  stripTimezoneFormat: "yyyy-mm-dd'T'HH:MM:ss'Z'",
 };
 
 /**
- * The URL params start and end need to be validated
- * before passing them down to other components.
+ * Returns true if the date can be parsed succesfully after
+ * being typed by a user.
  *
- * @param {string} dateString
- * @returns true if the string is a valid date, false otherwise
+ * It allows some ambiguity so validation is not strict.
+ *
+ * @param {string} value - Value as typed by the user
+ * @returns true if the value can be parsed as a valid date, false otherwise
  */
-export const isValidDate = dateString => {
+export const isValidInputString = value => {
   try {
     // dateformat throws error that can be caught.
     // This is better than using `new Date()`
-    if (dateString && dateString.trim()) {
-      dateformat(dateString, 'isoDateTime');
+    if (value && value.trim()) {
+      dateformat(value, 'isoDateTime');
       return true;
     }
     return false;
@@ -60,25 +64,30 @@ export const isValidDate = dateString => {
 };
 
 /**
- * Convert the input in Time picker component to ISO date.
+ * Convert the input in time picker component to an ISO date.
  *
- * @param {string} val
- * @returns {string}
+ * @param {string} value
+ * @param {Boolean} utc - If true, it forces the date to by
+ * formatted using UTC format, ignoring the local time.
+ * @returns {Date}
  */
-export const stringToISODate = val =>
-  dateformat(new Date(val.replace(/-/g, '/')), dateFormats.ISODate, true);
+export const inputStringToIsoDate = (value, utc = false) => {
+  let date = new Date(value);
+  if (utc) {
+    // Forces date to be interpreted as UTC by stripping the timezone
+    // by formatting to a string with 'Z' and skipping timezone
+    date = dateformat(date, dateFormats.stripTimezoneFormat);
+  }
+  return dateformat(date, 'isoUtcDateTime');
+};
 
 /**
- * Convert the ISO date received from the URL to string
- * for the Time picker component.
+ * Converts a iso date string to a formatted string for the Time picker component.
  *
- * @param {Date} date
+ * @param {String} ISO Formatted date
  * @returns {string}
  */
-export const ISODateToString = date => dateformat(date, dateFormats.stringDate);
-
-export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', '');
-
-export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val);
+export const isoDateToInputString = (date, utc = false) =>
+  dateformat(date, dateFormats.inputFormat, utc);
 
 export default {};

locale/gitlab.pot

@@ -6665,6 +6665,9 @@ msgstr ""
 msgid "Custom range"
 msgstr ""
 
+msgid "Custom range (UTC)"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Add a stage"
 msgstr ""
 
@@ -23465,6 +23468,9 @@ msgstr ""
 msgid "URL or request ID"
 msgstr ""
 
+msgid "UTC"
+msgstr ""
+
 msgid "Unable to apply suggestions to a deleted line."
 msgstr ""
 

spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js

-import * as dateTimePickerLib from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
+import timezoneMock from 'timezone-mock';
+
+import {
+  isValidInputString,
+  inputStringToIsoDate,
+  isoDateToInputString,
+} from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
 
 describe('date time picker lib', () => {
-  describe('isValidDate', () => {
+  describe('isValidInputString', () => {
     [
       {
         input: '2019-09-09T00:00:00.000Z',
@@ -48,121 +54,137 @@ describe('date time picker lib', () => {
         output: false,
       },
     ].forEach(({ input, output }) => {
-      it(`isValidDate return ${output} for ${input}`, () => {
-        expect(dateTimePickerLib.isValidDate(input)).toBe(output);
+      it(`isValidInputString return ${output} for ${input}`, () => {
+        expect(isValidInputString(input)).toBe(output);
       });
     });
   });
 
-  describe('stringToISODate', () => {
-    ['', 'null', undefined, 'abc'].forEach(input => {
+  describe('inputStringToIsoDate', () => {
+    [
+      '',
+      'null',
+      undefined,
+      'abc',
+      'xxxx-xx-xx',
+      '9999-99-19',
+      '2019-19-23',
+      '2019-09-23 x',
+      '2019-09-29 24:24:24',
+    ].forEach(input => {
       it(`throws error for invalid input like ${input}`, () => {
-        expect(() => dateTimePickerLib.stringToISODate(input)).toThrow();
+        expect(() => inputStringToIsoDate(input)).toThrow();
       });
     });
+
     [
       {
-        input: '2019-09-09 01:01:01',
-        output: '2019-09-09T01:01:01Z',
+        input: '2019-09-08 01:01:01',
+        output: '2019-09-08T01:01:01Z',
       },
       {
-        input: '2019-09-09 00:00:00',
-        output: '2019-09-09T00:00:00Z',
+        input: '2019-09-08 00:00:00',
+        output: '2019-09-08T00:00:00Z',
       },
       {
-        input: '2019-09-09 23:59:59',
-        output: '2019-09-09T23:59:59Z',
+        input: '2019-09-08 23:59:59',
+        output: '2019-09-08T23:59:59Z',
       },
       {
-        input: '2019-09-09',
-        output: '2019-09-09T00:00:00Z',
+        input: '2019-09-08',
+        output: '2019-09-08T00:00:00Z',
       },
-    ].forEach(({ input, output }) => {
-      it(`returns ${output} from ${input}`, () => {
-        expect(dateTimePickerLib.stringToISODate(input)).toBe(output);
-      });
-    });
-  });
-
-  describe('truncateZerosInDateTime', () => {
-    [
       {
-        input: '',
-        output: '',
+        input: '2019-09-08',
+        output: '2019-09-08T00:00:00Z',
       },
       {
-        input: '2019-10-10',
-        output: '2019-10-10',
+        input: '2019-09-08 00:00:00',
+        output: '2019-09-08T00:00:00Z',
       },
       {
-        input: '2019-10-10 00:00:01',
-        output: '2019-10-10 00:00:01',
+        input: '2019-09-08 23:24:24',
+        output: '2019-09-08T23:24:24Z',
       },
       {
-        input: '2019-10-10 00:00:00',
-        output: '2019-10-10',
+        input: '2019-09-08 0:0:0',
+        output: '2019-09-08T00:00:00Z',
       },
     ].forEach(({ input, output }) => {
-      it(`truncateZerosInDateTime return ${output} for ${input}`, () => {
-        expect(dateTimePickerLib.truncateZerosInDateTime(input)).toBe(output);
+      it(`returns ${output} from ${input}`, () => {
+        expect(inputStringToIsoDate(input)).toBe(output);
       });
     });
+
+    describe('timezone formatting', () => {
+      const value = '2019-09-08 01:01:01';
+      const utcResult = '2019-09-08T01:01:01Z';
+      const localResult = '2019-09-08T08:01:01Z';
+
+      test.each`
+        val      | locatTimezone   | utc          | result
+        ${value} | ${'UTC'}        | ${undefined} | ${utcResult}
+        ${value} | ${'UTC'}        | ${false}     | ${utcResult}
+        ${value} | ${'UTC'}        | ${true}      | ${utcResult}
+        ${value} | ${'US/Pacific'} | ${undefined} | ${localResult}
+        ${value} | ${'US/Pacific'} | ${false}     | ${localResult}
+        ${value} | ${'US/Pacific'} | ${true}      | ${utcResult}
+      `(
+        'when timezone is $locatTimezone, formats $result for utc = $utc',
+        ({ val, locatTimezone, utc, result }) => {
+          timezoneMock.register(locatTimezone);
+
+          expect(inputStringToIsoDate(val, utc)).toBe(result);
+
+          timezoneMock.unregister();
+        },
+      );
+    });
   });
 
-  describe('isDateTimePickerInputValid', () => {
+  describe('isoDateToInputString', () => {
     [
       {
-        input: null,
-        output: false,
-      },
-      {
-        input: '',
-        output: false,
+        input: '2019-09-08T01:01:01Z',
+        output: '2019-09-08 01:01:01',
       },
       {
-        input: 'xxxx-xx-xx',
-        output: false,
+        input: '2019-09-08T01:01:01.999Z',
+        output: '2019-09-08 01:01:01',
       },
       {
-        input: '9999-99-19',
-        output: false,
-      },
-      {
-        input: '2019-19-23',
-        output: false,
-      },
-      {
-        input: '2019-09-23',
-        output: true,
-      },
-      {
-        input: '2019-09-23 x',
-        output: false,
-      },
-      {
-        input: '2019-09-29 0:0:0',
-        output: false,
-      },
-      {
-        input: '2019-09-29 00:00:00',
-        output: true,
-      },
-      {
-        input: '2019-09-29 24:24:24',
-        output: false,
-      },
-      {
-        input: '2019-09-29 23:24:24',
-        output: true,
-      },
-      {
-        input: '2019-09-29 23:24:24 ',
-        output: false,
+        input: '2019-09-08T00:00:00Z',
+        output: '2019-09-08 00:00:00',
       },
     ].forEach(({ input, output }) => {
       it(`returns ${output} for ${input}`, () => {
-        expect(dateTimePickerLib.isDateTimePickerInputValid(input)).toBe(output);
+        expect(isoDateToInputString(input)).toBe(output);
       });
     });
+
+    describe('timezone formatting', () => {
+      const value = '2019-09-08T08:01:01Z';
+      const utcResult = '2019-09-08 08:01:01';
+      const localResult = '2019-09-08 01:01:01';
+
+      test.each`
+        val      | locatTimezone   | utc          | result
+        ${value} | ${'UTC'}        | ${undefined} | ${utcResult}
+        ${value} | ${'UTC'}        | ${false}     | ${utcResult}
+        ${value} | ${'UTC'}        | ${true}      | ${utcResult}
+        ${value} | ${'US/Pacific'} | ${undefined} | ${localResult}
+        ${value} | ${'US/Pacific'} | ${false}     | ${localResult}
+        ${value} | ${'US/Pacific'} | ${true}      | ${utcResult}
+      `(
+        'when timezone is $locatTimezone, formats $result for utc = $utc',
+        ({ val, locatTimezone, utc, result }) => {
+          timezoneMock.register(locatTimezone);
+
+          expect(isoDateToInputString(val, utc)).toBe(result);
+
+          timezoneMock.unregister();
+        },
+      );
+    });
   });
 });