Grafana UI: Add timezone selector to Storybook toolbar (#86703)

* Add timezone selector to Storybook toolbar

So that it's possible to preview how components that are using date functions, behave when timezone differs from browser/client.

* Re-order imports

packages/grafana-ui/.storybook/preview.ts

@@ -1,5 +1,6 @@
 import { Preview } from '@storybook/react';
 import 'jquery';
+import { getTimeZone, getTimeZones } from '@grafana/data';
 
 import '../../../public/vendor/flot/jquery.flot.js';
 import '../../../public/vendor/flot/jquery.flot.selection';
@@ -12,13 +13,14 @@ import '../../../public/vendor/flot/jquery.flot.dashes';
 import '../../../public/vendor/flot/jquery.flot.gauge';
 
 import { withTheme } from '../src/utils/storybook/withTheme';
+import { withTimeZone } from '../src/utils/storybook/withTimeZone';
 import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
 
 // @ts-ignore
 import lightTheme from './grafana.light.scss';
 // @ts-ignore
 import darkTheme from './grafana.dark.scss';
-import { GrafanaLight, GrafanaDark } from './storybookTheme';
+import { GrafanaDark, GrafanaLight } from './storybookTheme';
 
 const handleThemeChange = (theme: any) => {
   if (theme !== 'light') {
@@ -31,7 +33,7 @@ const handleThemeChange = (theme: any) => {
 };
 
 const preview: Preview = {
-  decorators: [withTheme(handleThemeChange)],
+  decorators: [withTheme(handleThemeChange), withTimeZone()],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     darkMode: {
@@ -66,6 +68,21 @@ const preview: Preview = {
       },
     },
   },
+  globalTypes: {
+    timeZone: {
+      description: 'Set the timezone for the storybook preview',
+      defaultValue: getTimeZone(),
+      toolbar: {
+        icon: 'globe',
+        items: getTimeZones(true)
+          .filter((timezone) => !!timezone)
+          .map((timezone) => ({
+            title: timezone,
+            value: timezone,
+          })),
+      },
+    },
+  },
 };
 
 export default preview;

packages/grafana-ui/src/utils/storybook/withTimeZone.tsx

@@ -0,0 +1,12 @@
+import { Decorator } from '@storybook/react';
+import { useEffect } from 'react';
+
+import { setTimeZoneResolver } from '@grafana/data';
+
+export const withTimeZone = (): Decorator => (Story, context) => {
+  useEffect(() => {
+    setTimeZoneResolver(() => context.globals.timeZone ?? 'browser');
+  }, [context.globals.timeZone]);
+
+  return Story();
+};