enable code view for taskv2 block (#3443)

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

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+import { Flippable } from "@/components/Flippable";
 import { HelpTooltip } from "@/components/HelpTooltip";
 import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 import {
@@ -10,7 +12,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
-import { useState } from "react";
 import { helpTooltips, placeholders } from "../../helpContent";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { MAX_STEPS_DEFAULT, type Taskv2Node } from "./types";
@@ -22,6 +23,8 @@ import { useParams } from "react-router-dom";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
 import { useRerender } from "@/hooks/useRerender";
+import { BlockCodeEditor } from "@/routes/workflows/components/BlockCodeEditor";
+import { useBlockScriptStore } from "@/store/BlockScriptStore";
 
 function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
   const { editable, label } = data;
@@ -34,6 +37,9 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
   const thisBlockIsPlaying =
     workflowRunIsRunningOrQueued && thisBlockIsTargetted;
   const { updateNodeData } = useReactFlow();
+  const [facing, setFacing] = useState<"front" | "back">("front");
+  const blockScriptStore = useBlockScriptStore();
+  const script = blockScriptStore.scripts[label];
   const isFirstWorkflowBlock = useIsFirstBlockInWorkflow({ id });
   const rerender = useRerender({ prefix: "accordian" });
 
@@ -54,7 +60,12 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
     updateNodeData(id, { [key]: value });
   }
 
+  useEffect(() => {
+    setFacing(data.showCode ? "back" : "front");
+  }, [data.showCode]);
+
   return (
+    <Flippable facing={facing} preserveFrontsideHeight={true}>
       <div>
         <Handle
           type="source"
@@ -141,7 +152,9 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
                   />
                   <div className="space-y-2">
                     <div className="flex gap-2">
-                    <Label className="text-xs text-slate-300">Max Steps</Label>
+                      <Label className="text-xs text-slate-300">
+                        Max Steps
+                      </Label>
                       <HelpTooltip content={helpTooltips[type]["maxSteps"]} />
                     </div>
                     <Input
@@ -199,6 +212,9 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
           <NodeTabs blockLabel={label} />
         </div>
       </div>
+
+      <BlockCodeEditor blockLabel={label} blockType="task_v2" script={script} />
+    </Flippable>
   );
 }
 

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -247,6 +247,7 @@ export const scriptableWorkflowBlockTypes: Set<WorkflowBlockType> = new Set([
   "login",
   "navigation",
   "task",
+  "task_v2",
   "validation",
 ]);