show all of the scripts via a button (#3295)

skyvern-frontend/src/routes/workflows/components/BlockCodeEditor.tsx

@@ -95,15 +95,13 @@ function BlockCodeEditor({
           <div className="absolute right-[-0.5rem] top-0 flex h-[2rem] w-[2rem] items-center justify-center rounded hover:bg-slate-800">
             <ExitIcon
               onClick={() => {
-                if (onExit) {
+                const result = onExit ? onExit() : true;
-                  const result = onExit();
 
-                  if (result !== false) {
+                if (result !== false) {
-                    toggleScriptForNodeCallback({
+                  toggleScriptForNodeCallback({
-                      label: blockLabel,
+                    label: blockLabel,
-                      show: false,
+                    show: false,
-                    });
+                  });
-                  }
                 }
               }}
               className="size-5 cursor-pointer"

skyvern-frontend/src/routes/workflows/editor/nodes/NodeActionMenu.tsx

@@ -10,7 +10,7 @@ import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { OrgWalled } from "@/components/Orgwalled";
 
 type Props = {
-  isDeleteable?: boolean;
+  isDeletable?: boolean;
   isScriptable?: boolean;
   showScriptText?: string;
   onDelete?: () => void;
@@ -18,13 +18,13 @@ type Props = {
 };
 
 function NodeActionMenu({
-  isDeleteable = true,
+  isDeletable = true,
   isScriptable = false,
   showScriptText,
   onDelete,
   onShowScript,
 }: Props) {
-  if (!isDeleteable && !isScriptable) {
+  if (!isDeletable && !isScriptable) {
     return null;
   }
 
@@ -36,7 +36,7 @@ function NodeActionMenu({
       <DropdownMenuContent>
         <DropdownMenuLabel>Block Actions</DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {isDeleteable && (
+        {isDeletable && (
           <DropdownMenuItem
             onSelect={() => {
               onDelete?.();

skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx

@@ -26,12 +26,12 @@ import { KeyValueInput } from "@/components/KeyValueInput";
 import { OrgWalled } from "@/components/Orgwalled";
 import { placeholders } from "@/routes/workflows/editor/helpContent";
 import { NodeActionMenu } from "@/routes/workflows/editor/nodes/NodeActionMenu";
+import { useToggleScriptForNodeCallback } from "@/routes/workflows/hooks/useToggleScriptForNodeCallback";
 import { useWorkflowSettingsStore } from "@/store/WorkflowSettingsStore";
 import {
   scriptableWorkflowBlockTypes,
   type WorkflowBlockType,
 } from "@/routes/workflows/types/workflowTypes";
-// import { useToggleScriptForNodeCallback } from "@/routes/workflows/hooks/useToggleScriptForNodeCallback";
 
 import { Flippable } from "@/components/Flippable";
 import { useRerender } from "@/hooks/useRerender";
@@ -42,7 +42,6 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
   const workflowSettingsStore = useWorkflowSettingsStore();
   const credentialGetter = useCredentialGetter();
   const { updateNodeData } = useReactFlow();
-  // const toggleScriptForNodeCallback = useToggleScriptForNodeCallback();
   const reactFlowInstance = useReactFlow();
 
   const { data: availableModels } = useQuery<ModelsResponse>({
@@ -83,6 +82,7 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
   const blockScriptStore = useBlockScriptStore();
   const script = blockScriptStore.scripts.__start_block__;
   const rerender = useRerender({ prefix: "accordion" });
+  const toggleScriptForNodeCallback = useToggleScriptForNodeCallback();
 
   useEffect(() => {
     setFacing(data.showCode ? "back" : "front");
@@ -109,37 +109,31 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
   }
 
   function showAllScripts() {
-    reactFlowInstance.setNodes((nodes) => {
+    for (const node of reactFlowInstance.getNodes()) {
-      return nodes.map((node) => {
+      const label = node.data.label;
-        if (nodeIsFlippable(node)) {
+
-          return {
+      label &&
-            ...node,
+        nodeIsFlippable(node) &&
-            data: {
+        typeof label === "string" &&
-              ...node.data,
+        toggleScriptForNodeCallback({
-              showCode: true,
+          label,
-            },
+          show: true,
-          };
+        });
-        }
+    }
-        return node;
-      });
-    });
   }
 
   function hideAllScripts() {
-    reactFlowInstance.setNodes((nodes) => {
+    for (const node of reactFlowInstance.getNodes()) {
-      return nodes.map((node) => {
+      const label = node.data.label;
-        if (nodeIsFlippable(node)) {
+
-          return {
+      label &&
-            ...node,
+        nodeIsFlippable(node) &&
-            data: {
+        typeof label === "string" &&
-              ...node.data,
+        toggleScriptForNodeCallback({
-              showCode: false,
+          label,
-            },
+          show: false,
-          };
+        });
-        }
+    }
-        return node;
-      });
-    });
   }
 
   if (data.withWorkflowSettings) {
@@ -158,7 +152,7 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                 <div>
                   <div className="rounded p-1 hover:bg-muted">
                     <NodeActionMenu
-                      isDeleteable={false}
+                      isDeletable={false}
                       isScriptable={true}
                       showScriptText="Show All Scripts"
                       onShowScript={showAllScripts}