AddGraphqlSource.tsx

import { useCallback, useState } from "react";
import { useAtomSet } from "@effect/atom-react";
import * as Exit from "effect/Exit";
import * as Option from "effect/Option";
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 {
  HttpCredentialEditor,
  useHttpCredentialEditorController,
} from "@executor-js/react/plugins/http-credential-state";
import {
  sourceDisplayNameFromUrl,
  slugifyNamespace,
  useSourceIdentity,
} from "@executor-js/react/plugins/source-identity";
import {
  oauthCallbackUrl,
  oauthConnectionId,
  useOAuthPopupFlow,
  type OAuthCompletionPayload,
} from "@executor-js/react/plugins/oauth-sign-in";
import {
  CredentialControlField,
  CredentialUsageRow,
  useCredentialTargetScope,
} from "@executor-js/react/plugins/credential-target-scope";
import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
import { Button } from "@executor-js/react/components/button";
import { FloatActions } from "@executor-js/react/components/float-actions";
import { Spinner } from "@executor-js/react/components/spinner";
import { addGraphqlSourceOptimistic } from "./atoms";
import { initialGraphqlCredentials } from "./defaults";
import { GraphqlSourceFields } from "./GraphqlSourceFields";
import type { GraphqlCredentialInput } from "../sdk/types";

const ErrorMessage = Schema.Struct({ message: Schema.String });
const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);

const errorMessageFromExit = (exit: Exit.Exit<unknown, unknown>, fallback: string): string =>
  Option.match(Option.flatMap(Exit.findErrorOption(exit), decodeErrorMessage), {
    onNone: () => fallback,
    onSome: ({ message }) => message,
  });

type AuthMode = "none" | "oauth2";

