import { useCallback } from "react";import { useAtomSet, useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"; import { connectionsAtom } from "@executor-js/react/api/atoms";import { useScope, useUserScope } from "@executor-js/react/api/scope-context";import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";import {  OAuthSignInButton,  oauthCallbackUrl,  oauthConnectionId,  useOAuthPopupFlow,  type OAuthCompletionPayload,} from "@executor-js/react/plugins/oauth-sign-in";import { slugifyNamespace } from "@executor-js/react/plugins/source-identity";import { ConnectionId, ScopeId } from "@executor-js/sdk/core"; import { graphqlSourceAtom, graphqlSourceBindingsAtom, setGraphqlSourceBinding } from "./atoms";import type {  ConfiguredGraphqlCredentialValue,  GraphqlSourceBindingRef,  HeaderValue,} from "../sdk/types"; const valuesForOAuth = (  values: Record<string, ConfiguredGraphqlCredentialValue>,  bindings: readonly GraphqlSourceBindingRef[],): Record<string, HeaderValue> | undefined => {  const bySlot = new Map(bindings.map((binding) => [binding.slot, binding]));  const out: Record<string, HeaderValue> = {};  for (const [name, value] of Object.entries(values)) {    if (typeof value === "string") {      out[name] = value;      continue;    }    const binding = bySlot.get(value.slot);    if (binding?.value.kind === "secret") {      out[name] = value.prefix        ? { secretId: binding.value.secretId, prefix: value.prefix }        : { secretId: binding.value.secretId };    } else if (binding?.value.kind === "text") {      out[name] = binding.value.text;    }  }  return Object.keys(out).length > 0 ? out : undefined;}; export default function GraphqlSignInButton(props: { sourceId: string }) {  const scopeId = useScope();  const userScopeId = useUserScope();  const sourceResult = useAtomValue(graphqlSourceAtom(scopeId, props.sourceId));  const source =    AsyncResult.isSuccess(sourceResult) && sourceResult.value ? sourceResult.value : null;  const sourceScope = source ? ScopeId.make(source.scope) : scopeId;  const bindingsResult = useAtomValue(    graphqlSourceBindingsAtom(scopeId, props.sourceId, sourceScope),  );  const connectionsResult = useAtomValue(connectionsAtom(scopeId));  const setBinding = useAtomSet(setGraphqlSourceBinding, { mode: "promise" });  const oauth = useOAuthPopupFlow({    popupName: "graphql-oauth",  });   const oauth2 = source?.auth.kind === "oauth2" ? source.auth : null;  const bindings = AsyncResult.isSuccess(bindingsResult) ? bindingsResult.value : null;  const connectionBinding = bindings?.find(    (binding) => oauth2 !== null && binding.slot === oauth2.connectionSlot,  );  const boundConnectionId =    connectionBinding?.value.kind === "connection" ? connectionBinding.value.connectionId : null;  const connections = AsyncResult.isSuccess(connectionsResult) ? connectionsResult.value : null;  const isConnected =    boundConnectionId !== null &&    connections !== null &&    connections.some((c: { readonly id: string }) => c.id === boundConnectionId);   const handleSignIn = useCallback(async () => {    if (!source || !oauth2) return;    const namespaceSlug = slugifyNamespace(source.namespace) || "graphql";    await oauth.start({      payload: {        endpoint: source.endpoint,        redirectUrl: oauthCallbackUrl(),        connectionId: oauthConnectionId({          pluginId: "graphql",          namespace: namespaceSlug,        }),        headers: valuesForOAuth(source.headers, bindings ?? []),        queryParams: valuesForOAuth(source.queryParams, bindings ?? []),        tokenScope: userScopeId,        strategy: { kind: "dynamic-dcr" },        pluginId: "graphql",        identityLabel: `${source.name.trim() || source.namespace || "GraphQL"} OAuth`,      },      onSuccess: async (result: OAuthCompletionPayload) => {        await setBinding({          params: { scopeId },          payload: {            sourceId: props.sourceId,            sourceScope,            scope: userScopeId,            slot: oauth2.connectionSlot,            value: { kind: "connection", connectionId: ConnectionId.make(result.connectionId) },          },          reactivityKeys: [...sourceWriteKeys, ...connectionWriteKeys],        });      },    });  }, [    source,    oauth2,    bindings,    scopeId,    props.sourceId,    sourceScope,    setBinding,    oauth,    userScopeId,  ]);   if (!oauth2) return null;   return (    <OAuthSignInButton      busy={oauth.busy}      error={oauth.error}      isConnected={isConnected}      onSignIn={() => void handleSignIn()}    />  );}