From 64d30e37b2e47cd76b56d9a7d19c62f91ac9c480 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 22 Jul 2022 13:27:43 +0100
Subject: [PATCH] add support for controls in DataSourceHttpSettings story
 (#52618)

---
 .../DataSourceHttpSettings.story.tsx          | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
index 9df51502347..717140fef68 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
@@ -1,11 +1,13 @@
+import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
 import { DataSourceSettings } from '@grafana/data';
 
-import { UseState } from '../../utils/storybook/UseState';
-
 import { DataSourceHttpSettings } from './DataSourceHttpSettings';
 import mdx from './DataSourceHttpSettings.mdx';
+import { HttpSettingsProps } from './types';
 
 const settingsMock: DataSourceSettings<any, any> = {
   id: 4,
@@ -36,29 +38,34 @@ const settingsMock: DataSourceSettings<any, any> = {
   readOnly: true,
 };
 
-export default {
+const meta: Meta = {
   title: 'Data Source/DataSourceHttpSettings',
   component: DataSourceHttpSettings,
   parameters: {
+    controls: {
+      exclude: ['onChange'],
+    },
     docs: {
       page: mdx,
     },
   },
+  args: {
+    dataSourceConfig: settingsMock,
+    defaultUrl: 'http://localhost:9999',
+  },
 };
 
-export const basic = () => {
+export const Basic: Story<HttpSettingsProps> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState initialState={settingsMock} logState>
-      {(dataSourceSettings, updateDataSourceSettings) => {
-        return (
-          <DataSourceHttpSettings
-            defaultUrl="http://localhost:9999"
-            dataSourceConfig={dataSourceSettings}
-            onChange={updateDataSourceSettings}
-            showAccessOptions={true}
-          />
-        );
+    <DataSourceHttpSettings
+      {...args}
+      onChange={(change: typeof settingsMock) => {
+        action('onChange')(change);
+        updateArgs({ dataSourceConfig: change });
       }}
-    </UseState>
+    />
   );
 };
+
+export default meta;