Commit 3de45054 authored by Illya Klymov's avatar Illya Klymov

Merge branch '214370-utc-support-date-time-picker' into 'master'

Add UTC setting for the date time picker

See merge request gitlab-org/gitlab!33039
parents 3102e946 edf6f2d2
<script> <script>
import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui'; import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range'; 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 TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
import DateTimePickerInput from './date_time_picker_input.vue'; import DateTimePickerInput from './date_time_picker_input.vue';
import { import {
defaultTimeRanges, defaultTimeRanges,
defaultTimeRange, defaultTimeRange,
isValidDate, isValidInputString,
stringToISODate, inputStringToIsoDate,
ISODateToString, isoDateToInputString,
truncateZerosInDateTime,
isDateTimePickerInputValid,
} from './date_time_picker_lib'; } from './date_time_picker_lib';
const events = { const events = {
...@@ -24,13 +21,13 @@ const events = { ...@@ -24,13 +21,13 @@ const events = {
export default { export default {
components: { components: {
Icon, GlIcon,
TooltipOnTruncate,
DateTimePickerInput,
GlFormGroup,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDropdown,
GlDropdownItem, GlDropdownItem,
GlFormGroup,
TooltipOnTruncate,
DateTimePickerInput,
}, },
props: { props: {
value: { value: {
...@@ -48,20 +45,41 @@ export default { ...@@ -48,20 +45,41 @@ export default {
required: false, required: false,
default: true, default: true,
}, },
utc: {
type: Boolean,
required: false,
default: false,
},
}, },
data() { data() {
return { return {
timeRange: this.value, 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: { computed: {
startInputValid() { startInputValid() {
return isValidDate(this.startDate); return isValidInputString(this.startDate);
}, },
endInputValid() { endInputValid() {
return isValidDate(this.endDate); return isValidInputString(this.endDate);
}, },
isValid() { isValid() {
return this.startInputValid && this.endInputValid; return this.startInputValid && this.endInputValid;
...@@ -69,21 +87,31 @@ export default { ...@@ -69,21 +87,31 @@ export default {
startInput: { startInput: {
get() { get() {
return this.startInputValid ? this.formatDate(this.startDate) : this.startDate; return this.dateToInput(this.startDate) || this.startFallbackVal;
}, },
set(val) { set(val) {
// Attempt to set a formatted date if possible try {
this.startDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val; this.startDate = this.inputToDate(val);
this.startFallbackVal = null;
} catch (e) {
this.startDate = null;
this.startFallbackVal = val;
}
this.timeRange = null; this.timeRange = null;
}, },
}, },
endInput: { endInput: {
get() { get() {
return this.endInputValid ? this.formatDate(this.endDate) : this.endDate; return this.dateToInput(this.endDate) || this.endFallbackVal;
}, },
set(val) { set(val) {
// Attempt to set a formatted date if possible try {
this.endDate = isDateTimePickerInputValid(val) ? stringToISODate(val) : val; this.endDate = this.inputToDate(val);
this.endFallbackVal = null;
} catch (e) {
this.endDate = null;
this.endFallbackVal = val;
}
this.timeRange = null; this.timeRange = null;
}, },
}, },
...@@ -96,10 +124,10 @@ export default { ...@@ -96,10 +124,10 @@ export default {
} }
const { start, end } = convertToFixedRange(this.value); const { start, end } = convertToFixedRange(this.value);
if (isValidDate(start) && isValidDate(end)) { if (isValidInputString(start) && isValidInputString(end)) {
return sprintf(__('%{start} to %{end}'), { return sprintf(__('%{start} to %{end}'), {
start: this.formatDate(start), start: this.stripZerosInDateTime(this.dateToInput(start)),
end: this.formatDate(end), end: this.stripZerosInDateTime(this.dateToInput(end)),
}); });
} }
} catch { } catch {
...@@ -107,6 +135,13 @@ export default { ...@@ -107,6 +135,13 @@ export default {
} }
return ''; return '';
}, },
customLabel() {
if (this.utc) {
return __('Custom range (UTC)');
}
return __('Custom range');
},
}, },
watch: { watch: {
value(newValue) { value(newValue) {
...@@ -132,8 +167,17 @@ export default { ...@@ -132,8 +167,17 @@ export default {
} }
}, },
methods: { methods: {
formatDate(date) { dateToInput(date) {
return truncateZerosInDateTime(ISODateToString(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() { closeDropdown() {
this.$refs.dropdown.hide(); this.$refs.dropdown.hide();
...@@ -169,10 +213,16 @@ export default { ...@@ -169,10 +213,16 @@ export default {
menu-class="date-time-picker-menu" menu-class="date-time-picker-menu"
toggle-class="date-time-picker-toggle text-truncate" 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"> <div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
<gl-form-group <gl-form-group
v-if="customEnabled" v-if="customEnabled"
:label="__('Custom range')" :label="customLabel"
label-for="custom-from-time" label-for="custom-from-time"
label-class="gl-pb-1-deprecated-no-really-do-not-use-me" 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" 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 { ...@@ -214,7 +264,7 @@ export default {
active-class="active" active-class="active"
@click="setQuickRange(option)" @click="setQuickRange(option)"
> >
<icon <gl-icon
name="mobile-issue-close" name="mobile-issue-close"
class="align-bottom" class="align-bottom"
:class="{ invisible: !isOptionActive(option) }" :class="{ invisible: !isOptionActive(option) }"
......
...@@ -6,9 +6,9 @@ import { dateFormats } from './date_time_picker_lib'; ...@@ -6,9 +6,9 @@ import { dateFormats } from './date_time_picker_lib';
const inputGroupText = { const inputGroupText = {
invalidFeedback: sprintf(__('Format: %{dateFormat}'), { invalidFeedback: sprintf(__('Format: %{dateFormat}'), {
dateFormat: dateFormats.stringDate, dateFormat: dateFormats.inputFormat,
}), }),
placeholder: dateFormats.stringDate, placeholder: dateFormats.inputFormat,
}; };
export default { export default {
......
import dateformat from 'dateformat'; import dateformat from 'dateformat';
import { __ } from '~/locale'; 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. * Default time ranges for the date picker.
* @see app/assets/javascripts/lib/utils/datetime_range.js * @see app/assets/javascripts/lib/utils/datetime_range.js
...@@ -34,23 +28,33 @@ export const defaultTimeRanges = [ ...@@ -34,23 +28,33 @@ export const defaultTimeRanges = [
export const defaultTimeRange = defaultTimeRanges.find(tr => tr.default); export const defaultTimeRange = defaultTimeRanges.find(tr => tr.default);
export const dateFormats = { 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 * Returns true if the date can be parsed succesfully after
* before passing them down to other components. * being typed by a user.
* *
* @param {string} dateString * It allows some ambiguity so validation is not strict.
* @returns true if the string is a valid date, false otherwise *
* @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 { try {
// dateformat throws error that can be caught. // dateformat throws error that can be caught.
// This is better than using `new Date()` // This is better than using `new Date()`
if (dateString && dateString.trim()) { if (value && value.trim()) {
dateformat(dateString, 'isoDateTime'); dateformat(value, 'isoDateTime');
return true; return true;
} }
return false; return false;
...@@ -60,25 +64,30 @@ export const isValidDate = dateString => { ...@@ -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 * @param {string} value
* @returns {string} * @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 => export const inputStringToIsoDate = (value, utc = false) => {
dateformat(new Date(val.replace(/-/g, '/')), dateFormats.ISODate, true); 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 * Converts a iso date string to a formatted string for the Time picker component.
* for the Time picker component.
* *
* @param {Date} date * @param {String} ISO Formatted date
* @returns {string} * @returns {string}
*/ */
export const ISODateToString = date => dateformat(date, dateFormats.stringDate); export const isoDateToInputString = (date, utc = false) =>
dateformat(date, dateFormats.inputFormat, utc);
export const truncateZerosInDateTime = datetime => datetime.replace(' 00:00:00', '');
export const isDateTimePickerInputValid = val => dateTimePickerRegex.test(val);
export default {}; export default {};
...@@ -6665,6 +6665,9 @@ msgstr "" ...@@ -6665,6 +6665,9 @@ msgstr ""
msgid "Custom range" msgid "Custom range"
msgstr "" msgstr ""
msgid "Custom range (UTC)"
msgstr ""
msgid "CustomCycleAnalytics|Add a stage" msgid "CustomCycleAnalytics|Add a stage"
msgstr "" msgstr ""
...@@ -23477,6 +23480,9 @@ msgstr "" ...@@ -23477,6 +23480,9 @@ msgstr ""
msgid "URL or request ID" msgid "URL or request ID"
msgstr "" msgstr ""
msgid "UTC"
msgstr ""
msgid "Unable to apply suggestions to a deleted line." msgid "Unable to apply suggestions to a deleted line."
msgstr "" msgstr ""
......
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('date time picker lib', () => {
describe('isValidDate', () => { describe('isValidInputString', () => {
[ [
{ {
input: '2019-09-09T00:00:00.000Z', input: '2019-09-09T00:00:00.000Z',
...@@ -48,121 +54,137 @@ describe('date time picker lib', () => { ...@@ -48,121 +54,137 @@ describe('date time picker lib', () => {
output: false, output: false,
}, },
].forEach(({ input, output }) => { ].forEach(({ input, output }) => {
it(`isValidDate return ${output} for ${input}`, () => { it(`isValidInputString return ${output} for ${input}`, () => {
expect(dateTimePickerLib.isValidDate(input)).toBe(output); expect(isValidInputString(input)).toBe(output);
}); });
}); });
}); });
describe('stringToISODate', () => { describe('inputStringToIsoDate', () => {
['', 'null', undefined, 'abc'].forEach(input => { [
'',
'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}`, () => { it(`throws error for invalid input like ${input}`, () => {
expect(() => dateTimePickerLib.stringToISODate(input)).toThrow(); expect(() => inputStringToIsoDate(input)).toThrow();
}); });
}); });
[ [
{ {
input: '2019-09-09 01:01:01', input: '2019-09-08 01:01:01',
output: '2019-09-09T01:01:01Z', output: '2019-09-08T01:01:01Z',
}, },
{ {
input: '2019-09-09 00:00:00', input: '2019-09-08 00:00:00',
output: '2019-09-09T00:00:00Z', output: '2019-09-08T00:00:00Z',
}, },
{ {
input: '2019-09-09 23:59:59', input: '2019-09-08 23:59:59',
output: '2019-09-09T23:59:59Z', output: '2019-09-08T23:59:59Z',
}, },
{ {
input: '2019-09-09', input: '2019-09-08',
output: '2019-09-09T00:00:00Z', output: '2019-09-08T00:00:00Z',
}, },
].forEach(({ input, output }) => {
it(`returns ${output} from ${input}`, () => {
expect(dateTimePickerLib.stringToISODate(input)).toBe(output);
});
});
});
describe('truncateZerosInDateTime', () => {
[
{ {
input: '', input: '2019-09-08',
output: '', output: '2019-09-08T00:00:00Z',
}, },
{ {
input: '2019-10-10', input: '2019-09-08 00:00:00',
output: '2019-10-10', output: '2019-09-08T00:00:00Z',
}, },
{ {
input: '2019-10-10 00:00:01', input: '2019-09-08 23:24:24',
output: '2019-10-10 00:00:01', output: '2019-09-08T23:24:24Z',
}, },
{ {
input: '2019-10-10 00:00:00', input: '2019-09-08 0:0:0',
output: '2019-10-10', output: '2019-09-08T00:00:00Z',
}, },
].forEach(({ input, output }) => { ].forEach(({ input, output }) => {
it(`truncateZerosInDateTime return ${output} for ${input}`, () => { it(`returns ${output} from ${input}`, () => {
expect(dateTimePickerLib.truncateZerosInDateTime(input)).toBe(output); 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, input: '2019-09-08T01:01:01Z',
output: false, output: '2019-09-08 01:01:01',
},
{
input: '',
output: false,
}, },
{ {
input: 'xxxx-xx-xx', input: '2019-09-08T01:01:01.999Z',
output: false, output: '2019-09-08 01:01:01',
}, },
{ {
input: '9999-99-19', input: '2019-09-08T00:00:00Z',
output: false, output: '2019-09-08 00:00:00',
},
{
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,
}, },
].forEach(({ input, output }) => { ].forEach(({ input, output }) => {
it(`returns ${output} for ${input}`, () => { 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();
},
);
});
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment