refactor: model MCP transport forms as unions

Rhys Sullivan committed 8 months ago

Commit b8a09bd1 parent 567c4893 files · +323 −158Browse files

Unified · Split

3 files

apps/web/src/views/add-source.tsx +135 −87
apps/web/src/views/mcp-transport-state.ts +62 −0
apps/web/src/views/source-editor.tsx +126 −71

apps/web/src/views/add-source.tsx+135−87

   sourceTemplates,
   type SourceTemplate,
 } from "./source-templates";
+import {
+  asMcpRemoteTransportValue,
+  defaultMcpRemoteTransportFields,
+  defaultMcpStdioTransportFields,
+  setMcpTransportFieldsTransport,
+  type McpRemoteTransportFields,
+  type McpStdioTransportFields,
+  type McpTransportFields,
+  type McpTransportValue,
+} from "./mcp-transport-state";
 import { getDomain } from "tldts";
 // ---------------------------------------------------------------------------
   headersText: string;
 };
-type ConnectFormState = {
+type ConnectFormBase = {
   kind: "mcp" | "openapi" | "graphql" | "google_discovery";
   endpoint: string;
   specUrl: string;
   discoveryUrl: string;
   name: string;
   namespace: string;
-  transport: "" | "auto" | "streamable-http" | "sse" | "stdio";
   authKind: "none" | "bearer" | "oauth2";
   authHeaderName: string;
   authPrefix: string;
   workspaceOauthClientId: string;
   oauthClientId: string;
   oauthClientSecret: string;
-  queryParamsText: string;
-  headersText: string;
-  command: string;
-  argsText: string;
-  envText: string;
-  cwd: string;
 };
+type ConnectFormState = ConnectFormBase & McpTransportFields;
 type OAuthRequiredInfo = {
   source: Source;
   sessionId: string;
   "google_discovery",
 ];
-const transportOptions: ReadonlyArray<
+const transportOptions: ReadonlyArray<Exclude<McpTransportValue, "">> = [
-  "auto" | "streamable-http" | "sse" | "stdio"
+  "auto",
-> = ["auto", "streamable-http", "sse", "stdio"];
+  "streamable-http",
+  "sse",
+  "stdio",
+];
 const authOptions: ReadonlyArray<ConnectFormState["authKind"]> = [
   "none",
       name: discovery?.name ?? "",
       namespace:
         discovery?.namespace || namespaceFromUrl(discovery?.endpoint ?? ""),
-      transport: "",
       authKind: "none",
       authHeaderName: "Authorization",
       authPrefix: "Bearer ",
       workspaceOauthClientId: "",
       oauthClientId: "",
       oauthClientSecret: "",
-      queryParamsText: "",
+      ...defaultMcpRemoteTransportFields(),
-      headersText: "",
-      command: "",
-      argsText: "",
-      envText: "",
-      cwd: "",
     };
   }
     discoveryUrl: googleDiscoveryDefaults?.discoveryUrl ?? "",
     name: discovery.name ?? "",
     namespace: discovery.namespace || namespaceFromUrl(discovery.endpoint),
-    transport: kind === "mcp" ? (discovery.transport ?? "auto") : "",
     authKind,
     authHeaderName,
     authPrefix,
     workspaceOauthClientId: "",
     oauthClientId: "",
     oauthClientSecret: "",
-    queryParamsText: "",
+    ...defaultMcpRemoteTransportFields(
-    headersText: "",
+      kind === "mcp" ? asMcpRemoteTransportValue(discovery.transport) : "",
-    command: "",
+    ),
-    argsText: "",
-    envText: "",
-    cwd: "",
   };
 };
     ("service" in template
       ? googleDiscoveryNamespace(template.service)
       : namespaceFromUrl(template.endpoint ?? "")),
-  transport:
-    template.kind === "mcp"
-      ? template.connectionType === "command"
-        ? (template.transport ?? "stdio")
-        : (template.transport ?? "auto")
-      : "",
   authKind: template.kind === "google_discovery" ? "oauth2" : "none",
   workspaceOauthClientId: "",
