Share HTTP source credential state

Author: RhysSullivan

packages/plugins/graphql/src/react/AddGraphqlSource.tsx

@@ -9,6 +9,7 @@ import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import {
   HttpCredentials,
   httpCredentialsValid,
+  nonEmptyHttpCredentialFields,
   serializeScopedHttpCredentials,
   serializeHttpCredentials,
   type HttpCredentialsState,
@@ -102,12 +103,11 @@ export default function AddGraphqlSource(props: {
     if (!endpoint.trim() || !httpCredentialsValid(credentials)) return;
     setAddError(null);
     const { trimmedEndpoint, namespace, displayName } = sourceIdentity();
-    const { headers, queryParams } = serializeHttpCredentials(credentials);
+    const requestCredentials = nonEmptyHttpCredentialFields(serializeHttpCredentials(credentials));
     await oauth.start({
       payload: {
         endpoint: trimmedEndpoint,
-        ...(Object.keys(headers).length > 0 ? { headers } : {}),
-        ...(Object.keys(queryParams).length > 0 ? { queryParams } : {}),
+        ...requestCredentials,
         redirectUrl: oauthCallbackUrl(),
         connectionId: oauthConnectionId({ pluginId: "graphql", namespace }),
         tokenScope: oauthCredentialTargetScope,
@@ -133,6 +133,10 @@ export default function AddGraphqlSource(props: {
       credentials,
       requestCredentialTargetScope,
     );
+    const requestCredentials = nonEmptyHttpCredentialFields({
+      headers: headerMap as Record<string, GraphqlCredentialInput>,
+      queryParams: queryParams as Record<string, GraphqlCredentialInput>,
+    });
 
     const { trimmedEndpoint, namespace, displayName } = sourceIdentity();
     const exit = await doAdd({
@@ -142,12 +146,7 @@ export default function AddGraphqlSource(props: {
         endpoint: trimmedEndpoint,
         name: displayName,
         namespace,
-        ...(Object.keys(headerMap).length > 0 ? { headers: headerMap } : {}),
-        ...(Object.keys(queryParams).length > 0
-          ? {
-              queryParams: queryParams as Record<string, GraphqlCredentialInput>,
-            }
-          : {}),
+        ...requestCredentials,
         credentialTargetScope:
           authMode === "oauth2" && tokens
             ? oauthCredentialTargetScope

packages/plugins/graphql/src/react/EditGraphqlSource.tsx

@@ -3,33 +3,24 @@ import { useAtomValue, useAtomSet } from "@effect/atom-react";
 import * as Exit from "effect/Exit";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 import { graphqlSourceAtom, updateGraphqlSource } from "./atoms";
-import {
-  connectionsAtom,
-  setSourceCredentialBinding,
-  sourceCredentialBindingsAtom,
-} from "@executor-js/react/api/atoms";
-import { useScope, useScopeStack } from "@executor-js/react/api/scope-context";
-import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
+import { sourceCredentialBindingsAtom } from "@executor-js/react/api/atoms";
+import { useScope } from "@executor-js/react/api/scope-context";
+import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
-import {
-  HttpCredentials,
-  serializeHttpCredentials,
-  serializeScopedHttpCredentials,
-  type HttpCredentialsState,
-} from "@executor-js/react/plugins/http-credentials";
-import {
-  effectiveCredentialBindingForScope,
-  httpCredentialsFromConfiguredCredentialBindings,
-  initialCredentialTargetScope,
-} from "@executor-js/react/plugins/credential-bindings";
+import { HttpCredentials } from "@executor-js/react/plugins/http-credentials";
+import { useHttpCredentialEditor } from "@executor-js/react/plugins/http-credential-state";
+import { initialCredentialTargetScope } from "@executor-js/react/plugins/credential-bindings";
 import { slugifyNamespace, useSourceIdentity } from "@executor-js/react/plugins/source-identity";
 import { useCredentialTargetScope } from "@executor-js/react/plugins/credential-target-scope";
 import { Button } from "@executor-js/react/components/button";
 import { FilterTabs } from "@executor-js/react/components/filter-tabs";
-import { SourceOAuthConnectionControl } from "@executor-js/react/plugins/source-oauth-connection";
+import {
+  SourceOAuthConnectionControl,
+  useSourceOAuthConnectionBinding,
+} from "@executor-js/react/plugins/source-oauth-connection";
 import { Badge } from "@executor-js/react/components/badge";
 import { ScopeId } from "@executor-js/sdk/core";
-import type { CredentialBindingRef } from "@executor-js/sdk/core";
+import type { SourceCredentialBindingRef } from "@executor-js/react/plugins/credential-bindings";
 import { GraphqlSourceFields } from "./GraphqlSourceFields";
 import { GRAPHQL_OAUTH_CONNECTION_SLOT, type GraphqlCredentialInput } from "../sdk/types";
 import type { StoredGraphqlSource } from "../sdk/store";
@@ -44,15 +35,16 @@ type AuthMode = "none" | "oauth2";
 function EditForm(props: {
   sourceId: string;
   initial: EditableSource;
-  bindings: readonly CredentialBindingRef[];
+  bindings: readonly SourceCredentialBindingRef[];
   onSave: () => void;
 }) {
   const displayScope = useScope();
-  const scopeStack = useScopeStack();
   const sourceScope = ScopeId.make(props.initial.scope);
-  const { credentialTargetScope, credentialScopeOptions } = useCredentialTargetScope({
+  const credentialEditor = useHttpCredentialEditor({
     sourceScope,
-    initialTargetScope: initialCredentialTargetScope(sourceScope, props.bindings),
+    headers: props.initial.headers,
+    queryParams: props.initial.queryParams,
+    bindings: props.bindings,
   });
   const {
     credentialTargetScope: oauthCredentialTargetScope,
@@ -62,61 +54,35 @@ function EditForm(props: {
     initialTargetScope: initialCredentialTargetScope(sourceScope, props.bindings),
   });
   const doUpdate = useAtomSet(updateGraphqlSource, { mode: "promiseExit" });
-  const setBinding = useAtomSet(setSourceCredentialBinding, { mode: "promise" });
   const secretList = useSecretPickerSecrets();
-  const connectionsResult = useAtomValue(connectionsAtom(displayScope));
 
   const identity = useSourceIdentity({
     fallbackName: props.initial.name,
     fallbackNamespace: props.initial.namespace,
   });
   const [endpoint, setEndpoint] = useState(props.initial.endpoint);
-  const [credentials, setCredentials] = useState<HttpCredentialsState>(() =>
-    httpCredentialsFromConfiguredCredentialBindings({
-      headers: props.initial.headers,
-      queryParams: props.initial.queryParams,
-      bindings: props.bindings,
-    }),
-  );
   const [authMode, setAuthMode] = useState<AuthMode>(props.initial.auth.kind);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [credentialsDirty, setCredentialsDirty] = useState(false);
   const [authDirty, setAuthDirty] = useState(false);
 
   const identityDirty = identity.name.trim() !== props.initial.name.trim();
   const metadataDirty = identityDirty || endpoint.trim() !== props.initial.endpoint.trim();
-  const dirty = metadataDirty || credentialsDirty || authDirty;
+  const dirty = metadataDirty || credentialEditor.credentialsDirty || authDirty;
   const oauth2 = props.initial.auth.kind === "oauth2" ? props.initial.auth : null;
-  const connections = AsyncResult.isSuccess(connectionsResult) ? connectionsResult.value : [];
-  const scopeRanks = new Map(scopeStack.map((scope, index) => [scope.id, index] as const));
-  const connectionBinding = oauth2
-    ? effectiveCredentialBindingForScope(
-        props.bindings,
-        oauth2.connectionSlot,
-        oauthCredentialTargetScope,
-        scopeRanks,
-      )
-    : null;
-  const boundConnectionId =
-    connectionBinding?.value.kind === "connection" ? connectionBinding.value.connectionId : null;
-  const isConnected =
-    boundConnectionId !== null &&
-    connections.some((connection) => connection.id === boundConnectionId);
-  const oauthRequestCredentials = serializeHttpCredentials(credentials);
-
-  const handleCredentialsChange = (next: HttpCredentialsState) => {
-    setCredentials(next);
-    setCredentialsDirty(true);
-  };
+  const oauthConnection = useSourceOAuthConnectionBinding({
+    pluginId: "graphql",
+    sourceId: props.sourceId,
+    sourceScope,
+    slotKey: oauth2?.connectionSlot ?? GRAPHQL_OAUTH_CONNECTION_SLOT,
+    targetScope: oauthCredentialTargetScope,
+    bindings: props.bindings,
+  });
 
   const handleSave = async () => {
     setSaving(true);
     setError(null);
-    const { headers, queryParams } = serializeScopedHttpCredentials(
-      credentials,
-      credentialTargetScope,
-    );
+    const { headers, queryParams } = credentialEditor.serializeScopedCredentials();
     const payload: {
       sourceScope: ScopeId;
       name?: string;
@@ -130,10 +96,10 @@ function EditForm(props: {
       name: metadataDirty ? identity.name.trim() || undefined : undefined,
       endpoint: metadataDirty ? endpoint.trim() || undefined : undefined,
     };
-    if (credentialsDirty) {
+    if (credentialEditor.credentialsDirty) {
       payload.headers = headers;
       payload.queryParams = queryParams as Record<string, GraphqlCredentialInput>;
-      payload.credentialTargetScope = credentialTargetScope;
+      payload.credentialTargetScope = credentialEditor.credentialTargetScope;
     }
     if (authDirty) {
       payload.auth =
@@ -146,7 +112,7 @@ function EditForm(props: {
                   : GRAPHQL_OAUTH_CONNECTION_SLOT,
             }
           : { kind: "none" };
-      payload.credentialTargetScope = credentialTargetScope;
+      payload.credentialTargetScope = credentialEditor.credentialTargetScope;
     }
     const exit = await doUpdate({
       params: { scopeId: displayScope, namespace: props.sourceId },
@@ -160,7 +126,7 @@ function EditForm(props: {
       return;
     }
 
-    setCredentialsDirty(false);
+    credentialEditor.resetCredentialsDirty();
     setAuthDirty(false);
     props.onSave();
     setSaving(false);
@@ -192,13 +158,13 @@ function EditForm(props: {
       />
 
       <HttpCredentials.Root
-        credentials={credentials}
-        onChange={handleCredentialsChange}
+        credentials={credentialEditor.credentials}
+        onChange={credentialEditor.onCredentialsChange}
         existingSecrets={secretList}
         sourceName={identity.name}
-        targetScope={credentialTargetScope}
-        credentialScopeOptions={credentialScopeOptions}
-        bindingScopeOptions={credentialScopeOptions}
+        targetScope={credentialEditor.credentialTargetScope}
+        credentialScopeOptions={credentialEditor.credentialScopeOptions}
+        bindingScopeOptions={credentialEditor.credentialScopeOptions}
       >
         <HttpCredentials.Headers />
         <HttpCredentials.QueryParams />
@@ -236,26 +202,13 @@ function EditForm(props: {
           endpoint={endpoint.trim()}
           tokenScope={oauthCredentialTargetScope}
           onTokenScopeChange={setOAuthCredentialTargetScope}
-          credentialScopeOptions={credentialScopeOptions}
-          connectionId={boundConnectionId}
+          credentialScopeOptions={credentialEditor.credentialScopeOptions}
+          connectionId={oauthConnection.connectionId}
           sourceLabel={`${identity.name.trim() || props.initial.namespace || "GraphQL"} OAuth`}
-          headers={oauthRequestCredentials.headers}
-          queryParams={oauthRequestCredentials.queryParams}
-          isConnected={isConnected}
-          onConnected={async (connectionId) => {
-            await setBinding({
-              params: { scopeId: oauthCredentialTargetScope },
-              payload: {
-                targetScope: oauthCredentialTargetScope,
-                pluginId: "graphql",
-                sourceId: props.sourceId,
-                sourceScope,
-                slotKey: oauth2.connectionSlot,
-                value: { kind: "connection", connectionId },
-              },
-              reactivityKeys: [...sourceWriteKeys, ...connectionWriteKeys],
-            });
-          }}
+          headers={credentialEditor.requestCredentials.headers}
+          queryParams={credentialEditor.requestCredentials.queryParams}
+          isConnected={oauthConnection.isConnected}
+          onConnected={oauthConnection.onConnected}
         />
       )}
 

packages/plugins/mcp/src/react/AddMcpSource.tsx

@@ -22,6 +22,7 @@ import {
   emptyHttpCredentials,
   HttpCredentials,
   httpCredentialsValid,
+  nonEmptyHttpCredentialFields,
   serializeScopedHttpCredentials,
   serializeHttpCredentials,
 } from "@executor-js/react/plugins/http-credentials";
@@ -323,13 +324,14 @@ export default function AddMcpSource(props: {
 
   const handleProbe = useCallback(async () => {
     dispatch({ type: "probe-start" });
-    const { headers, queryParams } = serializeHttpCredentials(remoteCredentials);
+    const requestCredentials = nonEmptyHttpCredentialFields(
+      serializeHttpCredentials(remoteCredentials),
+    );
     const exit = await doProbe({
       params: { scopeId },
       payload: {
         endpoint: state.url.trim(),
-        ...(Object.keys(headers).length > 0 ? { headers } : {}),
-        ...(Object.keys(queryParams).length > 0 ? { queryParams } : {}),
+        ...requestCredentials,
       },
     });
     if (Exit.isFailure(exit)) {
@@ -371,12 +373,13 @@ export default function AddMcpSource(props: {
       slugifyNamespace(remoteIdentity.namespace) ||
       slugifyNamespace(probe?.namespace ?? "") ||
       "mcp";
-    const { headers, queryParams } = serializeHttpCredentials(remoteCredentials);
+    const requestCredentials = nonEmptyHttpCredentialFields(
+      serializeHttpCredentials(remoteCredentials),
+    );
     await oauth.start({
       payload: {
         endpoint: state.url.trim(),
-        ...(Object.keys(headers).length > 0 ? { headers } : {}),
-        ...(Object.keys(queryParams).length > 0 ? { queryParams } : {}),
+        ...requestCredentials,
         redirectUrl: oauthCallbackUrl(),
         connectionId: oauthConnectionId({
           pluginId: "mcp",
@@ -427,6 +430,10 @@ export default function AddMcpSource(props: {
       remoteCredentials,
       requestCredentialTargetScope,
     );
+    const requestCredentials = nonEmptyHttpCredentialFields({
+      headers: credentials.headers as Record<string, McpCredentialInput>,
+      queryParams: credentials.queryParams as Record<string, McpCredentialInput>,
+    });
     const displayName = remoteIdentity.name.trim() || probe.serverName || probe.name;
     const slugNamespace = slugifyNamespace(remoteIdentity.namespace);
     const exit = await doAdd({
@@ -442,12 +449,7 @@ export default function AddMcpSource(props: {
           remoteAuthMode === "oauth2" && tokens
             ? oauthCredentialTargetScope
             : requestCredentialTargetScope,
-        ...(Object.keys(credentials.headers).length > 0
-          ? { headers: credentials.headers as Record<string, McpCredentialInput> }
-          : {}),
-        ...(Object.keys(credentials.queryParams).length > 0
-          ? { queryParams: credentials.queryParams }
-          : {}),
+        ...requestCredentials,
       },
       reactivityKeys: sourceWriteKeys,
     });