code caching: enabled/disabled UX for workflow run UI (#3497)

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

@@ -33,6 +33,7 @@ import {
 import { Flippable } from "@/components/Flippable";
 import { useRerender } from "@/hooks/useRerender";
 import { useBlockScriptStore } from "@/store/BlockScriptStore";
+import { useUiStore } from "@/store/UiStore";
 import { BlockCodeEditor } from "@/routes/workflows/components/BlockCodeEditor";
 import { cn } from "@/util/utils";
 
@@ -78,11 +79,31 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
     runSequentially: data.withWorkflowSettings ? data.runSequentially : false,
   });
 
+  const { highlightGenerateCodeToggle, setHighlightGenerateCodeToggle } =
+    useUiStore();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
   const script = blockScriptStore.scripts.__start_block__;
   const rerender = useRerender({ prefix: "accordion" });
   const toggleScriptForNodeCallback = useToggleScriptForNodeCallback();
+  const [expandWorkflowSettings, setExpandWorkflowSettings] = useState(false);
+
+  useEffect(() => {
+    const tm = setTimeout(() => {
+      if (highlightGenerateCodeToggle) {
+        setExpandWorkflowSettings(true);
+        rerender.bump();
+
+        setTimeout(() => {
+          setHighlightGenerateCodeToggle(false);
+        }, 3000);
+      }
+    }, 200);
+
+    return () => clearTimeout(tm);
+    // onMount only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     setFacing(data.showCode ? "back" : "front");
@@ -137,6 +158,10 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
     }
   }
 
+  const defaultWorkflowSettings = expandWorkflowSettings
+    ? "settings"
+    : undefined;
+
   if (data.withWorkflowSettings) {
     return (
       <Flippable facing={facing} preserveFrontsideHeight={true}>
@@ -159,7 +184,12 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
               <Accordion
                 type="single"
                 collapsible
-                onValueChange={() => rerender.bump()}
+                value={defaultWorkflowSettings}
+                defaultValue={defaultWorkflowSettings}
+                onValueChange={(value) => {
+                  setExpandWorkflowSettings(value === "settings");
+                  rerender.bump();
+                }}
               >
                 <AccordionItem value="settings" className="mt-4 border-b-0">
                   <AccordionTrigger className="py-2">
@@ -207,10 +237,16 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
 
                       <div className="flex flex-col gap-4">
                         <div className="space-y-2">
-                          <div className="flex items-center gap-2">
-                            <Label>Run Cached Code</Label>
+                          <div
+                            className={cn("flex items-center gap-2", {
+                              "animate-pulse rounded-md bg-yellow-600/20":
+                                highlightGenerateCodeToggle,
+                            })}
+                          >
+                            <Label>Generate Code</Label>
                             <HelpTooltip content="If code has been cached, run the workflow using code for faster execution." />
                             <Switch
+                              disabled={inputs.useScriptCache === true} // TODO(jdo/always-generate): remove
                               className="ml-auto"
                               checked={inputs.useScriptCache}
                               onCheckedChange={(value) => {