From 99cbb5281cd969b61fd4b5471d3a6c25b17b807a Mon Sep 17 00:00:00 2001
From: Thomas Wikman <thomas@w1kman.se>
Date: Tue, 23 Apr 2024 10:09:08 +0200
Subject: [PATCH] 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     | 21 +++++++++++++++++--
 .../src/utils/storybook/withTimeZone.tsx      | 12 +++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 packages/grafana-ui/src/utils/storybook/withTimeZone.tsx

diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts
index e58cfed7230..1e7e84f797c 100644
--- a/packages/grafana-ui/.storybook/preview.ts
+++ b/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;
diff --git a/packages/grafana-ui/src/utils/storybook/withTimeZone.tsx b/packages/grafana-ui/src/utils/storybook/withTimeZone.tsx
new file mode 100644
index 00000000000..27445b3c24e
--- /dev/null
+++ b/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();
+};