From 29ce55290f082ba77c5f7c5d785edcb4d6301f0a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 21 Apr 2026 20:19:39 -0400
Subject: [PATCH] Fix ServerSettingsModal stories to use useArgs for action
 logging

Use args + useArgs pattern so onSettingsChange and onClose fire
through Storybook's args system. Every form interaction now logs
to the Actions panel with the full updated settings object.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ServerSettingsModal.stories.tsx           | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
index a0296b0d..596bf93c 100644
--- a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
@@ -1,8 +1,12 @@
-import { useState } from "react";
 import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
 import { AppShell } from "@mantine/core";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServerSettingsModal } from "./ServerSettingsModal";
+import { fn } from "storybook/test";
+import { useArgs } from "storybook/preview-api";
+import {
+  ServerSettingsModal,
+  type ServerSettingsModalProps,
+} from "./ServerSettingsModal";
 
 const initialSettings: InspectorServerSettings = {
   connectionMode: "proxy",
@@ -18,22 +22,18 @@ const initialSettings: InspectorServerSettings = {
   oauthScopes: "read write",
 };
 
-function InteractiveModal({
-  startSettings,
-}: {
-  startSettings: InspectorServerSettings;
-}) {
-  const [settings, setSettings] =
-    useState<InspectorServerSettings>(startSettings);
+function InteractiveRender(args: ServerSettingsModalProps) {
+  const [, updateArgs] = useArgs<ServerSettingsModalProps>();
 
   return (
     <AppShell>
       <AppShell.Main>
         <ServerSettingsModal
-          opened
-          settings={settings}
-          onClose={() => {}}
-          onSettingsChange={setSettings}
+          {...args}
+          onSettingsChange={(settings) => {
+            args.onSettingsChange(settings);
+            updateArgs({ settings });
+          }}
         />
       </AppShell.Main>
     </AppShell>
@@ -44,25 +44,31 @@ const meta: Meta<typeof ServerSettingsModal> = {
   title: "Groups/ServerSettingsModal",
   component: ServerSettingsModal,
   parameters: { layout: "fullscreen" },
+  render: InteractiveRender,
+  args: {
+    opened: true,
+    onClose: fn(),
+    onSettingsChange: fn(),
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof ServerSettingsModal>;
 
 export const FullyConfigured: Story = {
-  render: () => <InteractiveModal startSettings={initialSettings} />,
+  args: {
+    settings: initialSettings,
+  },
 };
 
 export const EmptySettings: Story = {
-  render: () => (
-    <InteractiveModal
-      startSettings={{
-        connectionMode: "proxy",
-        headers: [],
-        metadata: [],
-        connectionTimeout: 30000,
-        requestTimeout: 60000,
-      }}
-    />
-  ),
+  args: {
+    settings: {
+      connectionMode: "proxy",
+      headers: [],
+      metadata: [],
+      connectionTimeout: 30000,
+      requestTimeout: 60000,
+    },
+  },
 };