TimeZonePicker: added possibility to toggle if internal time zones should be…

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.

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();
 

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) {

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]);
 };

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>

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">