Send dev harness event when it is a stubbed action

gadget-inc · Sep 11, 2024 · 854706a · 854706a
1 parent 4a605de
commit 854706a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 4 deletions.
diff --git a/packages/api-client-core/src/GadgetFunctions.ts b/packages/api-client-core/src/GadgetFunctions.ts
@@ -136,6 +136,21 @@ export interface ActionFunctionMetadata<OptionsT, VariablesT, SelectionT, Schema
   hasCreateOrUpdateEffect?: boolean;
 }
 
+export type StubbedActionReason = "MissingApiTrigger";
+
+export interface StubbedActionFunctionMetadata {
+  type: "stubbedAction";
+  functionName: string;
+  operationName?: string;
+  errorMessage: string;
+  modelApiIdentifier?: string;
+  variables: VariablesOptions;
+  reason: StubbedActionReason;
+  dataPath: string;
+}
+
+export type StubbedActionFunction<OptionsT> = StubbedActionFunctionMetadata & ActionWithNoIdAndNoVariables<OptionsT>;
+
 export type ActionFunction<OptionsT, VariablesT, SelectionT, SchemaT, DefaultsT> = ActionFunctionMetadata<
   OptionsT,
   VariablesT,

diff --git a/packages/react/src/useAction.ts b/packages/react/src/useAction.ts
@@ -1,4 +1,11 @@
-import type { ActionFunction, DefaultSelection, GadgetRecord, LimitToKnownKeys, Select } from "@gadgetinc/api-client-core";
+import type {
+  ActionFunction,
+  DefaultSelection,
+  GadgetRecord,
+  LimitToKnownKeys,
+  Select,
+  StubbedActionFunction,
+} from "@gadgetinc/api-client-core";
 import {
   actionOperation,
   capitalizeIdentifier,
@@ -7,7 +14,7 @@ import {
   hydrateRecord,
   namespaceDataPath,
 } from "@gadgetinc/api-client-core";
-import { useCallback, useContext, useMemo } from "react";
+import { useCallback, useContext, useEffect, useMemo } from "react";
 import type { AnyVariables, OperationContext, UseMutationState } from "urql";
 import { GadgetUrqlClientContext } from "./GadgetProvider.js";
 import { useGadgetMutation } from "./useGadgetMutation.js";
@@ -62,6 +69,23 @@ export const useAction = <
 > => {
   if (!useContext(GadgetUrqlClientContext)) throw new Error(noProviderErrorMessage);
 
+  useEffect(() => {
+    if (action.type === ("stubbedAction" as string)) {
+      const stubbedAction = action as unknown as StubbedActionFunction<GivenOptions>;
+      const event = new CustomEvent("gadget:devharness:stubbedActionError", {
+        detail: {
+          reason: stubbedAction.reason,
+          action: {
+            actionApiIdentifier: stubbedAction.functionName,
+            modelApiIdentifier: stubbedAction.modelApiIdentifier,
+            dataPath: stubbedAction.dataPath,
+          },
+        },
+      });
+      globalThis.dispatchEvent(event);
+    }
+  }, []);
+
   const memoizedOptions = useStructuralMemo(options);
   const plan = useMemo(() => {
     return actionOperation(

diff --git a/packages/react/src/useGlobalAction.ts b/packages/react/src/useGlobalAction.ts
@@ -1,6 +1,6 @@
-import type { GlobalActionFunction } from "@gadgetinc/api-client-core";
+import type { GlobalActionFunction, StubbedActionFunction } from "@gadgetinc/api-client-core";
 import { get, globalActionOperation, namespaceDataPath } from "@gadgetinc/api-client-core";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import type { OperationContext, UseMutationState } from "urql";
 import { useGadgetMutation } from "./useGadgetMutation.js";
 import type { ActionHookResult } from "./utils.js";
@@ -30,6 +30,22 @@ import { ErrorWrapper } from "./utils.js";
 export const useGlobalAction = <F extends GlobalActionFunction<any>>(
   action: F
 ): ActionHookResult<any, Exclude<F["variablesType"], null | undefined>> => {
+  useEffect(() => {
+    if (action.type === ("stubbedAction" as string)) {
+      const stubbedAction = action as unknown as StubbedActionFunction<any>;
+      const event = new CustomEvent("gadget:devharness:stubbedActionError", {
+        detail: {
+          reason: stubbedAction.reason,
+          action: {
+            actionApiIdentifier: stubbedAction.functionName,
+            dataPath: stubbedAction.dataPath,
+          },
+        },
+      });
+      globalThis.dispatchEvent(event);
+    }
+  }, []);
+
   const plan = useMemo(() => {
     return globalActionOperation(action.operationName, action.variables, action.namespace);
   }, [action]);