-  command: template.kind === "mcp" ? (template.command ?? "") : "",
+  ...(template.kind === "mcp" && template.connectionType === "command"
-  argsText: template.kind === "mcp" ? stringifyStringArray(template.args) : "",
+    ? defaultMcpStdioTransportFields({
-  envText: template.kind === "mcp" ? stringifyStringMap(template.env) : "",
+        command: template.command ?? "",
-  cwd: template.kind === "mcp" ? (template.cwd ?? "") : "",
+        argsText: stringifyStringArray(template.args),
+        envText: stringifyStringMap(template.env),
+        cwd: template.cwd ?? "",
+      })
+    : defaultMcpRemoteTransportFields(
+        template.kind === "mcp"
+          ? asMcpRemoteTransportValue(template.transport)
+          : "",
+      )),
 });
 const authKindForSourceKind = (
 const buildConnectPayload = (form: ConnectFormState): ConnectSourcePayload => {
   if (form.kind === "mcp") {
-    const transport = form.transport === "" ? "auto" : form.transport;
+    if (form.transport === "stdio") {
-    const isStdio = transport === "stdio";
+      const endpoint = buildSyntheticMcpStdioEndpoint({
-    const endpoint = isStdio
+        name: form.name,
-      ? buildSyntheticMcpStdioEndpoint({
+        endpoint: form.endpoint,
-          name: form.name,
+        command: form.command,
-          endpoint: form.endpoint,
+      });
-          command: form.command,
+      if (!form.command.trim()) {
-        })
+        throw new Error("Command is required for stdio MCP sources.");
-      : form.endpoint.trim();
+      }
-    if (!isStdio && !endpoint) throw new Error("Endpoint is required.");
+      return {
-    if (isStdio && !form.command.trim())
+        kind: "mcp",
-      throw new Error("Command is required for stdio MCP sources.");
+        endpoint,
+        name: trimToNull(form.name),
+        namespace: trimToNull(form.namespace),
+        transport: "stdio",
+        queryParams: null,
+        headers: null,
+        command: form.command.trim(),
+        args: parseJsonStringArray("Args", form.argsText),
+        env: parseJsonStringMap("Environment", form.envText),
+        cwd: trimToNull(form.cwd),
+      };
+    }
+    const endpoint = form.endpoint.trim();
+    if (!endpoint) throw new Error("Endpoint is required.");
     return {
       kind: "mcp",
       endpoint,
       name: trimToNull(form.name),
       namespace: trimToNull(form.namespace),
-      transport,
+      transport: form.transport === "" ? "auto" : form.transport,
-      queryParams: isStdio
+      queryParams: parseJsonStringMap("Query params", form.queryParamsText),
-        ? null
+      headers: parseJsonStringMap("Request headers", form.headersText),
-        : parseJsonStringMap("Query params", form.queryParamsText),
+      command: null,
-      headers: isStdio
+      args: null,
-        ? null
+      env: null,
-        : parseJsonStringMap("Request headers", form.headersText),
+      cwd: null,
-      command: isStdio ? form.command.trim() : null,
-      args: isStdio ? parseJsonStringArray("Args", form.argsText) : null,
-      env: isStdio ? parseJsonStringMap("Environment", form.envText) : null,
-      cwd: isStdio ? trimToNull(form.cwd) : null,
     };
   }
     text: string;
   } | null>(null);
-  const setFormField = <K extends keyof ConnectFormState>(
+  const setFormField = <K extends keyof ConnectFormBase>(
     key: K,
-    value: ConnectFormState[K],
+    value: ConnectFormBase[K],
   ) => {
     setConnectForm((current) => ({ ...current, [key]: value }));
   };
+  const setTransport = (transport: McpTransportValue) => {
+    setConnectForm((current) => ({
+      ...current,
+      ...setMcpTransportFieldsTransport(current, transport),
+    }));
+  };
+  const setRemoteTransportField = <
+    K extends Exclude<keyof McpRemoteTransportFields, "transport">,
+  >(
+    key: K,
+    value: McpRemoteTransportFields[K],
+  ) => {
+    setConnectForm((current) =>
+      current.transport === "stdio" ? current : { ...current, [key]: value },
+    );
+  };
+  const setStdioTransportField = <
+    K extends Exclude<keyof McpStdioTransportFields, "transport">,
+  >(
+    key: K,
+    value: McpStdioTransportFields[K],
+  ) => {
+    setConnectForm((current) =>
+      current.transport === "stdio" ? { ...current, [key]: value } : current,
+    );
+  };
   const setSourceKind = (kind: ConnectFormState["kind"]) => {
     setConnectForm((current) => ({
       ...current,
     try {
       const result = await discoverSource.mutateAsync({ url: discoveryUrl });
-      const form = defaultConnectForm(result);
+      let form: ConnectFormState = {
-      // Prefer the template's own values over whatever discover returned
+        ...defaultConnectForm(result),
-      form.name = template.name;
+        name: template.name,
-      form.endpoint = template.endpoint ?? "";
+        endpoint: template.endpoint ?? "",
-      form.namespace =
+        namespace: template.namespace ?? namespaceFromUrl(template.endpoint ?? ""),
-        template.namespace ?? namespaceFromUrl(template.endpoint ?? "");
+      };
       if (template.kind === "mcp") {
-        form.transport =
+        form = {
-          template.connectionType === "command"
+          ...form,
-            ? (template.transport ?? "stdio")
+          ...(template.connectionType === "command"
-            : (template.transport ?? form.transport);
+            ? defaultMcpStdioTransportFields({
-        form.command = template.command ?? "";
+                command: template.command ?? "",
-        form.argsText = stringifyStringArray(template.args);
+                argsText: stringifyStringArray(template.args),
-        form.envText = stringifyStringMap(template.env);
+                envText: stringifyStringMap(template.env),
-        form.cwd = template.cwd ?? "";
+                cwd: template.cwd ?? "",
+              })
+            : defaultMcpRemoteTransportFields(
+                asMcpRemoteTransportValue(template.transport),
+              )),
+        };
       }
       if ("specUrl" in template) {
-        form.specUrl = template.specUrl;
+        form = {
+          ...form,
+          specUrl: template.specUrl,
+        };
       }
       setConnectForm(form);
       setPhase("editing");
                   <Field label="Transport mode">
                     <SelectInput
                       value={connectForm.transport || "auto"}
-                      onChange={(v) =>
+                      onChange={(v) => setTransport(v as McpTransportValue)}
-                        setFormField(
-                          "transport",
-                          v as ConnectFormState["transport"],
-                        )
-                      }
                       options={transportOptions.map((v) => ({
                         value: v,
                         label: v,
                       <Field label="Command">
                         <TextInput
                           value={connectForm.command}
-                          onChange={(v) => setFormField("command", v)}
+                          onChange={(v) => setStdioTransportField("command", v)}
                           placeholder="npx"
                           mono
                         />
                       <Field label="Working directory (optional)">
                         <TextInput
                           value={connectForm.cwd}
-                          onChange={(v) => setFormField("cwd", v)}
+                          onChange={(v) => setStdioTransportField("cwd", v)}
                           placeholder="/path/to/project"
                           mono
                         />
                       <Field label="Args (JSON)" className="sm:col-span-2">
                         <CodeEditor
                           value={connectForm.argsText}
-                          onChange={(v) => setFormField("argsText", v)}
+                          onChange={(v) =>
+                            setStdioTransportField("argsText", v)
+                          }
                           placeholder={
                             '[\n  "-y",\n  "chrome-devtools-mcp@latest"\n]'
                           }
                       >
                         <CodeEditor
                           value={connectForm.envText}
-                          onChange={(v) => setFormField("envText", v)}
+                          onChange={(v) => setStdioTransportField("envText", v)}
                           placeholder={
                             '{\n  "CHROME_PATH": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"\n}'
                           }
                       <Field label="Query params (JSON)">
                         <CodeEditor
                           value={connectForm.queryParamsText}
-                          onChange={(v) => setFormField("queryParamsText", v)}
+                          onChange={(v) =>
+                            setRemoteTransportField("queryParamsText", v)
+                          }
                           placeholder={'{\n  "workspace": "demo"\n}'}
                         />
                       </Field>
                       <Field label="Headers (JSON)">
                         <CodeEditor
                           value={connectForm.headersText}
-                          onChange={(v) => setFormField("headersText", v)}
+                          onChange={(v) =>
+                            setRemoteTransportField("headersText", v)
+                          }
                           placeholder={'{\n  "x-api-key": "..."\n}'}
                         />
                       </Field>

apps/web/src/views/mcp-transport-state.ts+62−0

@@ -0,0 +1,62 @@
	1	export type McpRemoteTransportValue = "" \| "auto" \| "streamable-http" \| "sse";
	2
	3	export type McpTransportValue = McpRemoteTransportValue \| "stdio";
	4
	5	export type McpRemoteTransportFields = {
	6	transport: McpRemoteTransportValue;
	7	queryParamsText: string;
	8	headersText: string;
	9	};
	10
	11	export type McpStdioTransportFields = {
	12	transport: "stdio";
	13	command: string;
	14	argsText: string;
	15	envText: string;
	16	cwd: string;
	17	};
	18
	19	export type McpTransportFields =
	20	\| McpRemoteTransportFields
	21	\| McpStdioTransportFields;
	22
	23	export const defaultMcpRemoteTransportFields = (
	24	transport: McpRemoteTransportValue = "",
	25	): McpRemoteTransportFields => ({
	26	transport,
	27	queryParamsText: "",
	28	headersText: "",
	29	});
	30
	31	export const defaultMcpStdioTransportFields = (
	32	input?: Partial<Omit<McpStdioTransportFields, "transport">>,
	33	): McpStdioTransportFields => ({
	34	transport: "stdio",
	35	command: input?.command ?? "",
	36	argsText: input?.argsText ?? "",
	37	envText: input?.envText ?? "",
	38	cwd: input?.cwd ?? "",
	39	});
	40
	41	export const asMcpRemoteTransportValue = (
	42	transport: McpTransportValue \| null \| undefined,
	43	): McpRemoteTransportValue =>
	44	transport === "stdio" ? "auto" : (transport ?? "");
	45
	46	export const setMcpTransportFieldsTransport = (
	47	current: McpTransportFields,
	48	transport: McpTransportValue,
	49	): McpTransportFields => {
	50	if (transport === "stdio") {
	51	return current.transport === "stdio"
	52	? current
	53	: defaultMcpStdioTransportFields();
	54	}
	55
	56	return current.transport === "stdio"
	57	? defaultMcpRemoteTransportFields(transport)
	58	: {
	59	...current,
	60	transport,
	61	};
	62	};

apps/web/src/views/source-editor.tsx+126−71

   IconTrash,
 } from "../components/icons";
 import { cn } from "../lib/utils";
+import {
+  asMcpRemoteTransportValue,
+  defaultMcpRemoteTransportFields,
+  defaultMcpStdioTransportFields,
+  setMcpTransportFieldsTransport,
+  type McpRemoteTransportFields,
+  type McpStdioTransportFields,
+  type McpTransportFields,
+  type McpTransportValue,
+} from "./mcp-transport-state";
 import { sourceTemplates, type SourceTemplate } from "./source-templates";
 import { getDomain } from "tldts";
   loadable.status === "error" &&
   loadable.error.message.toLowerCase().includes("source not found");
-type TransportValue = "" | "auto" | "streamable-http" | "sse" | "stdio";
+type SourceFormBase = {
-type SourceFormState = {
   name: string;
   kind: Source["kind"];
   endpoint: string;
   namespace: string;
   enabled: boolean;
-  transport: TransportValue;
-  queryParamsText: string;
-  headersText: string;
-  command: string;
-  argsText: string;
-  envText: string;
-  cwd: string;
   specUrl: string;
   service: string;
   version: string;
   > | null;
 };
+type SourceFormState = SourceFormBase & McpTransportFields;
 const kindOptions: ReadonlyArray<Source["kind"]> = [
   "mcp",
   "openapi",
   "internal",
 ];
-const transportOptions: ReadonlyArray<Exclude<TransportValue, "">> = [
+const transportOptions: ReadonlyArray<Exclude<McpTransportValue, "">> = [
   "auto",
   "streamable-http",
   "sse",
 const readBindingString = (source: Source, key: string): string =>
   typeof source.binding[key] === "string" ? String(source.binding[key]) : "";
-const readBindingTransport = (source: Source): TransportValue => {
+const readBindingTransport = (source: Source): McpTransportValue => {
   const candidate = source.binding.transport;
   return typeof candidate === "string" &&
     (candidate === "auto" ||
         : namespaceFromUrl(template.endpoint ?? "")))
     : "",
   enabled: true,
-  transport:
-    template?.kind === "mcp"
-      ? template.connectionType === "command"
-        ? (template.transport ?? "stdio")
-        : (template.transport ?? "auto")
-      : "",
-  queryParamsText: "",
-  headersText: "",
-  command: template?.kind === "mcp" ? (template.command ?? "") : "",
-  argsText: template?.kind === "mcp" ? stringArrayToEditor(template.args) : "",
-  envText:
-    template?.kind === "mcp" ? stringMapToEditor(template.env ?? null) : "",
-  cwd: template?.kind === "mcp" ? (template.cwd ?? "") : "",
   specUrl: template && "specUrl" in template ? template.specUrl : "",
   service: template && "service" in template ? template.service : "",
   version: template && "version" in template ? template.version : "",
   oauthRefreshProviderId: "",
   oauthRefreshHandle: "",
   managedAuth: null,
+  ...(template?.kind === "mcp" && template.connectionType === "command"
+    ? defaultMcpStdioTransportFields({
+        command: template.command ?? "",
+        argsText: stringArrayToEditor(template.args),
+        envText: stringMapToEditor(template.env ?? null),
+        cwd: template.cwd ?? "",
+      })
+    : defaultMcpRemoteTransportFields(
+        template?.kind === "mcp"
+          ? asMcpRemoteTransportValue(template.transport)
+          : "",
+      )),
 });
 const formStateFromSource = (source: Source): SourceFormState => ({
   endpoint: source.endpoint,
   namespace: source.namespace ?? "",
   enabled: source.enabled,
-  transport:
-    source.kind === "mcp" ? readBindingTransport(source) || "auto" : "",
-  queryParamsText: stringMapToEditor(
-    readBindingStringMap(source, "queryParams"),
-  ),
-  headersText: stringMapToEditor(readBindingStringMap(source, "headers")),
-  command: readBindingString(source, "command"),
-  argsText: stringArrayToEditor(readBindingStringArray(source, "args")),
-  envText: stringMapToEditor(readBindingStringMap(source, "env")),
-  cwd: readBindingString(source, "cwd"),
   specUrl: readBindingString(source, "specUrl"),
   service: readBindingString(source, "service"),
   version: readBindingString(source, "version"),
     source.auth.kind === "mcp_oauth"
       ? source.auth
       : null,
+  ...(source.kind === "mcp" && readBindingTransport(source) === "stdio"
+    ? defaultMcpStdioTransportFields({
+        command: readBindingString(source, "command"),
+        argsText: stringArrayToEditor(readBindingStringArray(source, "args")),
+        envText: stringMapToEditor(readBindingStringMap(source, "env")),
+        cwd: readBindingString(source, "cwd"),
+      })
+    : defaultMcpRemoteTransportFields(
+        source.kind === "mcp"
+          ? asMcpRemoteTransportValue(readBindingTransport(source) || "auto")
+          : "",
+      )),
+  ...(source.kind === "mcp" && readBindingTransport(source) !== "stdio"
+    ? {
+        queryParamsText: stringMapToEditor(
+          readBindingStringMap(source, "queryParams"),
+        ),
+        headersText: stringMapToEditor(readBindingStringMap(source, "headers")),
+      }
+    : {}),
 });
 const parseJsonStringMap = (
 const buildSourcePayload = (state: SourceFormState): CreateSourcePayload => {
   const name = state.name.trim();
   const isMcpStdio = state.kind === "mcp" && state.transport === "stdio";
-  const endpoint = isMcpStdio
+  const endpoint =
-    ? buildSyntheticMcpStdioEndpoint({
+    state.kind === "mcp" && state.transport === "stdio"
-        name: state.name,
+      ? buildSyntheticMcpStdioEndpoint({
-        endpoint: state.endpoint,
+          name: state.name,
-        command: state.command,
+          endpoint: state.endpoint,
-      })
+          command: state.command,
-    : state.endpoint.trim();
+        })
+      : state.endpoint.trim();
   if (!name) {
     throw new Error("Source name is required.");
   >;
   if (state.kind === "mcp") {
+    if (state.transport === "stdio") {
+      return {
+        ...shared,
+        binding: {
+          transport: "stdio",
+          queryParams: null,
+          headers: null,
+          command: state.command.trim(),
+          args: parseJsonStringArray("Args", state.argsText),
+          env: parseJsonStringMap("Environment", state.envText),
+          cwd: trimToNull(state.cwd),
+        },
+      };
+    }
     return {
       ...shared,
       binding: {
         transport: state.transport === "" ? "auto" : state.transport,
-        queryParams:
+        queryParams: parseJsonStringMap("Query params", state.queryParamsText),
-          state.transport === "stdio"
+        headers: parseJsonStringMap("Request headers", state.headersText),
-            ? null
+        command: null,
-            : parseJsonStringMap("Query params", state.queryParamsText),
+        args: null,
-        headers:
+        env: null,
-          state.transport === "stdio"
+        cwd: null,
-            ? null
-            : parseJsonStringMap("Request headers", state.headersText),
-        command: state.transport === "stdio" ? state.command.trim() : null,
-        args:
-          state.transport === "stdio"
-            ? parseJsonStringArray("Args", state.argsText)
-            : null,
-        env:
-          state.transport === "stdio"
-            ? parseJsonStringMap("Environment", state.envText)
-            : null,
-        cwd: state.transport === "stdio" ? trimToNull(state.cwd) : null,
       },
     };
   }
     oauthSecretRefTarget !== null &&
     expandedOauthSecretRefTarget === oauthSecretRefTarget;
-  const setField = <K extends keyof SourceFormState>(
+  const setField = <K extends keyof SourceFormBase>(
     key: K,
-    value: SourceFormState[K],
+    value: SourceFormBase[K],
   ) => {
     setFormState((current) => ({ ...current, [key]: value }));
   };
+  const setTransport = (transport: McpTransportValue) => {
+    setFormState((current) => ({
+      ...current,
+      ...setMcpTransportFieldsTransport(current, transport),
+    }));
+  };
+  const setRemoteTransportField = <
+    K extends Exclude<keyof McpRemoteTransportFields, "transport">,
+  >(
+    key: K,
+    value: McpRemoteTransportFields[K],
+  ) => {
+    setFormState((current) =>
+      current.transport === "stdio" ? current : { ...current, [key]: value },
+    );
+  };
+  const setStdioTransportField = <
+    K extends Exclude<keyof McpStdioTransportFields, "transport">,
+  >(
+    key: K,
+    value: McpStdioTransportFields[K],
+  ) => {
+    setFormState((current) =>
+      current.transport === "stdio" ? { ...current, [key]: value } : current,
+    );
+  };
   const applyTemplate = (template: SourceTemplate) => {
     setSelectedTemplateId(template.id);
     setFormState((current) => ({
                 <Field label="Transport mode">
                   <SelectInput
                     value={formState.transport || "auto"}
-                    onChange={(value) =>
+                    onChange={(value) => setTransport(value as McpTransportValue)}
-                      setField("transport", value as TransportValue)
-                    }
                     options={transportOptions.map((value) => ({
                       value,
                       label: value,
                     <Field label="Command">
                       <TextInput
                         value={formState.command}
-                        onChange={(value) => setField("command", value)}
+                        onChange={(value) =>
+                          setStdioTransportField("command", value)
+                        }
                         placeholder="npx"
                         mono
                       />
                     <Field label="Working directory (optional)">
                       <TextInput
                         value={formState.cwd}
-                        onChange={(value) => setField("cwd", value)}
+                        onChange={(value) =>
+                          setStdioTransportField("cwd", value)
+                        }
                         placeholder="/path/to/project"
                         mono
                       />
                     <Field label="Args (JSON)" className="sm:col-span-2">
                       <CodeEditor
                         value={formState.argsText}
-                        onChange={(value) => setField("argsText", value)}
+                        onChange={(value) =>
+                          setStdioTransportField("argsText", value)
+                        }
                         placeholder={
                           '[\n  "-y",\n  "chrome-devtools-mcp@latest"\n]'
                         }
                     <Field label="Environment (JSON)" className="sm:col-span-2">
                       <CodeEditor
                         value={formState.envText}
-                        onChange={(value) => setField("envText", value)}
+                        onChange={(value) =>
+                          setStdioTransportField("envText", value)
+                        }
                         placeholder={
                           '{\n  "CHROME_PATH": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"\n}'
                         }
                     <Field label="Query params (JSON)">
                       <CodeEditor
                         value={formState.queryParamsText}
-                        onChange={(value) => setField("queryParamsText", value)}
+                        onChange={(value) =>
+                          setRemoteTransportField("queryParamsText", value)
+                        }
                         placeholder={'{\n  "workspace": "demo"\n}'}
                       />
                     </Field>
                     <Field label="Headers (JSON)">
                       <CodeEditor
                         value={formState.headersText}
-                        onChange={(value) => setField("headersText", value)}
+                        onChange={(value) =>
+                          setRemoteTransportField("headersText", value)
+                        }
                         placeholder={'{\n  "x-api-key": "..."\n}'}
                       />
                     </Field>