Jon/construct cache key and show (#3242)

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

@@ -1,14 +1,18 @@
 import { ExitIcon } from "@radix-ui/react-icons";
+import { useParams } from "react-router-dom";
 import { Handle } from "@xyflow/react";
 import { Position } from "@xyflow/react";
 
+import { KeyIcon } from "@/components/icons/KeyIcon";
 import { WorkflowBlockType } from "@/routes/workflows/types/workflowTypes";
 import { useToggleScriptForNodeCallback } from "@/routes/workflows/hooks/useToggleScriptForNodeCallback";
+import { useWorkflowQuery } from "@/routes/workflows/hooks/useWorkflowQuery";
 import { cn } from "@/util/utils";
 
 import { CodeEditor } from "./CodeEditor";
 import { workflowBlockTitle } from "../editor/nodes/types";
 import { WorkflowBlockIcon } from "../editor/nodes/WorkflowBlockIcon";
+import { constructCacheKeyValue } from "../editor/utils";
 
 function BlockCodeEditor({
   blockLabel,
@@ -21,9 +25,20 @@ function BlockCodeEditor({
   script: string | undefined;
   onClick?: (e: React.MouseEvent) => void;
 }) {
+  const { workflowPermanentId } = useParams();
   const blockTitle = workflowBlockTitle[blockType];
   const toggleScriptForNodeCallback = useToggleScriptForNodeCallback();
 
+  const { data: workflow } = useWorkflowQuery({
+    workflowPermanentId,
+  });
+  const cacheKey = workflow?.cache_key ?? "";
+  const cacheKeyValue = workflow
+    ? cacheKey === ""
+      ? ""
+      : constructCacheKeyValue(cacheKey, workflow)
+    : "";
+
   return (
     <div className="h-full">
       <Handle
@@ -47,7 +62,7 @@ function BlockCodeEditor({
           onClick?.(e);
         }}
       >
-        <header className="!mt-0 flex h-[2.75rem] justify-between gap-2">
+        <header className="relative !mt-0 flex h-[2.75rem] justify-between gap-2">
           <div className="flex w-full gap-2">
             <div className="relative flex h-[2.75rem] w-[2.75rem] items-center justify-center overflow-hidden rounded border border-slate-600">
               <WorkflowBlockIcon
@@ -58,22 +73,30 @@ function BlockCodeEditor({
                 <span className="text-xs font-bold text-black">code</span>
               </div>
             </div>
-            <div className="flex flex-col gap-1">
+            <div className="flex w-full flex-col gap-1">
               {blockLabel}
-              <span className="text-xs text-slate-400">{blockTitle}</span>
+              <div className="flex w-full items-center justify-center gap-1">
-            </div>
+                <span className="text-xs text-slate-400">{blockTitle}</span>
-            <div className="ml-auto flex w-[2.75rem] items-center justify-center rounded hover:bg-slate-800">
+                <div className="ml-auto scale-[60%] opacity-50">
-              <ExitIcon
+                  <KeyIcon />
-                onClick={() => {
+                </div>
-                  toggleScriptForNodeCallback({
+                <span className="text-xs text-slate-400">
-                    label: blockLabel,
+                  {cacheKeyValue === "" ? "(none)" : cacheKeyValue}
-                    show: false,
+                </span>
-                  });
+              </div>
-                }}
-                className="size-5 cursor-pointer"
-              />
             </div>
           </div>
+          <div className="absolute right-[-0.5rem] top-0 flex h-[2rem] w-[2rem] items-center justify-center rounded hover:bg-slate-800">
+            <ExitIcon
+              onClick={() => {
+                toggleScriptForNodeCallback({
+                  label: blockLabel,
+                  show: false,
+                });
+              }}
+              className="size-5 cursor-pointer"
+            />
+          </div>
         </header>
         {script ? (
           <div className="h-full flex-1 overflow-y-hidden">

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -57,6 +57,7 @@ import {
   layout,
   startNode,
 } from "./workflowEditorUtils";
+import { constructCacheKeyValue } from "./utils";
 
 const Constants = {
   NewBrowserCooldown: 30000,
@@ -130,7 +131,13 @@ function Workspace({
   const initialHeight = (initialWidth / 16) * 9;
   // ---end fya
 
+  const cacheKey = workflow?.cache_key ?? "";
+  const cacheKeyValue =
+    cacheKey === "" ? "" : constructCacheKeyValue(cacheKey, workflow);
+
   const { data: blockScripts } = useBlockScriptsQuery({
+    cacheKey,
+    cacheKeyValue,
     workflowPermanentId,
   });
 

skyvern-frontend/src/routes/workflows/editor/utils.ts

@@ -97,4 +97,36 @@ const getInitialParameters = (workflow: WorkflowApiResponse) => {
     .filter(Boolean) as ParametersState;
 };
 
-export { getInitialParameters };
+/**
+ * Attempt to construct a valid cache key value from the workflow parameters.
+ */
+const constructCacheKeyValue = (
+  cacheKey: string,
+  workflow: WorkflowApiResponse,
+) => {
+  const workflowParameters = getInitialParameters(workflow)
+    .filter((p) => p.parameterType === "workflow")
+    .reduce(
+      (acc, parameter) => {
+        acc[parameter.key] = parameter.defaultValue;
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    );
+
+  for (const [name, value] of Object.entries(workflowParameters)) {
+    if (value === null || value === undefined || value === "") {
+      continue;
+    }
+
+    cacheKey = cacheKey.replace(`{{${name}}}`, value.toString());
+  }
+
+  if (cacheKey.includes("{") || cacheKey.includes("}")) {
+    return "";
+  }
+
+  return cacheKey;
+};
+
+export { constructCacheKeyValue, getInitialParameters };

skyvern-frontend/src/store/WorkflowHasChangesStore.ts

@@ -152,6 +152,10 @@ const useWorkflowSave = () => {
         queryKey: ["workflows"],
       });
 
+      queryClient.invalidateQueries({
+        queryKey: ["block-scripts", saveData.workflow.workflow_permanent_id],
+      });
+
       setHasChanges(false);
     },
     onError: (error: AxiosError) => {