Refactor HTTP credential UI composition

Author: RhysSullivan

packages/plugins/google-discovery/src/react/AddGoogleDiscoverySource.tsx

@@ -7,7 +7,7 @@ import * as Schema from "effect/Schema";
 import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { useScope, useUserScope } from "@executor-js/react/api/scope-context";
 import type { SecretPickerSecret } from "@executor-js/react/plugins/secret-picker";
-import { CreatableSecretPicker } from "@executor-js/react/plugins/secret-header-auth";
+import { CreatableSecretPicker } from "@executor-js/react/plugins/creatable-secret-picker";
 import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
 import type { ScopeId } from "@executor-js/sdk";
 import { Badge } from "@executor-js/react/components/badge";

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

@@ -7,7 +7,7 @@ import * as Schema from "effect/Schema";
 import { useScope } from "@executor-js/react/api/scope-context";
 import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import {
-  HttpCredentialsEditor,
+  HttpCredentials,
   httpCredentialsValid,
   serializeScopedHttpCredentials,
   serializeHttpCredentials,
@@ -177,15 +177,18 @@ export default function AddGraphqlSource(props: {
 
       <GraphqlSourceFields endpoint={endpoint} onEndpointChange={setEndpoint} identity={identity} />
 
-      <HttpCredentialsEditor
+      <HttpCredentials.Root
         credentials={credentials}
         onChange={setCredentials}
         existingSecrets={secretList}
         sourceName={identity.name}
         targetScope={requestCredentialTargetScope}
         credentialScopeOptions={credentialScopeOptions}
         bindingScopeOptions={credentialScopeOptions}
-      />
+      >
+        <HttpCredentials.Headers />
+        <HttpCredentials.QueryParams />
+      </HttpCredentials.Root>
 
       {/* Temporarily hidden while we revisit GraphQL OAuth discovery and UX. */}
       <section className="hidden space-y-2.5">

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

@@ -12,7 +12,7 @@ import { useScope, useScopeStack } from "@executor-js/react/api/scope-context";
 import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
 import {
-  HttpCredentialsEditor,
+  HttpCredentials,
   serializeHttpCredentials,
   serializeScopedHttpCredentials,
   type HttpCredentialsState,
@@ -191,15 +191,18 @@ function EditForm(props: {
         namespaceReadOnly
       />
 
-      <HttpCredentialsEditor
+      <HttpCredentials.Root
         credentials={credentials}
         onChange={handleCredentialsChange}
         existingSecrets={secretList}
         sourceName={identity.name}
         targetScope={credentialTargetScope}
         credentialScopeOptions={credentialScopeOptions}
         bindingScopeOptions={credentialScopeOptions}
-      />
+      >
+        <HttpCredentials.Headers />
+        <HttpCredentials.QueryParams />
+      </HttpCredentials.Root>
 
       {/* Temporarily hidden while we revisit GraphQL OAuth discovery and UX. */}
       <section className="hidden space-y-2.5">