94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
 
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||
|
|
import { Play, Loader2 } from "lucide-react";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Form } from "@/components/ui/form";
|
||
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||
|
|
import { buildVariableSchemaFromList } from "@/lib/validation/variable-schema";
|
||
|
|
import type { ClientScript } from "@/lib/config/serialize";
|
||
|
|
import { FieldRenderer } from "./field-renderer";
|
||
|
|
|
||
|
|
function emptyValueFor(variable: ClientScript["variables"][number]): unknown {
|
||
|
|
if (variable.type === "boolean") return false;
|
||
|
|
if (variable.type === "multiselect") return [];
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
|
||
|
|
function defaultValuesFor(script: ClientScript): Record<string, unknown> {
|
||
|
|
const values: Record<string, unknown> = {};
|
||
|
|
for (const variable of script.variables) {
|
||
|
|
values[variable.name] = variable.default ?? emptyValueFor(variable);
|
||
|
|
}
|
||
|
|
return values;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function DynamicForm({ script }: { script: ClientScript }) {
|
||
|
|
const router = useRouter();
|
||
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
||
|
|
const schema = buildVariableSchemaFromList(script.variables);
|
||
|
|
|
||
|
|
const form = useForm({
|
||
|
|
resolver: zodResolver(schema),
|
||
|
|
defaultValues: defaultValuesFor(script),
|
||
|
|
});
|
||
|
|
|
||
|
|
async function onSubmit(values: Record<string, unknown>) {
|
||
|
|
setSubmitError(null);
|
||
|
|
const response = await fetch(`/api/scripts/${script.id}/runs`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ variables: values }),
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
const data = await response.json().catch(() => ({}));
|
||
|
|
setSubmitError(data.error ?? "Failed to start run");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
toast.success(`${script.name} started`);
|
||
|
|
router.push(`/runs/${data.runId}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form {...form}>
|
||
|
|
<form
|
||
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
||
|
|
className="flex flex-col gap-5"
|
||
|
|
>
|
||
|
|
{submitError && (
|
||
|
|
<Alert variant="destructive">
|
||
|
|
<AlertDescription>{submitError}</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
{script.variables.length === 0 && (
|
||
|
|
<p className="text-muted-foreground text-sm">
|
||
|
|
This script takes no parameters.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
{script.variables.map((variable) => (
|
||
|
|
<FieldRenderer key={variable.name} variable={variable} />
|
||
|
|
))}
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
disabled={form.formState.isSubmitting}
|
||
|
|
className="w-fit"
|
||
|
|
>
|
||
|
|
{form.formState.isSubmitting ? (
|
||
|
|
<Loader2 className="animate-spin" />
|
||
|
|
) : (
|
||
|
|
<Play />
|
||
|
|
)}
|
||
|
|
Run
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
);
|
||
|
|
}
|