Skyvern Forms UI (#1330)

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

@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
@@ -88,7 +88,6 @@ type Section = "base" | "extraction" | "advanced";
 
 function CreateNewTaskForm({ initialValues }: Props) {
   const queryClient = useQueryClient();
-  const { toast } = useToast();
   const credentialGetter = useCredentialGetter();
   const apiCredential = useApiCredential();
   const [activeSections, setActiveSections] = useState<Array<Section>>([

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

@@ -1,7 +1,6 @@
 import { getClient } from "@/api/AxiosClient";
 import { TaskGenerationApiResponse } from "@/api/types";
 import img from "@/assets/promptBoxBg.png";
-import { BookIcon } from "@/components/icons/BookIcon";
 import { CartIcon } from "@/components/icons/CartIcon";
 import { GraphIcon } from "@/components/icons/GraphIcon";
 import { InboxIcon } from "@/components/icons/InboxIcon";
@@ -16,6 +15,7 @@ import {
   GearIcon,
   PaperPlaneIcon,
   Pencil1Icon,
+  PlusIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -97,11 +97,6 @@ const exampleCases = [
     label: "Search for AAPL on Google Finance",
     icon: <GraphIcon className="size-6" />,
   },
-  {
-    key: "NYTBestseller",
-    label: "Get the top NYT bestseller",
-    icon: <BookIcon className="size-6" />,
-  },
   {
     key: "topRankedFootballTeam",
     label: "Get the top ranked football team",
@@ -196,7 +191,7 @@ function PromptBox() {
                     const taskGenerationResponse =
                       await getTaskFromPromptMutation.mutateAsync(prompt);
                     await saveTaskMutation.mutateAsync(taskGenerationResponse);
-                    navigate("/create/from-prompt", {
+                    navigate("/tasks/create/from-prompt", {
                       state: {
                         data: taskGenerationResponse,
                       },
@@ -209,13 +204,22 @@ function PromptBox() {
         </div>
       </div>
       <div className="flex flex-wrap justify-center gap-4 rounded-sm bg-slate-elevation1 p-4">
+        <div
+          className="flex cursor-pointer gap-2 whitespace-normal rounded-sm border-2 border-dashed bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5 lg:whitespace-nowrap"
+          onClick={() => {
+            navigate("/tasks/create/blank");
+          }}
+        >
+          <PlusIcon className="size-6" />
+          Build Your Own
+        </div>
         {exampleCases.map((example) => {
           return (
             <div
               key={example.key}
               className="flex cursor-pointer gap-2 whitespace-normal rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5 lg:whitespace-nowrap"
               onClick={() => {
-                navigate(`/create/${example.key}`);
+                navigate(`/tasks/create/${example.key}`);
               }}
             >
               <div>{example.icon}</div>

skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx

@@ -22,12 +22,12 @@ function RetryTask() {
       <CreateNewTaskForm
         initialValues={{
           url: task.request.url,
-          navigationGoal: task.request.navigation_goal,
+          navigationGoal: task.request.navigation_goal ?? null,
           navigationPayload:
             typeof task.request.navigation_payload === "string"
               ? task.request.navigation_payload
               : JSON.stringify(task.request.navigation_payload, null, 2),
-          dataExtractionGoal: task.request.data_extraction_goal,
+          dataExtractionGoal: task.request.data_extraction_goal ?? null,
           extractedInformationSchema:
             typeof task.request.extracted_information_schema === "string"
               ? task.request.extracted_information_schema
@@ -36,13 +36,13 @@ function RetryTask() {
                   null,
                   2,
                 ),
-          webhookCallbackUrl: task.request.webhook_callback_url,
-          totpIdentifier: task.request.totp_identifier,
-          totpVerificationUrl: task.request.totp_verification_url,
+          webhookCallbackUrl: task.request.webhook_callback_url ?? null,
+          totpIdentifier: task.request.totp_identifier ?? null,
+          totpVerificationUrl: task.request.totp_verification_url ?? null,
           errorCodeMapping: task.request.error_code_mapping
             ? JSON.stringify(task.request.error_code_mapping, null, 2)
             : "",
-          proxyLocation: task.request.proxy_location,
+          proxyLocation: task.request.proxy_location ?? null,
         }}
       />
     </div>