Make multi section openable in task form (#897)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

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

skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx

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

skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx

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