From b2c1473e59d810fa14e9e213d802dd4509138675 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Fri, 27 Sep 2019 09:27:44 +0200
Subject: [PATCH] grafana/ui: Fix value time zone names to be capitalized
 (#19417)

(cherry picked from commit 8024c394357ea2affd634899f1c3dce91ba79e0e)
---
 .../components/TimePicker/TimeZonePicker.tsx  | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx

diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
new file mode 100644
index 00000000000..0f58cc43881
--- /dev/null
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { getTimeZoneGroups, SelectableValue } from '@grafana/data';
+import { Select } from '..';
+
+interface Props {
+  value: string;
+  width?: number;
+
+  onChange: (newValue: string) => void;
+}
+
+export const TimeZonePicker: FC<Props> = ({ onChange, value, width }) => {
+  const timeZoneGroups = getTimeZoneGroups();
+
+  const groupOptions = timeZoneGroups.map(group => {
+    const options = group.options.map(timeZone => {
+      return {
+        label: timeZone,
+        value: timeZone,
+      };
+    });
+
+    return {
+      label: group.label,
+      options,
+    };
+  });
+
+  const selectedValue = groupOptions.map(group => {
+    return group.options.find(option => option.value === value);
+  });
+
+  return (
+    <Select
+      options={groupOptions}
+      value={selectedValue}
+      onChange={(newValue: SelectableValue) => onChange(newValue.value)}
+      width={width}
+    />
+  );
+};