make missing script key value 'default' (#3278)

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

@@ -181,7 +181,7 @@ function WorkflowHeader({
                   }
                   onCacheKeyValuesKeydown(e);
                 }}
-                placeholder="Script Key"
+                placeholder="Script Key Value"
                 value={chosenCacheKeyValue ?? undefined}
                 onBlur={(e) => {
                   onCacheKeyValuesBlurred(e.target.value);

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

@@ -681,7 +681,7 @@ function Workspace({
             <WorkflowCacheKeyValuesPanel
               cacheKeyValues={cacheKeyValues}
               pending={cacheKeyValuesLoading}
-              scriptKey={workflow.cache_key ?? "<none>"}
+              scriptKey={workflow.cache_key ?? "default"}
               onDelete={(cacheKeyValue) => {
                 setToDeleteCacheKeyValue(cacheKeyValue);
                 setOpenConfirmCacheKeyValueDeleteDialogue(true);

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

@@ -151,16 +151,21 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                         </div>
                       </div>
                       {inputs.useScriptCache && (
-                        <WorkflowBlockInputTextarea
+                        <div className="space-y-2">
-                          nodeId={id}
+                          <div className="flex gap-2">
-                          onChange={(value) => {
+                            <Label>Script Key (optional)</Label>
-                            const v = value.length ? value : null;
+                          </div>
-                            handleChange("scriptCacheKey", v);
+                          <WorkflowBlockInputTextarea
-                          }}
+                            nodeId={id}
-                          value={inputs.scriptCacheKey ?? ""}
+                            onChange={(value) => {
-                          placeholder={placeholders["scripts"]["scriptKey"]}
+                              const v = value.length ? value : null;
-                          className="nopan text-xs"
+                              handleChange("scriptCacheKey", v);
-                        />
+                            }}
+                            value={inputs.scriptCacheKey ?? ""}
+                            placeholder={placeholders["scripts"]["scriptKey"]}
+                            className="nopan text-xs"
+                          />
+                        </div>
                       )}
                     </OrgWalled>
                     <div className="space-y-2">

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowCacheKeyValuesPanel.tsx

@@ -50,10 +50,10 @@ function WorkflowCacheKeyValuesPanel({
             <code className="font-mono text-xs text-slate-200">
               {scriptKey}
             </code>
-            , search for a cached value to see scripts for. For this script key
+            , search for scripts using a script key value. For this script key
             there {totalCount === 1 ? "is" : "are"}{" "}
             <span className="font-bold text-slate-200">{totalCount}</span>{" "}
-            cached {totalCount === 1 ? "value" : "values"}
+            script key {totalCount === 1 ? "value" : "values"}
             {filteredCount !== totalCount && (
               <>
                 {" "}
@@ -140,7 +140,7 @@ function WorkflowCacheKeyValuesPanel({
               </PaginationItem>
               <PaginationItem>
                 <div className="text-sm font-bold">
-                  {displayPage} of {totalPages}
+                  {displayPage} of {isNaN(totalPages) ? 0 : totalPages}
                 </div>
               </PaginationItem>
               <PaginationItem>

skyvern-frontend/src/store/WorkflowHasChangesStore.ts

@@ -100,6 +100,10 @@ const useWorkflowSave = () => {
         }
       }
 
+      const scriptCacheKey = saveData.settings.scriptCacheKey ?? "";
+      const normalizedKey =
+        scriptCacheKey === "" ? "default" : saveData.settings.scriptCacheKey;
+
       const requestBody: WorkflowCreateYAMLRequest = {
         title: saveData.title,
         description: saveData.workflow.description,
@@ -111,7 +115,7 @@ const useWorkflowSave = () => {
         totp_verification_url: saveData.workflow.totp_verification_url,
         extra_http_headers: extraHttpHeaders,
         generate_script: saveData.settings.useScriptCache,
-        cache_key: saveData.settings.scriptCacheKey,
+        cache_key: normalizedKey,
         workflow_definition: {
           parameters: saveData.parameters,
           blocks: saveData.blocks,