export default function AddGraphqlSource(props: {
  onComplete: () => void;
  onCancel: () => void;
  initialUrl?: string;
}) {
  const [endpoint, setEndpoint] = useState(props.initialUrl ?? "");
  const identity = useSourceIdentity({
    fallbackName: sourceDisplayNameFromUrl(endpoint, "GraphQL") ?? "",
  });
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);
  const [authMode, setAuthMode] = useState<AuthMode>("none");
  const [tokens, setTokens] = useState<OAuthCompletionPayload | null>(null);

  const scopeId = useScope();
  const { credentialTargetScope: requestCredentialTargetScope } = useCredentialTargetScope();
  const {
    credentialTargetScope: oauthCredentialTargetScope,
    setCredentialTargetScope: setOAuthCredentialTargetScope,
    credentialScopeOptions,
  } = useCredentialTargetScope();
  const doAdd = useAtomSet(addGraphqlSourceOptimistic(scopeId), {
    mode: "promiseExit",
  });
  const secretList = useSecretPickerSecrets();
  const credentialEditor = useHttpCredentialEditorController({
    initialCredentials: initialGraphqlCredentials(),
    targetScope: requestCredentialTargetScope,
    existingSecrets: secretList,
    sourceName: identity.name,
    credentialScopeOptions,
    bindingScopeOptions: credentialScopeOptions,
  });
  const oauth = useOAuthPopupFlow({
    popupName: "graphql-oauth",
    startErrorMessage: "Failed to start OAuth",
  });

  const canAdd =
    endpoint.trim().length > 0 &&
    credentialEditor.state.valid &&
    (authMode === "none" || tokens !== null) &&
    !oauth.busy;

  const sourceIdentity = useCallback(() => {
    const trimmedEndpoint = endpoint.trim();
    const namespace =
      slugifyNamespace(identity.namespace) ||
      slugifyNamespace(sourceDisplayNameFromUrl(trimmedEndpoint, "GraphQL") ?? "") ||
      "graphql";
    const displayName =
      identity.name.trim() || sourceDisplayNameFromUrl(trimmedEndpoint, "GraphQL") || namespace;
    return { trimmedEndpoint, namespace, displayName };
  }, [endpoint, identity.name, identity.namespace]);

  const handleOAuth = useCallback(async () => {
    if (!endpoint.trim() || !credentialEditor.state.valid) return;
    setAddError(null);
    const { trimmedEndpoint, namespace, displayName } = sourceIdentity();
    await oauth.start({
      payload: {
        endpoint: trimmedEndpoint,
        ...credentialEditor.serialized.requestFields,
        redirectUrl: oauthCallbackUrl(),
        connectionId: oauthConnectionId({ pluginId: "graphql", namespace }),
        tokenScope: oauthCredentialTargetScope,
        strategy: { kind: "dynamic-dcr" },
        pluginId: "graphql",
        identityLabel: `${displayName} OAuth`,
      },
      onSuccess: (result) => {
        setTokens({
          connectionId: result.connectionId,
          expiresAt: result.expiresAt,
          scope: result.scope,
        });
      },
      onError: setAddError,
    });
  }, [endpoint, credentialEditor, oauth, sourceIdentity, oauthCredentialTargetScope]);

  const handleAdd = async () => {
    setAdding(true);
    setAddError(null);
    const requestCredentials = credentialEditor.serialized.scopedFields<GraphqlCredentialInput>();

    const { trimmedEndpoint, namespace, displayName } = sourceIdentity();
    const exit = await doAdd({
      params: { scopeId },
      payload: {
        targetScope: scopeId,
        endpoint: trimmedEndpoint,
        name: displayName,
        namespace,
        ...requestCredentials,
        credentialTargetScope:
          authMode === "oauth2" && tokens
            ? oauthCredentialTargetScope
            : requestCredentialTargetScope,
        ...(authMode === "oauth2" && tokens
          ? {
              auth: {
                kind: "oauth2" as const,
                connectionId: tokens.connectionId,
              },
            }
          : {}),
      },
      reactivityKeys: sourceWriteKeys,
    });
    if (Exit.isFailure(exit)) {
      setAddError(errorMessageFromExit(exit, "Failed to add source"));
      setAdding(false);
      return;
    }
    props.onComplete();
  };

  return (
    <div className="flex flex-1 flex-col gap-6">
      <h1 className="text-xl font-semibold text-foreground">Add GraphQL Source</h1>

      <GraphqlSourceFields endpoint={endpoint} onEndpointChange={setEndpoint} identity={identity} />

      <HttpCredentialEditor.Provider controller={credentialEditor}>
        <HttpCredentialEditor.Headers />
        <HttpCredentialEditor.QueryParams />
      </HttpCredentialEditor.Provider>

      {/* Temporarily hidden while we revisit GraphQL OAuth discovery and UX. */}
      <section className="hidden space-y-2.5">
        <HttpCredentialEditor.Auth.Root
          label="Authentication"
          value={authMode}
          onValueChange={(value) => {
            setAuthMode(value === "oauth2" ? "oauth2" : "none");
            setTokens(null);
          }}
        >
          <HttpCredentialEditor.Auth.None />
          <HttpCredentialEditor.Auth.OAuth value="oauth2" label="OAuth" />
        </HttpCredentialEditor.Auth.Root>

        {authMode === "oauth2" && (
          <CredentialUsageRow
            value={oauthCredentialTargetScope}
            options={credentialScopeOptions}
            onChange={(targetScope) => {
              setOAuthCredentialTargetScope(targetScope);
              setTokens(null);
            }}
            label="Connection saved to"
            help="Choose who can use the OAuth connection."
          >
            <CredentialControlField label="Connect via OAuth" help="Start the provider OAuth flow.">
              <div className="flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
                {tokens ? (
                  <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
                    Authenticated
                  </span>
                ) : (
                  <span className="text-xs text-muted-foreground">Not connected</span>
                )}
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  className="ml-auto h-7 px-2 text-xs"
                  onClick={() => void handleOAuth()}
                  disabled={!endpoint.trim() || !credentialEditor.state.valid || oauth.busy}
                >
                  {oauth.busy ? "Signing in..." : tokens ? "Reconnect" : "Sign in"}
                </Button>
              </div>
            </CredentialControlField>
          </CredentialUsageRow>
        )}
      </section>

      {/* Error */}
      {addError && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
          <p className="text-[12px] text-destructive">{addError}</p>
        </div>
      )}

      <FloatActions>
        <Button
          variant="ghost"
          onClick={() => {
            oauth.cancel();
            props.onCancel();
          }}
          disabled={adding}
        >
          Cancel
        </Button>
        <Button onClick={handleAdd} disabled={!canAdd || adding}>
          {adding && <Spinner className="size-3.5" />}
          {adding ? "Adding..." : "Add source"}
        </Button>
      </FloatActions>
    </div>
  );
}