From 8e36a15968d03b000008910f63e83061b5348540 Mon Sep 17 00:00:00 2001
From: Marcus Andersson <marcus.andersson@grafana.com>
Date: Tue, 30 Jun 2020 13:30:18 +0200
Subject: [PATCH] TimeZonePicker: added possibility to toggle if internal time
 zones should be included or not. (#25934)

* made some small adjustments after feedback.

* made the flag optional.
---
 .../TimeRangePicker/TimePickerFooter.tsx      |  1 +
 .../TimePicker/TimeZonePicker.story.tsx       |  1 +
 .../components/TimePicker/TimeZonePicker.tsx  | 21 +++++++++++--------
 .../SharedPreferences/SharedPreferences.tsx   |  2 +-
 .../DashboardSettings/TimePickerSettings.tsx  |  7 ++++++-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
index 0dc959c3344..9981bb8a4cb 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
@@ -47,6 +47,7 @@ export const TimePickerFooter: FC<Props> = props => {
       <div className={cx(style.container, style.editContainer)}>
         <div className={style.timeZoneContainer}>
           <TimeZonePicker
+            includeInternal={true}
             onChange={timeZone => {
               onToggleChangeTz();
 
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
index 9d8735f0098..6c12222937c 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
@@ -21,6 +21,7 @@ export const basic = () => {
       {(value, updateValue) => {
         return (
           <TimeZonePicker
+            includeInternal={true}
             value={value.value}
             onChange={newValue => {
               if (!newValue) {
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
index 14b3134b454..1d31b4baa0b 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
@@ -15,16 +15,17 @@ import { TimeZoneGroup } from './TimeZonePicker/TimeZoneGroup';
 import { formatUtcOffset } from './TimeZonePicker/TimeZoneOffset';
 
 export interface Props {
+  onChange: (timeZone: TimeZone | undefined) => void;
   value?: TimeZone;
   width?: number;
   autoFocus?: boolean;
-  onChange: (timeZone: TimeZone | undefined) => void;
   onBlur?: () => void;
+  includeInternal?: boolean;
 }
 
 export const TimeZonePicker: React.FC<Props> = props => {
-  const { onChange, width, autoFocus = false, onBlur, value } = props;
-  const groupedTimeZones = useTimeZones();
+  const { onChange, width, autoFocus = false, onBlur, value, includeInternal = false } = props;
+  const groupedTimeZones = useTimeZones(includeInternal);
   const selected = useSelectedTimeZone(groupedTimeZones, value);
   const filterBySearchIndex = useFilterBySearchIndex();
   const TimeZoneOption = width && width <= 45 ? CompactTimeZoneOption : WideTimeZoneOption;
@@ -59,10 +60,10 @@ interface SelectableZoneGroup extends SelectableValue<string> {
   options: SelectableZone[];
 }
 
-const useTimeZones = (): SelectableZoneGroup[] => {
+const useTimeZones = (includeInternal: boolean): SelectableZoneGroup[] => {
   const now = Date.now();
 
-  return getTimeZoneGroups(true).map((group: GroupedTimeZones) => {
+  return getTimeZoneGroups(includeInternal).map((group: GroupedTimeZones) => {
     const options = group.zones.reduce((options: SelectableZone[], zone) => {
       const info = getTimeZoneInfo(zone, now);
 
@@ -95,18 +96,20 @@ const useSelectedTimeZone = (
       return undefined;
     }
 
+    const tz = toLower(timeZone);
+
     const group = groups.find(group => {
       if (!group.label) {
-        return isInternal(timeZone);
+        return isInternal(tz);
       }
-      return timeZone.startsWith(group.label);
+      return tz.startsWith(toLower(group.label));
     });
 
     return group?.options.find(option => {
-      if (isEmpty(timeZone)) {
+      if (isEmpty(tz)) {
         return option.value === InternalTimeZones.default;
       }
-      return toLower(option.value) === timeZone;
+      return toLower(option.value) === tz;
     });
   }, [groups, timeZone]);
 };
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 917526878fb..f80ae617e63 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -157,7 +157,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
               </Field>
 
               <Field label="Timezone" aria-label={selectors.components.TimeZonePicker.container}>
-                <TimeZonePicker value={timezone} onChange={this.onTimeZoneChanged} />
+                <TimeZonePicker includeInternal={true} value={timezone} onChange={this.onTimeZoneChanged} />
               </Field>
               <div className="gf-form-button-row">
                 <Button variant="primary">Save</Button>
diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
index efa2d275fb6..979336d1fc3 100644
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
@@ -102,7 +102,12 @@ export class TimePickerSettings extends PureComponent<Props, State> {
         <div className="gf-form-group">
           <div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
             <label className="gf-form-label width-7">Timezone</label>
-            <TimeZonePicker value={dashboard.timezone} onChange={this.onTimeZoneChange} width={40} />
+            <TimeZonePicker
+              includeInternal={true}
+              value={dashboard.timezone}
+              onChange={this.onTimeZoneChange}
+              width={40}
+            />
           </div>
 
           <div className="gf-form">