AddGraphqlSource.tsx

import { useCallback, useMemo, useState } from "react";
import { useAtomSet } from "@effect/atom-react";
import * as Exit from "effect/Exit";

import { integrationWriteKeys } from "@executor-js/react/api/reactivity-keys";
import {
  integrationDisplayNameFromUrl,
  slugifyNamespace,
  useIntegrationIdentity,
} from "@executor-js/react/plugins/integration-identity";
import { Button } from "@executor-js/react/components/button";
import {
  AuthMethodListEditor,
  useAuthMethodList,
  type AuthMethodRow,
  type AuthMethodSeed,
} from "@executor-js/react/components/auth-method-list-editor";
import { FloatActions } from "@executor-js/react/components/float-actions";
import {
  addIntegrationErrorMessage,
  FormErrorAlert,
  SlugCollisionAlert,
  useSlugAlreadyExists,
} from "@executor-js/react/lib/integration-add";

import { addGraphqlIntegrationOptimistic } from "./atoms";
import { GraphqlSourceFields } from "./GraphqlSourceFields";
import { graphqlAuthMethodInputsFromPlacements } from "./auth-method-config";
import type { GraphqlAuthMethodInput } from "../sdk/types";

// v2 GraphQL add flow: register the integration with its declared auth-method
// LIST (the shared `AuthMethodListEditor` — GraphQL stays header/query apiKey;
// OAuth is hidden), then route to the integration's detail hub. Connection
// creation is no longer part of the add flow — accounts are added from the hub
// (P6: add without auth, connect later).

// GraphQL has no add-time detection, so the list starts empty (module constant
// — a fresh [] every render would re-seed the list each render).
const NO_SEEDS: readonly AuthMethodSeed[] = [];

export default function AddGraphqlSource(props: {
  onComplete: (slug?: string) => void;
  onCancel: () => void;
  initialUrl?: string;
}) {
  const [endpoint, setEndpoint] = useState(props.initialUrl ?? "");
  const [description, setDescription] = useState("");
  const identity = useIntegrationIdentity({
    fallbackName: integrationDisplayNameFromUrl(endpoint, "GraphQL") ?? "",
  });
  const authMethodList = useAuthMethodList(NO_SEEDS);
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);

  const doAddIntegration = useAtomSet(addGraphqlIntegrationOptimistic, {
    mode: "promiseExit",
  });

  // The methods to register: each apikey row declares ONE method carrying
  // every named placement (header + query mix in a single method). Inputs
  // omit slugs — the backend assigns carrier-derived ones. `none` rows
  // register nothing.
  const authenticationTemplate = useMemo<readonly GraphqlAuthMethodInput[]>(
    () =>
      authMethodList.rows.flatMap((row: AuthMethodRow) =>
        row.value.kind === "apikey"
          ? graphqlAuthMethodInputsFromPlacements(row.value.placements)
          : [],
      ),
    [authMethodList.rows],
  );

  // Every apikey row needs at least one named placement; `none` rows are
  // always valid.
  const apiKeyComplete = authMethodList.rows.every(
    (row: AuthMethodRow) =>
      row.value.kind !== "apikey" ||
      row.value.placements.some((placement) => placement.name.trim().length > 0),
  );

  const resolvedSlug = useMemo(
    () =>
      slugifyNamespace(identity.namespace) ||
      slugifyNamespace(integrationDisplayNameFromUrl(endpoint.trim(), "GraphQL") ?? "") ||
      "graphql",
    [endpoint, identity.namespace],
  );

  // Pre-empt the API's `IntegrationAlreadyExistsError`: adding an integration
  // whose slug already exists clobbers the existing one's connections/policies,
  // so the API blocks it. Surface that here from the tenant-scoped catalog list.
  const slugAlreadyExists = useSlugAlreadyExists(resolvedSlug);

  const canAdd = endpoint.trim().length > 0 && apiKeyComplete && !adding && !slugAlreadyExists;

  const sourceIdentity = useCallback(() => {
    const trimmedEndpoint = endpoint.trim();
    const slug = resolvedSlug;
    const displayName =
      identity.name.trim() || integrationDisplayNameFromUrl(trimmedEndpoint, "GraphQL") || slug;
    return { trimmedEndpoint, slug, displayName };
  }, [endpoint, identity.name, resolvedSlug]);

  const handleAdd = async (): Promise<void> => {
    setAdding(true);
    setAddError(null);
    const { trimmedEndpoint, slug, displayName } = sourceIdentity();

    const integrationExit = await doAddIntegration({
      payload: {
        endpoint: trimmedEndpoint,
        slug,
        name: displayName,
        ...(description.trim().length > 0 ? { description: description.trim() } : {}),
        ...(authenticationTemplate.length > 0
          ? { authenticationTemplate: [...authenticationTemplate] }
          : {}),
      },
      reactivityKeys: integrationWriteKeys,
    });
    if (Exit.isFailure(integrationExit)) {
      setAddError(addIntegrationErrorMessage(integrationExit, slug, "Failed to add source"));
      setAdding(false);
      return;
    }
    const registeredSlug = integrationExit.value.slug;

    props.onComplete(String(registeredSlug));
  };

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

      <GraphqlSourceFields
        endpoint={endpoint}
        onEndpointChange={setEndpoint}
        identity={identity}
        description={description}
        onDescriptionChange={setDescription}
      />

      <AuthMethodListEditor
        list={authMethodList}
        allowedKinds={["none", "apikey"]}
        emptyHint="No authentication declared. Add a method, or add the integration without auth and connect an account from the integration page later."
        footerHint="Every method here is registered with the integration. Connect an account from the integration page after adding."
      />

      {slugAlreadyExists && !adding && <SlugCollisionAlert slug={resolvedSlug} />}

      {addError && <FormErrorAlert message={addError} />}

      <FloatActions>
        <Button variant="ghost" onClick={() => props.onCancel()} disabled={adding}>
          Cancel
        </Button>
        <Button onClick={() => void handleAdd()} disabled={!canAdd} loading={adding}>
          Add integration
        </Button>
      </FloatActions>
    </div>
  );
}