fix: prevent modalContext override in API response handler (#972)

prevent modalContext override in API response handler

Author: sagardspeed2

.changeset/brave-geckos-deny.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Fix prevent modalContext override in API response handler

packages/runtime/src/runtime/hooks/__tests__/useInvokeApi.test.tsx

@@ -5,6 +5,7 @@ const frameworkActual = jest.requireActual("@ensembleui/react-framework");
 
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "@testing-library/jest-dom";
 import { type ReactNode } from "react";
 import "../../../widgets";
 import { BrowserRouter } from "react-router-dom";
@@ -202,3 +203,70 @@ test("fetch API without cache", async () => {
     expect(fetchMock).toHaveBeenCalledTimes(2);
   });
 });
+
+test("after API response modal should close", async () => {
+  fetchMock.mockResolvedValue({ body: { data: "foobar" } });
+
+  render(
+    <EnsembleScreen
+      screen={{
+        name: "test_cache",
+        id: "test_cache",
+        body: {
+          name: "Button",
+          properties: {
+            label: "Show Dialog",
+            onTap: {
+              showDialog: {
+                widget: {
+                  Column: {
+                    children: [
+                      {
+                        Text: {
+                          text: "This is modal",
+                        },
+                      },
+                      {
+                        Button: {
+                          label: "Trigger API",
+                          onTap: {
+                            invokeAPI: {
+                              name: "testCache",
+                              onResponse: {
+                                executeCode: "ensemble.closeAllDialogs()",
+                              },
+                            },
+                          },
+                        },
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+        apis: [{ name: "testCache", method: "GET" }],
+      }}
+    />,
+    { wrapper: BrowserRouterWrapper },
+  );
+
+  const showDialogButton = screen.getByText("Show Dialog");
+  fireEvent.click(showDialogButton);
+
+  const modalTitle = screen.getByText("This is modal");
+  const triggerAPIButton = screen.getByText("Trigger API");
+
+  await waitFor(() => {
+    expect(modalTitle).toBeInTheDocument();
+    expect(triggerAPIButton).toBeInTheDocument();
+  });
+
+  fireEvent.click(triggerAPIButton);
+
+  await waitFor(() => {
+    expect(modalTitle).not.toBeInTheDocument();
+    expect(triggerAPIButton).not.toBeInTheDocument();
+  });
+});

packages/runtime/src/runtime/hooks/useEnsembleAction.tsx

@@ -175,10 +175,12 @@ export const useInvokeAPI: EnsembleActionHook<InvokeAPIAction> = (action) => {
   const onAPIErrorAction = useEnsembleAction(currentApi?.onError);
 
   const invokeCommand = useCommandCallback(
-    async (evalContext, ...args) => {
+    async (evalContext, ...args: unknown[]) => {
       if (!action?.name || !currentApi) return;
 
-      const context = merge({}, evalContext, args[0]);
+      const context = merge({}, evalContext, args[0]) as {
+        [key: string]: unknown;
+      };
 
       if (action.name !== currentApi.name) return;
 
@@ -242,8 +244,14 @@ export const useInvokeAPI: EnsembleActionHook<InvokeAPIAction> = (action) => {
           setData(action.id, response);
         }
 
-        onAPIResponseAction?.callback({ ...context, response });
-        onInvokeAPIResponseAction?.callback({ ...context, response });
+        onAPIResponseAction?.callback({
+          ...(args[0] as { [key: string]: unknown }),
+          response,
+        });
+        onInvokeAPIResponseAction?.callback({
+          ...(args[0] as { [key: string]: unknown }),
+          response,
+        });
       } catch (e) {
         logError(e);
 
@@ -261,22 +269,18 @@ export const useInvokeAPI: EnsembleActionHook<InvokeAPIAction> = (action) => {
           });
         }
 
-        onAPIErrorAction?.callback({ ...context, error: e });
-        onInvokeAPIErrorAction?.callback({ ...context, error: e });
+        onAPIErrorAction?.callback({
+          ...(args[0] as { [key: string]: unknown }),
+          error: e,
+        });
+        onInvokeAPIErrorAction?.callback({
+          ...(args[0] as { [key: string]: unknown }),
+          error: e,
+        });
       }
     },
     { navigate },
-    [
-      action,
-      currentApi,
-      screenModel,
-      appContext,
-      queryClient,
-      onAPIResponseAction,
-      onAPIErrorAction,
-      onInvokeAPIResponseAction,
-      onInvokeAPIErrorAction,
-    ],
+    [action, currentApi, screenModel, appContext, queryClient],
   );
 
   return { callback: invokeCommand };