diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx index 31e2bdbd..de732b81 100644 --- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx +++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx @@ -95,17 +95,14 @@ function InteractiveRender(args: ServerSettingsFormProps) { settings: { ...args.settings, [field]: value }, }); }} - onOAuthChange={(field, value) => { - args.onOAuthChange(field, value); - const fieldMap: Record = { - clientId: "oauthClientId", - clientSecret: "oauthClientSecret", - scopes: "oauthScopes", - }; + onOAuthChange={(oauth) => { + args.onOAuthChange(oauth); updateArgs({ settings: { ...args.settings, - [fieldMap[field] ?? field]: value, + oauthClientId: oauth.clientId, + oauthClientSecret: oauth.clientSecret, + oauthScopes: oauth.scopes, }, }); }} diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx index d1da1e4e..3db4cf7f 100644 --- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx +++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx @@ -30,7 +30,13 @@ export interface ServerSettingsFormProps { onRemoveMetadata: (index: number) => void; onMetadataChange: (index: number, key: string, value: string) => void; onTimeoutChange: (field: string, value: number) => void; - onOAuthChange: (field: string, value: string) => void; + onOAuthChange: (oauth: OAuthSettings) => void; +} + +export interface OAuthSettings { + clientId: string; + clientSecret: string; + scopes: string; } const CONNECTION_MODE_OPTIONS = [ @@ -113,6 +119,14 @@ export function ServerSettingsForm({ onTimeoutChange(field, numValue); }; + function currentOAuth(): OAuthSettings { + return { + clientId: settings.oauthClientId ?? "", + clientSecret: settings.oauthClientSecret ?? "", + scopes: settings.oauthScopes ?? "", + }; + } + return ( onOAuthChange("clientId", e.currentTarget.value)} + onChange={(e) => + onOAuthChange({ + ...currentOAuth(), + clientId: e.currentTarget.value, + }) + } /> - onOAuthChange("clientSecret", e.currentTarget.value) + onOAuthChange({ + ...currentOAuth(), + clientSecret: e.currentTarget.value, + }) } /> onOAuthChange("scopes", e.currentTarget.value)} + onChange={(e) => + onOAuthChange({ + ...currentOAuth(), + scopes: e.currentTarget.value, + }) + } /> diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx index 3d2b3a25..c1a882ab 100644 --- a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx +++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx @@ -5,6 +5,7 @@ import { ListToggle } from "../../elements/ListToggle/ListToggle"; import { ServerSettingsForm, type ServerSettingsSection, + type OAuthSettings, } from "../ServerSettingsForm/ServerSettingsForm"; const ALL_SECTIONS: ServerSettingsSection[] = [ @@ -88,14 +89,13 @@ export function ServerSettingsModal({ onSettingsChange({ ...settings, [field]: value }); } - function handleOAuthChange(field: string, value: string) { - const oauthFieldMap: Record = { - clientId: "oauthClientId", - clientSecret: "oauthClientSecret", - scopes: "oauthScopes", - }; - const settingsKey = oauthFieldMap[field] ?? field; - onSettingsChange({ ...settings, [settingsKey]: value }); + function handleOAuthChange(oauth: OAuthSettings) { + onSettingsChange({ + ...settings, + oauthClientId: oauth.clientId, + oauthClientSecret: oauth.clientSecret, + oauthScopes: oauth.scopes, + }); } return (