TimeZonePicker: expose for panel configuraiton (#23523)

packages/grafana-data/src/utils/OptionsUIBuilders.ts

@@ -192,6 +192,15 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     });
     });
   }
   }
 
 
+  addTimeZonePicker<TSettings = any>(config: PanelOptionsEditorConfig<TOptions, TSettings, string>): this {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      editor: standardEditorsRegistry.get('timezone').editor as any,
+      settings: config.settings || {},
+    });
+  }
+
   addUnitPicker<TSettings = any>(
   addUnitPicker<TSettings = any>(
     config: PanelOptionsEditorConfig<TOptions, TSettings & UnitFieldConfigSettings, string>
     config: PanelOptionsEditorConfig<TOptions, TSettings & UnitFieldConfigSettings, string>
   ): this {
   ): this {

packages/grafana-ui/src/utils/standardEditors.tsx

@@ -17,6 +17,7 @@ import {
   ValueMappingFieldConfigSettings,
   ValueMappingFieldConfigSettings,
   valueMappingsOverrideProcessor,
   valueMappingsOverrideProcessor,
   ThresholdsMode,
   ThresholdsMode,
+  TimeZone,
 } from '@grafana/data';
 } from '@grafana/data';
 
 
 import { Switch } from '../components/Switch/Switch';
 import { Switch } from '../components/Switch/Switch';
@@ -26,6 +27,7 @@ import {
   StringValueEditor,
   StringValueEditor,
   StringArrayEditor,
   StringArrayEditor,
   SelectValueEditor,
   SelectValueEditor,
+  TimeZonePicker,
 } from '../components';
 } from '../components';
 import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings';
 import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings';
 import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds';
 import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds';
@@ -303,5 +305,26 @@ export const getStandardOptionEditors = () => {
     description: '',
     description: '',
   };
   };
 
 
-  return [text, number, boolean, radio, select, unit, mappings, thresholds, links, color, statsPicker, strings];
+  const timeZone: StandardEditorsRegistryItem<TimeZone> = {
+    id: 'timezone',
+    name: 'Time Zone',
+    description: 'Time zone selection',
+    editor: TimeZonePicker as any,
+  };
+
+  return [
+    text,
+    number,
+    boolean,
+    radio,
+    select,
+    unit,
+    mappings,
+    thresholds,
+    links,
+    color,
+    statsPicker,
+    strings,
+    timeZone,
+  ];
 };
 };