Skip to content

Commit

Permalink
Improve run workflow form (#1032)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wintonzheng
wintonzheng authored Oct 23, 2024
1 parent 96c807e commit 426acbc
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 160 deletions.
253 changes: 120 additions & 133 deletions skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { getClient } from "@/api/AxiosClient";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
} from "@/components/ui/form";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useForm } from "react-hook-form";
Expand All @@ -8,14 +14,6 @@ import { WorkflowParameterInput } from "./WorkflowParameterInput";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/use-toast";
import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { ToastAction } from "@radix-ui/react-toast";
import fetchToCurl from "fetch-to-curl";
import { apiBaseUrl } from "@/util/env";
Expand Down Expand Up @@ -115,133 +113,122 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
}

return (
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<Table>
<TableHeader className="bg-slate-elevation2 text-slate-400 [&_tr]:border-b-0">
<TableRow className="rounded-lg px-6 [&_th:first-child]:pl-6 [&_th]:py-4">
<TableHead className="w-1/3 text-sm text-slate-400">
Parameter Name
</TableHead>
<TableHead className="w-1/3 text-sm text-slate-400">
Description
</TableHead>
<TableHead className="w-1/3 text-sm text-slate-400">
Input
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{workflowParameters?.map((parameter) => {
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5"
>
{workflowParameters?.map((parameter) => {
return (
<FormField
key={parameter.key}
control={form.control}
name={parameter.key}
rules={{
validate: (value) => {
if (
parameter.workflow_parameter_type === "json" &&
typeof value === "string"
) {
try {
JSON.parse(value);
return true;
} catch (e) {
return "Invalid JSON";
}
}
if (value === null) {
return "This field is required";
}
},
}}
render={({ field }) => {
return (
<FormField
key={parameter.key}
control={form.control}
name={parameter.key}
rules={{
validate: (value) => {
if (
parameter.workflow_parameter_type === "json" &&
typeof value === "string"
) {
try {
JSON.parse(value);
return true;
} catch (e) {
return "Invalid JSON";
}
}
if (value === null) {
return "This field is required";
}
},
}}
render={({ field }) => {
return (
<TableRow className="[&_td:first-child]:pl-6 [&_td:last-child]:pr-6 [&_td]:py-4">
<TableCell className="w-1/3">
<div className="flex h-8 w-fit items-center rounded-sm bg-slate-elevation3 p-3">
{parameter.key}
</div>
</TableCell>
<TableCell className="w-1/3">
<div>{parameter.description}</div>
</TableCell>
<TableCell className="w-1/3">
<FormItem>
<FormControl>
<WorkflowParameterInput
type={parameter.workflow_parameter_type}
value={field.value}
onChange={field.onChange}
/>
</FormControl>
{form.formState.errors[parameter.key] && (
<div className="text-destructive">
{
form.formState.errors[parameter.key]
?.message
}
</div>
)}
</FormItem>
</TableCell>
</TableRow>
);
}}
/>
<FormItem>
<div className="flex gap-16">
<FormLabel>
<div className="w-72">
<div className="flex items-center gap-2 text-lg">
{parameter.key}
<span className="text-sm text-slate-400">
{parameter.workflow_parameter_type}
</span>
</div>
<h2 className="text-sm text-slate-400">
{parameter.description}
</h2>
</div>
</FormLabel>
<div className="w-full space-y-2">
<FormControl>
<WorkflowParameterInput
type={parameter.workflow_parameter_type}
value={field.value}
onChange={field.onChange}
/>
</FormControl>
{form.formState.errors[parameter.key] && (
<div className="text-destructive">
{form.formState.errors[parameter.key]?.message}
</div>
)}
</div>
</div>
</FormItem>
);
})}
</TableBody>
</Table>
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={() => {
const parsedValues = parseValuesForWorkflowRun(
form.getValues(),
workflowParameters,
);
const curl = fetchToCurl({
method: "POST",
url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
body: {
data: parsedValues,
proxy_location: "RESIDENTIAL",
},
headers: {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The cURL command has been copied to your clipboard.",
});
});
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
<Button type="submit" disabled={runWorkflowMutation.isPending}>
{runWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
)}
{!runWorkflowMutation.isPending && (
<PlayIcon className="mr-2 h-4 w-4" />
)}
Run workflow
</Button>
</div>
</form>
</Form>
</div>
/>
);
})}
{workflowParameters.length === 0 && (
<div>No workflow parameters for this workflow.</div>
)}
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={() => {
const parsedValues = parseValuesForWorkflowRun(
form.getValues(),
workflowParameters,
);
const curl = fetchToCurl({
method: "POST",
url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
body: {
data: parsedValues,
proxy_location: "RESIDENTIAL",
},
headers: {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The cURL command has been copied to your clipboard.",
});
});
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
<Button type="submit" disabled={runWorkflowMutation.isPending}>
{runWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
)}
{!runWorkflowMutation.isPending && (
<PlayIcon className="mr-2 h-4 w-4" />
)}
Run workflow
</Button>
</div>
</form>
</Form>
);
}

Expand Down
7 changes: 5 additions & 2 deletions skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,14 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
if (type === "json") {
return (
<CodeEditor
className="w-full"
language="json"
onChange={(value) => onChange(value)}
value={
typeof value === "string" ? value : JSON.stringify(value, null, 2)
}
minHeight="96px"
maxHeight="500px"
/>
);
}
Expand All @@ -37,7 +40,7 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
if (type === "integer") {
return (
<Input
value={value as number}
value={value === null ? "" : Number(value)}
onChange={(e) => onChange(parseInt(e.target.value))}
type="number"
/>
Expand All @@ -47,7 +50,7 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
if (type === "float") {
return (
<Input
value={value as number}
value={value === null ? "" : Number(value)}
onChange={(e) => onChange(parseFloat(e.target.value))}
type="number"
step="any"
Expand Down
45 changes: 22 additions & 23 deletions skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,8 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { useQuery } from "@tanstack/react-query";
import { useLocation, useParams } from "react-router-dom";
import { RunWorkflowForm } from "./RunWorkflowForm";
import {
WorkflowApiResponse,
WorkflowParameterValueType,
} from "./types/workflowTypes";

function defaultValue(type: WorkflowParameterValueType) {
switch (type) {
case "string":
return "";
case "integer":
return 0;
case "float":
return 0.0;
case "boolean":
return false;
case "json":
return null;
case "file_url":
return null;
}
}
import { WorkflowApiResponse } from "./types/workflowTypes";
import { Skeleton } from "@/components/ui/skeleton";

function WorkflowRunParameters() {
const credentialGetter = useCredentialGetter();
Expand Down Expand Up @@ -65,18 +46,36 @@ function WorkflowRunParameters() {
acc[curr.key] = Boolean(curr.default_value);
return acc;
}
if (
curr.default_value === null &&
curr.workflow_parameter_type === "string"
) {
acc[curr.key] = "";
return acc;
}
if (curr.default_value) {
acc[curr.key] = curr.default_value;
return acc;
}
acc[curr.key] = defaultValue(curr.workflow_parameter_type);
acc[curr.key] = null;
return acc;
},
{} as Record<string, unknown>,
);

if (isFetching) {
return <div>Getting workflow parameters...</div>;
return (
<div className="space-y-8">
<header className="space-y-5">
<h1 className="text-3xl">Run Parameters</h1>
<h2 className="text-lg text-slate-400">
Fill the placeholder values that you have linked throughout your
workflow.
</h2>
</header>
<Skeleton className="h-96 w-full" />
</div>
);
}

if (!workflow || !workflowParameters || !initialValues) {
Expand Down
4 changes: 3 additions & 1 deletion skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,9 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
parameterType: "workflow",
dataType: parameterType,
description,
defaultValue: defaultValue,
defaultValue: defaultValueState.hasDefaultValue
? defaultValue
: null,
});
}
if (type === "credential") {
Expand Down
4 changes: 3 additions & 1 deletion skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,9 @@ function WorkflowParameterEditPanel({
parameterType: "workflow",
dataType: parameterType,
description,
defaultValue: defaultValue,
defaultValue: defaultValueState.hasDefaultValue
? defaultValue
: null,
});
}
if (type === "credential") {
Expand Down

0 comments on commit 426acbc

Please sign in to comment.