From cd11f88c88d3098a550bf36590bece89daa2b44d Mon Sep 17 00:00:00 2001 From: ykeremy Date: Fri, 20 Sep 2024 11:52:23 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'skyvern-fronte?= =?UTF-8?q?nd/src/'=20with=20remote=20'skyvern-frontend/src/'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit | :rocket: | This description was created by 370ad16b5841fa91e23e2a0ac9fa41a2fcf2e057 | |--------|--------| feat: add default value support for workflow parameters ### Summary: Add default value support for workflow parameters with UI updates and JSON parsing. **Key points**: - Add default value support for workflow parameters. - Update UI in `FlowRenderer.tsx` and `WorkflowEditor.tsx`. - Allow setting/editing default values in `WorkflowParameterAddPanel.tsx` and `WorkflowParameterEditPanel.tsx`. - Handle JSON parsing for default values. - Replace `Input` with `AutoResizingTextarea` for string parameters in `WorkflowParameterInput.tsx`. - Add `Label` for boolean parameters in `WorkflowParameterInput.tsx`. - Add `getDefaultValueForParameterType` function in `workflowEditorUtils.ts`. - Update `WorkflowParameterYAML` to use `unknown` for `default_value`. ---- Generated with :heart: by [ellipsis.dev](https://www.ellipsis.dev) --- .../src/components/FileUpload.tsx | 2 +- .../workflows/WorkflowParameterInput.tsx | 18 ++- .../workflows/WorkflowRunParameters.tsx | 11 +- .../routes/workflows/editor/FlowRenderer.tsx | 5 +- .../workflows/editor/WorkflowEditor.tsx | 1 + .../workflows/editor/WorkflowHeader.tsx | 2 +- .../panels/WorkflowParameterAddPanel.tsx | 138 ++++++++++++++--- .../panels/WorkflowParameterEditPanel.tsx | 146 +++++++++++++++--- .../workflows/editor/workflowEditorUtils.ts | 29 +++- .../workflows/types/workflowYamlTypes.ts | 2 +- 10 files changed, 295 insertions(+), 59 deletions(-) diff --git a/skyvern-frontend/src/components/FileUpload.tsx b/skyvern-frontend/src/components/FileUpload.tsx index d673b622b6..f255335959 100644 --- 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" /> -
+
{uploadFileMutation.isPending && ( )} diff --git a/skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx b/skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx index 87775a8da9..514b71ae29 100644 --- 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 ( - 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 ( - onChange(checked)} - className="block" - /> +
+ onChange(checked)} + className="block" + /> + +
); } diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx index 34230ca0d3..c9f53aa368 100644 --- 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 index 5f7658cf14..7446109c66 100644 --- 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 index 37b3e8b96a..32968fbc58 100644 --- 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 index 6acddf53bd..10b780bfc5 100644 --- 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" />
-
+
diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx index f52330b8ca..34798eccdc 100644 --- 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("string"); + const [defaultValueState, setDefaultValueState] = useState<{ + hasDefaultValue: boolean; + defaultValue: unknown; + }>({ + hasDefaultValue: false, + defaultValue: null, + }); return (
@@ -56,28 +67,90 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) { />
{type === "workflow" && ( -
- - -
+ <> +
+ + +
+
+
+ { + if (!checked) { + setDefaultValueState({ + hasDefaultValue: false, + defaultValue: null, + }); + return; + } + setDefaultValueState({ + hasDefaultValue: true, + defaultValue: + getDefaultValueForParameterType(parameterType), + }); + }} + /> + +
+ {defaultValueState.hasDefaultValue && ( + { + 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} + /> + )} +
+ )} {type === "credential" && ( <> @@ -101,11 +174,32 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {