Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to add default values to workflow parameters #865

Merged
merged 1 commit into from
Sep 20, 2024
Merged

Add ability to add default values to workflow parameters #865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion skyvern-frontend/src/components/FileUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
)}
Expand Down
18 changes: 12 additions & 6 deletions skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)}
/>
Expand Down Expand Up @@ -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>
);
}

Expand Down
11 changes: 7 additions & 4 deletions skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
5 changes: 4 additions & 1 deletion skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -98,6 +100,7 @@ export type ParametersState = Array<
parameterType: "workflow";
dataType: WorkflowParameterValueType;
description?: string;
defaultValue: unknown;
}
| {
key: string;
Expand Down
1 change: 1 addition & 0 deletions skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ function WorkflowEditor() {
key: parameter.key,
parameterType: "workflow",
dataType: parameter.workflow_parameter_type,
defaultValue: parameter.default_value,
};
} else {
return {
Expand Down
2 changes: 1 addition & 1 deletion skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
138 changes: 116 additions & 22 deletions skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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">
Expand All @@ -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" && (
<>
Expand All @@ -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") {
Expand Down
Loading
Loading