diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx index edad8dfa..d82852f4 100644 --- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx +++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx @@ -15,8 +15,6 @@ const meta: Meta = { title: "Groups/ServerSettingsForm", component: ServerSettingsForm, args: { - expandedSections: ["connectionMode"], - onExpandedSectionsChange: fn(), onConnectionModeChange: fn(), onAddHeader: fn(), onRemoveHeader: fn(), diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx index d1da1e4e..fef1517d 100644 --- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx +++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { Accordion, ActionIcon, @@ -20,8 +21,7 @@ export type ServerSettingsSection = export interface ServerSettingsFormProps { settings: InspectorServerSettings; - expandedSections: ServerSettingsSection[]; - onExpandedSectionsChange: (sections: ServerSettingsSection[]) => void; + defaultExpandedSections?: ServerSettingsSection[]; onConnectionModeChange: (mode: "proxy" | "direct") => void; onAddHeader: () => void; onRemoveHeader: (index: number) => void; @@ -95,8 +95,7 @@ function KeyValueRows({ export function ServerSettingsForm({ settings, - expandedSections, - onExpandedSectionsChange, + defaultExpandedSections = ["connectionMode"], onConnectionModeChange, onAddHeader, onRemoveHeader, @@ -107,6 +106,10 @@ export function ServerSettingsForm({ onTimeoutChange, onOAuthChange, }: ServerSettingsFormProps) { + const [expandedSections, setExpandedSections] = useState< + ServerSettingsSection[] + >(defaultExpandedSections); + const handleTimeoutChange = (field: string) => (value: number | string) => { const numValue = typeof value === "string" ? parseInt(value, 10) || 0 : value; @@ -118,7 +121,7 @@ export function ServerSettingsForm({ multiple value={expandedSections} onChange={(value) => - onExpandedSectionsChange(value as ServerSettingsSection[]) + setExpandedSections(value as ServerSettingsSection[]) } variant="separated" > diff --git a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx index 50be3304..1e7a6c17 100644 --- a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx +++ b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx @@ -1,22 +1,9 @@ -import { useState } from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; -import { Box, CloseButton, Group, Modal, Title } from "@mantine/core"; +import { CloseButton, Group, Modal, Title } from "@mantine/core"; import { fn } from "storybook/test"; import { UnconnectedView } from "./UnconnectedView.js"; import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScreen"; -import { - ServerSettingsForm, - type ServerSettingsSection, -} from "../../groups/ServerSettingsForm/ServerSettingsForm"; - -const ALL_SETTINGS_SECTIONS: ServerSettingsSection[] = [ - "connectionMode", - "headers", - "metadata", - "timeouts", - "oauth", -]; -import { ListToggle } from "../../elements/ListToggle/ListToggle"; +import { ServerSettingsForm } from "../../groups/ServerSettingsForm/ServerSettingsForm"; import type { ServerCardProps } from "../../groups/ServerCard/ServerCard"; const meta: Meta = { @@ -125,10 +112,6 @@ export const WithServers: Story = { }; function SettingsModalStory() { - const [expandedSections, setExpandedSections] = useState< - ServerSettingsSection[] - >(["connectionMode"]); - const allExpanded = expandedSections.length === ALL_SETTINGS_SECTIONS.length; return ( - - setExpandedSections(allExpanded ? [] : ALL_SETTINGS_SECTIONS) - } - /> Server Settings - - - + } size="lg" @@ -182,8 +156,6 @@ function SettingsModalStory() { oauthClientSecret: "super-secret-value", oauthScopes: "read write", }} - expandedSections={expandedSections} - onExpandedSectionsChange={setExpandedSections} onConnectionModeChange={fn()} onAddHeader={fn()} onRemoveHeader={fn()}