Jon/sky 5820 make browser task block flippable with code (#3165)

skyvern-frontend/src/routes/workflows/hooks/useBlockScriptsQuery.ts

@@ -0,0 +1,37 @@
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { ScriptBlocksResponse } from "../types/scriptTypes";
+
+type Props = {
+  cacheKey?: string;
+  cacheKeyValue?: string;
+  workflowPermanentId?: string;
+};
+
+function useBlockScriptsQuery({
+  cacheKey,
+  cacheKeyValue,
+  workflowPermanentId,
+}: Props) {
+  const credentialGetter = useCredentialGetter();
+
+  return useQuery<{ [blockName: string]: string }>({
+    queryKey: ["block-scripts", workflowPermanentId, cacheKey, cacheKeyValue],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter, "sans-api-v1");
+
+      const result = await client
+        .post<ScriptBlocksResponse>(`/scripts/${workflowPermanentId}/blocks`, {
+          cache_key: cacheKey ?? "",
+          cache_key_value: cacheKeyValue ?? "",
+        })
+        .then((response) => response.data);
+
+      return result.blocks;
+    },
+    enabled: !!workflowPermanentId,
+  });
+}
+
+export { useBlockScriptsQuery };

skyvern-frontend/src/routes/workflows/hooks/useDeleteNodeCallback.ts

@@ -1,12 +1,12 @@
-import { DeleteNodeCallbackContext } from "@/store/DeleteNodeCallbackContext";
+import { BlockActionContext } from "@/store/BlockActionContext";
 import { useContext } from "react";
 
 function useDeleteNodeCallback() {
-  const deleteNodeCallback = useContext(DeleteNodeCallbackContext);
+  const deleteNodeCallback = useContext(BlockActionContext)?.deleteNodeCallback;
 
   if (!deleteNodeCallback) {
     throw new Error(
-      "useDeleteNodeCallback must be used within a DeleteNodeCallbackProvider",
+      "useDeleteNodeCallback must be used within a BlockActionContextProvider",
     );
   }
 

skyvern-frontend/src/routes/workflows/hooks/useToggleScriptForNodeCallback.ts

@@ -0,0 +1,17 @@
+import { BlockActionContext } from "@/store/BlockActionContext";
+import { useContext } from "react";
+
+function useToggleScriptForNodeCallback() {
+  const toggleScriptForNodeCallback =
+    useContext(BlockActionContext)?.toggleScriptForNodeCallback;
+
+  if (!toggleScriptForNodeCallback) {
+    throw new Error(
+      "useToggleScriptForNodeCallback must be used within a BlockActionContextProvider",
+    );
+  }
+
+  return toggleScriptForNodeCallback;
+}
+
+export { useToggleScriptForNodeCallback };