From d38e86f3a6c42471f82c0cffdbd65aa71fa254d0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 10 Aug 2022 08:55:22 +0100
Subject: [PATCH] Storybook: add controls support + remove `UseState` from
 `RelativeTimeRangePicker` story (#53459)

* add controls support + remove UseState from RelativeTimeRangePicker story

* don't need this displayName

* exclude onChange
---
 .../RelativeTimeRangePicker.story.tsx         | 40 +++++++++----------
 .../RelativeTimeRangePicker.tsx               |  4 +-
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx
index 8513d8403eb..91509ca263c 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx
@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { UseState } from '../../../utils/storybook/UseState';
 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 
 import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
@@ -12,30 +12,28 @@ const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
   component: RelativeTimeRangePicker,
   decorators: [withCenteredStory],
   parameters: {
-    docs: {},
+    controls: {
+      exclude: ['onChange'],
+    },
+  },
+  args: {
+    timeRange: {
+      from: 900,
+      to: 0,
+    },
   },
 };
 
-export const basic = () => {
+export const Basic: ComponentStory<typeof RelativeTimeRangePicker> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState
-      initialState={{
-        from: 900,
-        to: 0,
+    <RelativeTimeRangePicker
+      {...args}
+      onChange={(value) => {
+        action('onChange')(value);
+        updateArgs({ timeRange: value });
       }}
-    >
-      {(value, updateValue) => {
-        return (
-          <RelativeTimeRangePicker
-            onChange={(newValue) => {
-              action('on selected')(newValue);
-              updateValue(newValue);
-            }}
-            timeRange={value}
-          />
-        );
-      }}
-    </UseState>
+    />
   );
 };
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
index 13aa85ffbed..37bfb64fbcf 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FormEvent, ReactElement, useCallback, useState } from 'react';
+import React, { FormEvent, useCallback, useState } from 'react';
 
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
 
@@ -41,7 +41,7 @@ const validOptions = quickOptions.filter((o) => isRelativeFormat(o.from));
 /**
  * @internal
  */
-export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): ReactElement | null {
+export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
   const { timeRange, onChange } = props;
   const [isOpen, setIsOpen] = useState(false);
   const onClose = useCallback(() => setIsOpen(false), []);