Add ability to add default values to workflow parameters (#865)

Skyvern-AI · Sep 20, 2024 · e9184bc · e9184bc
1 parent df463e0
commit e9184bc
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 59 deletions.
diff --git a/skyvern-frontend/src/components/FileUpload.tsx b/skyvern-frontend/src/components/FileUpload.tsx
@@ -150,7 +150,7 @@ function FileUpload({ value, onChange }: Props) {
               accept=".csv"
               className="hidden"
             />
-            <div className="flex max-w-full gap-2 truncate">
+            <div className="flex max-w-full gap-2 px-2">
               {uploadFileMutation.isPending && (
                 <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
               )}

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx b/skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx
@@ -3,6 +3,8 @@ import { FileInputValue, FileUpload } from "@/components/FileUpload";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { CodeEditor } from "./components/CodeEditor";
+import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
+import { Label } from "@/components/ui/label";
 
 type Props = {
   type: WorkflowParameterValueType;
@@ -26,7 +28,7 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
 
   if (type === "string") {
     return (
-      <Input
+      <AutoResizingTextarea
         value={value as string}
         onChange={(e) => onChange(e.target.value)}
       />
@@ -55,12 +57,16 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
   }
 
   if (type === "boolean") {
+    const checked = typeof value === "boolean" ? value : Boolean(value);
     return (
-      <Checkbox
-        checked={value as boolean}
-        onCheckedChange={(checked) => onChange(checked)}
-        className="block"
-      />
+      <div className="flex items-center gap-2">
+        <Checkbox
+          checked={checked}
+          onCheckedChange={(checked) => onChange(checked)}
+          className="block"
+        />
+        <Label>{value ? "True" : "False"}</Label>
+      </div>
     );
   }
 

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx
@@ -45,10 +45,6 @@ function WorkflowRunParameters() {
     ? location.state.data
     : workflowParameters?.reduce(
         (acc, curr) => {
-          if (curr.workflow_parameter_type === "file_url") {
-            acc[curr.key] = null;
-            return acc;
-          }
           if (curr.workflow_parameter_type === "json") {
             if (typeof curr.default_value === "string") {
               acc[curr.key] = curr.default_value;
@@ -59,6 +55,13 @@ function WorkflowRunParameters() {
               return acc;
             }
           }
+          if (
+            curr.default_value &&
+            curr.workflow_parameter_type === "boolean"
+          ) {
+            acc[curr.key] = Boolean(curr.default_value);
+            return acc;
+          }
           if (curr.default_value) {
             acc[curr.key] = curr.default_value;
             return acc;

diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -73,7 +73,9 @@ function convertToParametersYAML(
         key: parameter.key,
         description: parameter.description || null,
         workflow_parameter_type: parameter.dataType,
-        default_value: null,
+        ...(parameter.defaultValue === null
+          ? {}
+          : { default_value: parameter.defaultValue }),
       };
     } else {
       return {
@@ -98,6 +100,7 @@ export type ParametersState = Array<
       parameterType: "workflow";
       dataType: WorkflowParameterValueType;
       description?: string;
+      defaultValue: unknown;
     }
   | {
       key: string;

diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
@@ -59,6 +59,7 @@ function WorkflowEditor() {
                   key: parameter.key,
                   parameterType: "workflow",
                   dataType: parameter.workflow_parameter_type,
+                  defaultValue: parameter.default_value,
                 };
               } else {
                 return {

diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
@@ -43,7 +43,7 @@ function WorkflowHeader({
           inputClassName="text-3xl"
         />
       </div>
-      <div className="flex h-full w-1/3 items-center justify-end gap-4">
+      <div className="flex h-full items-center justify-end gap-4">
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>

diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
@@ -13,6 +13,10 @@ import {
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { ParametersState } from "../FlowRenderer";
+import { WorkflowParameterInput } from "../../WorkflowParameterInput";
+import { Checkbox } from "@/components/ui/checkbox";
+import { getDefaultValueForParameterType } from "../workflowEditorUtils";
+import { toast } from "@/components/ui/use-toast";
 
 type Props = {
   type: "workflow" | "credential";
@@ -35,6 +39,13 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
   const [collectionId, setCollectionId] = useState("");
   const [parameterType, setParameterType] =
     useState<WorkflowParameterValueType>("string");
+  const [defaultValueState, setDefaultValueState] = useState<{
+    hasDefaultValue: boolean;
+    defaultValue: unknown;
+  }>({
+    hasDefaultValue: false,
+    defaultValue: null,
+  });
 
   return (
     <div className="space-y-4">
@@ -56,28 +67,90 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
         />
       </div>
       {type === "workflow" && (
-        <div className="space-y-1">
-          <Label className="text-xs">Value Type</Label>
-          <Select
-            value={parameterType}
-            onValueChange={(value) =>
-              setParameterType(value as WorkflowParameterValueType)
-            }
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select a type" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                {workflowParameterTypeOptions.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
+        <>
+          <div className="space-y-1">
+            <Label className="text-xs">Value Type</Label>
+            <Select
+              value={parameterType}
+              onValueChange={(value) => {
+                setParameterType(value as WorkflowParameterValueType);
+                setDefaultValueState((state) => {
+                  return {
+                    ...state,
+                    defaultValue: getDefaultValueForParameterType(
+                      value as WorkflowParameterValueType,
+                    ),
+                  };
+                });
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {workflowParameterTypeOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                checked={defaultValueState.hasDefaultValue}
+                onCheckedChange={(checked) => {
+                  if (!checked) {
+                    setDefaultValueState({
+                      hasDefaultValue: false,
+                      defaultValue: null,
+                    });
+                    return;
+                  }
+                  setDefaultValueState({
+                    hasDefaultValue: true,
+                    defaultValue:
+                      getDefaultValueForParameterType(parameterType),
+                  });
+                }}
+              />
+              <Label className="text-xs text-slate-300">
+                Use Default Value
+              </Label>
+            </div>
+            {defaultValueState.hasDefaultValue && (
+              <WorkflowParameterInput
+                onChange={(value) => {
+                  if (
+                    parameterType === "file_url" &&
+                    typeof value === "object" &&
+                    value &&
+                    "s3uri" in value
+                  ) {
+                    setDefaultValueState((state) => {
+                      return {
+                        ...state,
+                        defaultValue: value.s3uri,
+                      };
+                    });
+                    return;
+                  }
+                  setDefaultValueState((state) => {
+                    return {
+                      ...state,
+                      defaultValue: value,
+                    };
+                  });
+                }}
+                type={parameterType}
+                value={defaultValueState.defaultValue}
+              />
+            )}
+          </div>
+        </>
       )}
       {type === "credential" && (
         <>
@@ -101,11 +174,32 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
         <Button
           onClick={() => {
             if (type === "workflow") {
+              if (
+                parameterType === "json" &&
+                typeof defaultValueState.defaultValue === "string"
+              ) {
+                try {
+                  JSON.parse(defaultValueState.defaultValue);
+                } catch (e) {
+                  toast({
+                    variant: "destructive",
+                    title: "Failed to save parameters",
+                    description: "Invalid JSON for default value",
+                  });
+                  return;
+                }
+              }
+              const defaultValue =
+                parameterType === "json" &&
+                typeof defaultValueState.defaultValue === "string"
+                  ? JSON.parse(defaultValueState.defaultValue)
+                  : defaultValueState.defaultValue;
               onSave({
                 key,
                 parameterType: "workflow",
                 dataType: parameterType,
                 description,
+                defaultValue: defaultValue,
               });
             }
             if (type === "credential") {