From b1286ab8d6717c3eae7a831a6edc38c52c12eed6 Mon Sep 17 00:00:00 2001 From: Marcus Andersson Date: Thu, 17 Jun 2021 15:45:06 +0200 Subject: [PATCH] TimePicker: will display the correct dates when selecting range in calendar with tz. (#35829) * fixing calendar issue. * reset yarn.lock. * added boilerplate for test. * added tests to verify bugfix. --- .../src/selectors/components.ts | 1 + .../TimeRangePicker/TimePickerCalendar.tsx | 9 +- .../TimeRangePicker/TimeRangeForm.test.tsx | 99 +++++++++++++++++++ .../TimeRangePicker/TimeRangeForm.tsx | 4 +- 4 files changed, 109 insertions(+), 4 deletions(-) create mode 100644 packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.test.tsx diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 66de4449503..b1e935d40ff 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -4,6 +4,7 @@ export const Components = { fromField: 'TimePicker from field', toField: 'TimePicker to field', applyTimeRange: 'TimePicker submit button', + calendar: 'TimePicker calendar', }, DataSource: { TestData: { diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx index c4054ed5508..b8ee9d372a4 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx @@ -8,6 +8,7 @@ import { Button } from '../../Button'; import { Icon } from '../../Icon/Icon'; import { Portal } from '../../Portal/Portal'; import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper'; +import { selectors } from '@grafana/e2e-selectors'; export const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed = false) => { return { @@ -208,7 +209,11 @@ export const TimePickerCalendar = memo((props) => { if (isFullscreen) { return ( -
+
@@ -218,7 +223,7 @@ export const TimePickerCalendar = memo((props) => { return (
-
+