vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make multi section openable in task form (#897)

Browse Source 
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Kerem Yilmaz
2024-10-02 12:07:06 -07:00
committed by GitHub
parent 44627df9da
commit f9da9f63ed
3 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
View File

@@ -79,14 +79,16 @@ function createTaskRequestObject(
}; };
} }
type Section = "base" | "extraction" | "advanced";
function CreateNewTaskForm({ initialValues }: Props) { function CreateNewTaskForm({ initialValues }: Props) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { toast } = useToast(); const { toast } = useToast();
const credentialGetter = useCredentialGetter(); const credentialGetter = useCredentialGetter();
const apiCredential = useApiCredential(); const apiCredential = useApiCredential();
const [section, setSection] = useState<"base" | "extraction" | "advanced">( const [activeSections, setActiveSections] = useState<Array<Section>>([
"base", "base",
); ]);
const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false); const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);
const form = useForm<CreateNewTaskFormValues>({ const form = useForm<CreateNewTaskFormValues>({
@@ -163,22 +165,34 @@ function CreateNewTaskForm({ initialValues }: Props) {
mutation.mutate(values); mutation.mutate(values);
} }
function isActive(section: Section) {
return activeSections.includes(section);
}
function toggleSection(section: Section) {
if (isActive(section)) {
setActiveSections(activeSections.filter((s) => s !== section));
} else {
setActiveSections([...activeSections, section]);
}
}
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<TaskFormSection <TaskFormSection
index={1} index={1}
title="Base Content" title="Base Content"
active={section === "base"} active={isActive("base")}
onClick={() => { onClick={() => {
setSection("base"); toggleSection("base");
}} }}
hasError={ hasError={
typeof errors.url !== "undefined" || typeof errors.url !== "undefined" ||
typeof errors.navigationGoal !== "undefined" typeof errors.navigationGoal !== "undefined"
} }
> >
{section === "base" && ( {isActive("base") && (
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormField <FormField
@@ -302,16 +316,16 @@ function CreateNewTaskForm({ initialValues }: Props) {
<TaskFormSection <TaskFormSection
index={2} index={2}
title="Extraction" title="Extraction"
active={section === "extraction"} active={isActive("extraction")}
onClick={() => { onClick={() => {
setSection("extraction"); toggleSection("extraction");
}} }}
hasError={ hasError={
typeof errors.dataExtractionGoal !== "undefined" || typeof errors.dataExtractionGoal !== "undefined" ||
typeof errors.extractedInformationSchema !== "undefined" typeof errors.extractedInformationSchema !== "undefined"
} }
> >
{section === "extraction" && ( {isActive("extraction") && (
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormField <FormField
@@ -379,9 +393,9 @@ function CreateNewTaskForm({ initialValues }: Props) {
<TaskFormSection <TaskFormSection
index={3} index={3}
title="Advanced Settings" title="Advanced Settings"
active={section === "advanced"} active={isActive("advanced")}
onClick={() => { onClick={() => {
setSection("advanced"); toggleSection("advanced");
}} }}
hasError={ hasError={
typeof errors.navigationPayload !== "undefined" || typeof errors.navigationPayload !== "undefined" ||
@@ -390,7 +404,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
typeof errors.errorCodeMapping !== "undefined" typeof errors.errorCodeMapping !== "undefined"
} }
> >
{section === "advanced" && ( {isActive("advanced") && (
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormField <FormField

42
skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
View File

@@ -129,15 +129,17 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
}; };
} }
type Section = "base" | "extraction" | "advanced";
function SavedTaskForm({ initialValues }: Props) { function SavedTaskForm({ initialValues }: Props) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { toast } = useToast(); const { toast } = useToast();
const credentialGetter = useCredentialGetter(); const credentialGetter = useCredentialGetter();
const apiCredential = useApiCredential(); const apiCredential = useApiCredential();
const { template } = useParams(); const { template } = useParams();
const [section, setSection] = useState<"base" | "extraction" | "advanced">( const [activeSections, setActiveSections] = useState<Array<Section>>([
"base", "base",
); ]);
const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false); const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);
const form = useForm<SavedTaskFormValues>({ const form = useForm<SavedTaskFormValues>({
@@ -263,6 +265,18 @@ function SavedTaskForm({ initialValues }: Props) {
saveTaskMutation.mutate(values); saveTaskMutation.mutate(values);
} }
function isActive(section: Section) {
return activeSections.includes(section);
}
function toggleSection(section: Section) {
if (isActive(section)) {
setActiveSections(activeSections.filter((s) => s !== section));
} else {
setActiveSections([...activeSections, section]);
}
}
return ( return (
<Form {...form}> <Form {...form}>
<form <form
@@ -282,8 +296,10 @@ function SavedTaskForm({ initialValues }: Props) {
<TaskFormSection <TaskFormSection
index={1} index={1}
title="Base Content" title="Base Content"
active={section === "base"} active={isActive("base")}
onClick={() => setSection("base")} onClick={() => {
toggleSection("base");
}}
hasError={ hasError={
typeof errors.navigationGoal !== "undefined" || typeof errors.navigationGoal !== "undefined" ||
typeof errors.title !== "undefined" || typeof errors.title !== "undefined" ||
@@ -291,7 +307,7 @@ function SavedTaskForm({ initialValues }: Props) {
typeof errors.description !== "undefined" typeof errors.description !== "undefined"
} }
> >
{section === "base" && ( {isActive("base") && (
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormField <FormField
@@ -467,14 +483,16 @@ function SavedTaskForm({ initialValues }: Props) {
<TaskFormSection <TaskFormSection
index={2} index={2}
title="Extraction" title="Extraction"
active={section === "extraction"} active={isActive("extraction")}
onClick={() => setSection("extraction")} onClick={() => {
toggleSection("extraction");
}}
hasError={ hasError={
typeof errors.extractedInformationSchema !== "undefined" || typeof errors.extractedInformationSchema !== "undefined" ||
typeof errors.dataExtractionGoal !== "undefined" typeof errors.dataExtractionGoal !== "undefined"
} }
> >
{section === "extraction" && ( {isActive("extraction") && (
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormField <FormField
@@ -547,8 +565,10 @@ function SavedTaskForm({ initialValues }: Props) {
<TaskFormSection <TaskFormSection
index={3} index={3}
title="Advanced Settings" title="Advanced Settings"
active={section === "advanced"} active={isActive("advanced")}
onClick={() => setSection("advanced")} onClick={() => {
toggleSection("advanced");
}}
hasError={ hasError={
typeof errors.navigationPayload !== "undefined" || typeof errors.navigationPayload !== "undefined" ||
typeof errors.maxStepsOverride !== "undefined" || typeof errors.maxStepsOverride !== "undefined" ||
@@ -556,7 +576,7 @@ function SavedTaskForm({ initialValues }: Props) {
typeof errors.errorCodeMapping !== "undefined" typeof errors.errorCodeMapping !== "undefined"
} }
> >
{section === "advanced" && ( {isActive("advanced") && (
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<FormField <FormField

48
skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx
View File

@@ -21,41 +21,35 @@ function TaskFormSection({
const [hovering, setHovering] = useState(false); const [hovering, setHovering] = useState(false);
return ( return (
<section <section className="space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5">
className={cn("space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5", {
"cursor-pointer": !active,
})}
onMouseOver={() => setHovering(true)}
onMouseOut={() => setHovering(false)}
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
onClick={() => onClick && onClick()}
>
<header className="flex h-7 gap-4"> <header className="flex h-7 gap-4">
<div <div
className={cn( className="flex h-7 cursor-pointer gap-4"
"flex w-7 items-center justify-center rounded-full border border-slate-400", onClick={() => onClick && onClick()}
{ onMouseEnter={() => setHovering(true)}
"bg-slate-400": hovering || active, onMouseLeave={() => setHovering(false)}
"border-destructive": !active && hasError, onMouseOver={() => setHovering(true)}
}, onMouseOut={() => setHovering(false)}
)}
> >
<div
className={cn(
"flex w-7 items-center justify-center rounded-full border border-slate-400",
{
"border-destructive": !active && hasError,
"bg-slate-400 text-slate-950": active || hovering,
},
)}
>
<span className={"text-slate-50"}>{String(index)}</span>
</div>
<span <span
className={cn("text-slate-50", { className={cn("text-lg", {
"text-slate-950": hovering || active, "text-destructive": !active && hasError,
})} })}
> >
{String(index)} {title}
</span> </span>
</div> </div>
<span
className={cn("text-lg", {
"text-destructive": !active && hasError,
})}
>
{title}
</span>
</header> </header>
{children} {children}
</section> </section>