add discovery, connect, and OAuth hooks to the React SDK

Rename useConnectMcpSource to useStartSourceOAuth and add new hooks: useDiscoverSource, useConnectSource, useRefreshSecrets. Enhance the mutation system with OptimisticMutationResult type and add dev-mode error logging for failed API calls.

Rhys Sullivan committed 8 months ago

Commit 049bed41 parent af725aa1 file · +155 −41Browse files

Unified · Split

packages/react/src/index.ts+155−41

 import { RegistryContext, RegistryProvider, useAtomValue } from "@effect-atom/atom-react";
 import { createControlPlaneClient } from "@executor-v3/control-plane/client";
 import type {
-  ConnectMcpSourcePayload,
+  CompleteSourceOAuthResult,
-  ConnectMcpSourceResult,
+  ConnectSourcePayload,
+  ConnectSourceResult,
   ControlPlaneClient,
   CreateSecretPayload,
   CreateSecretResult,
   CreateSourcePayload,
   DeleteSecretResult,
+  DiscoverSourcePayload,
   InstanceConfig,
   LocalInstallation,
   SecretListItem,
   Source,
+  SourceDiscoveryResult,
   SourceInspection,
   SourceInspectionDiscoverResult,
   SourceInspectionToolDetail,
+  StartSourceOAuthPayload,
+  StartSourceOAuthResult,
   UpdateSecretPayload,
   UpdateSecretResult,
   UpdateSourcePayload,
   invalidateQueries: (target?: InvalidationTarget) => void;
 };
-type MutationOptions<TInput, TOutput> = {
+type OptimisticMutationResult<T> =
-  optimisticUpdate?: (context: MutationExecutionContext, payload: TInput) => void | (() => void);
+  | void
-  onSuccess?: (context: MutationExecutionContext, payload: TInput, data: TOutput) => void;
+  | (() => void)
+  | {
+      rollback?: () => void;
+      value?: T;
+    };
+type MutationOptions<TInput, TOutput, TOptimistic = never> = {
+  optimisticUpdate?: (
+    context: MutationExecutionContext,
+    payload: TInput,
+  ) => OptimisticMutationResult<TOptimistic>;
+  onSuccess?: (
+    context: MutationExecutionContext,
+    payload: TInput,
+    data: TOutput,
+    optimisticValue: TOptimistic | undefined,
+  ) => void;
 };
 type InternalNode<A> = {
 const toError = (cause: unknown): Error =>
   cause instanceof Error ? cause : new Error(String(cause));
+const shouldLogExecutorDevErrors = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const hostname = window.location.hostname;
+  return hostname === "localhost" || hostname === "127.0.0.1";
+};
+const describeExecutorDevError = (cause: unknown): Record<string, unknown> => {
+  if (cause instanceof Error) {
+    return {
+      name: cause.name,
+      message: cause.message,
+      stack: cause.stack,
+    };
+  }
+  return {
+    message: String(cause),
+  };
+};
+const logExecutorDevError = (label: string, details: Record<string, unknown>): void => {
+  if (!shouldLogExecutorDevErrors()) {
+    return;
+  }
+  console.error(`[executor react] ${label}`, details);
+};
 const runControlPlane = <A>(input: {
   accountId?: string;
   execute: (client: ControlPlaneClient) => Effect.Effect<A, unknown, never>;
       baseUrl: apiBaseUrl,
       ...(accountId !== undefined ? { accountId } : {}),
     }).pipe(Effect.flatMap(input.execute)),
-  );
+  ).catch((cause) => {
+    logExecutorDevError("control-plane request failed", {
+      baseUrl: apiBaseUrl,
+      accountId,
+      error: describeExecutorDevError(cause),
+      cause,
+    });
+    throw cause;
+  });
 };
 const controlPlaneRequest = <A>(input: {
   updatedAt: Date.now(),
 });
-const useSourceMutation = <TInput, TOutput>(
+const useSourceMutation = <TInput, TOutput, TOptimistic = never>(
   execute: (input: {
     workspaceId: Source["workspaceId"];
     accountId: string;
     payload: TInput;
   }) => Promise<TOutput>,
-  options?: MutationOptions<TInput, TOutput>,
+  options?: MutationOptions<TInput, TOutput, TOptimistic>,
 ) => {
   const workspace = useWorkspaceRequestContext();
   const { registry, invalidateQueries } = useExecutorQueryContext();
       error: null,
     }));
-    const rollback = options?.optimisticUpdate?.(executionContext, payload);
+    const optimistic = options?.optimisticUpdate?.(executionContext, payload);
+    const rollback = typeof optimistic === "function"
+      ? optimistic
+      : optimistic?.rollback;
+    const optimisticValue = typeof optimistic === "function"
+      ? undefined
+      : optimistic?.value;
     try {
       const data = await execute({
         accountId: workspace.accountId,
         payload,
       });
-      options?.onSuccess?.(executionContext, payload, data);
+      options?.onSuccess?.(executionContext, payload, data, optimisticValue);
       setState({ status: "success", data, error: null });
       return data;
     } catch (cause) {
       rollback?.();
+      logExecutorDevError("source mutation failed", {
+        workspaceId: workspace.workspaceId,
+        accountId: workspace.accountId,
+        payload,
+        error: describeExecutorDevError(cause),
+        cause,
+      });
       const error = cause instanceof Error ? cause : new Error(String(cause));
       setState({ status: "error", data: null, error });
       throw error;
 };
 export const useCreateSource = () =>
