From ae5a7a53a9d3f03febfea97ecbf149488d8a96b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 24 Sep 2024 17:00:15 +0200
Subject: [PATCH] TimePicker: Support strings in ISO formats (#93479)

* TimePicker: Support strings in ISO formats

* changed fix and added test
---
 .../TimeRangePicker/TimeRangeContent.test.tsx   | 17 +++++++++++++++++
 .../TimeRangePicker/TimeRangeContent.tsx        |  6 ++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx
index d6a7aa1c35e..99f9df99a20 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx
@@ -76,6 +76,23 @@ describe('TimeRangeForm', () => {
     expect(getByLabelText('To')).toHaveValue(toValue);
   });
 
+  it('should parse UTC iso strings and render in current timezone', () => {
+    const { getByLabelText } = setup(
+      {
+        from: defaultTimeRange.from,
+        to: defaultTimeRange.to,
+        raw: {
+          from: defaultTimeRange.from.toISOString(),
+          to: defaultTimeRange.to.toISOString(),
+        },
+      },
+      'America/New_York'
+    );
+
+    expect(getByLabelText('From')).toHaveValue('2021-06-16 20:00:00');
+    expect(getByLabelText('To')).toHaveValue('2021-06-19 19:59:00');
+  });
+
   it('should close calendar when clicking the close icon', () => {
     const { queryByLabelText, getAllByRole, getByRole } = setup();
     const { TimePicker } = selectors.components;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
index 87f5572c586..a23da6f7a62 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
@@ -267,6 +267,12 @@ function valueAsString(value: DateTime | string, timeZone?: TimeZone): string {
   if (isDateTime(value)) {
     return dateTimeFormat(value, { timeZone });
   }
+
+  if (value.endsWith('Z')) {
+    const dt = dateTimeParse(value, { timeZone: 'utc' });
+    return dateTimeFormat(dt, { timeZone });
+  }
+
   return value;
 }