-  useSourceMutation<CreateSourcePayload, Source>(
+  useSourceMutation<CreateSourcePayload, Source, Source>(
     React.useCallback(
       ({ workspaceId, accountId, payload }) =>
         runControlPlane({
           payload,
         });
         setCachedAtomValue(context.registry, listAtom, [optimisticSource, ...previousList]);
-        return () => {
+        return {
-          setCachedAtomValue(context.registry, listAtom, previousList);
+          value: optimisticSource,
+          rollback: () => {
+            setCachedAtomValue(context.registry, listAtom, previousList);
+          },
         };
       },
-      onSuccess: (context, _payload, source) => {
+      onSuccess: (context, _payload, source, optimisticSource) => {
         const listAtom = sourcesAtom(encodeSourcesKey(true, context.workspaceId, context.accountId));
         const currentList = getCachedAtomValue(context.registry, listAtom);
         if (currentList !== undefined) {
-          setCachedAtomValue(context.registry, listAtom, upsertSourceInList(currentList, source));
+          const withoutOptimistic = optimisticSource
+            ? currentList.filter((candidate) => candidate.id !== optimisticSource.id)
+            : currentList;
+          setCachedAtomValue(context.registry, listAtom, upsertSourceInList(withoutOptimistic, source));
         }
         setCachedAtomValue(
     },
   );
-export const useConnectMcpSource = () =>
+export const useStartSourceOAuth = () =>
-  useSourceMutation<ConnectMcpSourcePayload, ConnectMcpSourceResult>(
+  useSourceMutation<StartSourceOAuthPayload, StartSourceOAuthResult>(
     React.useCallback(
       ({ workspaceId, accountId, payload }) =>
         runControlPlane({
           accountId,
-          execute: (client) => client.sources.connectMcp({
+          execute: (client) => client.oauth.startSourceAuth({
             path: {
               workspaceId,
             },
         }),
       [],
     ),
-    {
-      onSuccess: (context, _payload, result) => {
-        const listAtom = sourcesAtom(encodeSourcesKey(true, context.workspaceId, context.accountId));
-        const currentList = getCachedAtomValue(context.registry, listAtom);
-        if (currentList !== undefined) {
-          setCachedAtomValue(context.registry, listAtom, upsertSourceInList(currentList, result.source));
-        }
-        setCachedAtomValue(
-          context.registry,
-          sourceAtom(encodeSourceKey(true, context.workspaceId, context.accountId, result.source.id)),
-          result.source,
-        );
-        context.invalidateQueries({
-          workspaceId: context.workspaceId,
-          accountId: context.accountId,
-          sourceId: result.source.id,
-        });
-      },
-    },
   );
 export const useRemoveSource = () =>
     },
   );
+export const useDiscoverSource = () =>
+  useSourceMutation<DiscoverSourcePayload, SourceDiscoveryResult>(
+    React.useCallback(
+      ({ accountId, payload }) =>
+        runControlPlane({
+          accountId,
+          execute: (client) => client.sources.discover({
+            payload,
+          }),
+        }),
+      [],
+    ),
+  );
+export const useConnectSource = () =>
+  useSourceMutation<ConnectSourcePayload, ConnectSourceResult, Source>(
+    React.useCallback(
+      ({ workspaceId, accountId, payload }) =>
+        runControlPlane({
+          accountId,
+          execute: (client) => client.sources.connect({
+            path: {
+              workspaceId,
+            },
+            payload,
+          } as any),
+        }),
+      [],
+    ),
+    {
+      onSuccess: (context, _payload, result) => {
+        const listAtom = sourcesAtom(encodeSourcesKey(true, context.workspaceId, context.accountId));
+        const currentList = getCachedAtomValue(context.registry, listAtom);
+        if (currentList !== undefined) {
+          setCachedAtomValue(context.registry, listAtom, upsertSourceInList(currentList, result.source));
+        }
+        setCachedAtomValue(
+          context.registry,
+          sourceAtom(encodeSourceKey(true, context.workspaceId, context.accountId, result.source.id)),
+          result.source,
+        );
+        context.invalidateQueries({
+          workspaceId: context.workspaceId,
+          accountId: context.accountId,
+        });
+      },
+    },
+  );
 export type {
-  ConnectMcpSourcePayload,
+  CompleteSourceOAuthResult,
-  ConnectMcpSourceResult,
+  ConnectSourcePayload,
+  ConnectSourceResult,
   CreateSecretPayload,
   CreateSecretResult,
   CreateSourcePayload,
   DeleteSecretResult,
+  DiscoverSourcePayload,
   InstanceConfig,
   LocalInstallation,
   SecretListItem,
   Source,
+  SourceDiscoveryResult,
   SourceInspection,
   SourceInspectionDiscoverResult,
   SourceInspectionToolDetail,
+  StartSourceOAuthPayload,
+  StartSourceOAuthResult,
   UpdateSecretPayload,
   UpdateSecretResult,
   UpdateSourcePayload,