Navigate to task form when generating task from prompt (#968)

Author: wintonzheng

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

@@ -1,16 +1,17 @@
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { getSampleForInitialFormValues } from "../data/sampleTaskData";
 import { SampleCase, sampleCases } from "../types";
 import { CreateNewTaskForm } from "./CreateNewTaskForm";
 import { SavedTaskForm } from "./SavedTaskForm";
-import { WorkflowParameter } from "@/api/types";
+import { TaskGenerationApiResponse, WorkflowParameter } from "@/api/types";
 
 function CreateNewTaskFormPage() {
   const { template } = useParams();
   const credentialGetter = useCredentialGetter();
+  const location = useLocation();
 
   const { data, isFetching } = useQuery({
     queryKey: ["savedTask", template],
@@ -29,6 +30,41 @@ function CreateNewTaskFormPage() {
     return <div>Invalid template</div>;
   }
 
+  if (template === "from-prompt") {
+    const data = location.state?.data as TaskGenerationApiResponse;
+    if (!data.url) {
+      return <div>Something went wrong, please try again</div>; // this should never happen
+    }
+    return (
+      <div className="space-y-4">
+        <header>
+          <h1 className="text-3xl">Create New Task</h1>
+        </header>
+        <CreateNewTaskForm
+          key={template}
+          initialValues={{
+            url: data.url,
+            navigationGoal: data.navigation_goal,
+            dataExtractionGoal: data.data_extraction_goal,
+            navigationPayload:
+              typeof data.navigation_payload === "string"
+                ? data.navigation_payload
+                : JSON.stringify(data.navigation_payload, null, 2),
+            extractedInformationSchema: JSON.stringify(
+              data.extracted_information_schema,
+              null,
+              2,
+            ),
+            errorCodeMapping: null,
+            totpIdentifier: null,
+            totpVerificationUrl: null,
+            webhookCallbackUrl: null,
+          }}
+        />
+      </div>
+    );
+  }
+
   if (sampleCases.includes(template as SampleCase)) {
     return (
       <div className="space-y-4">

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

@@ -16,19 +16,6 @@ import {
   ScrollBar,
 } from "@/components/ui/scroll-area";
 
-function createTaskFromTaskGenerationParameters(
-  values: TaskGenerationApiResponse,
-) {
-  return {
-    url: values.url,
-    navigation_goal: values.navigation_goal,
-    data_extraction_goal: values.data_extraction_goal,
-    proxy_location: "RESIDENTIAL",
-    navigation_payload: values.navigation_payload,
-    extracted_information_schema: values.extracted_information_schema,
-  };
-}
-
 function createTemplateTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
 ) {
@@ -120,27 +107,6 @@ function PromptBox() {
     },
   });
 
-  const runTaskMutation = useMutation({
-    mutationFn: async (params: TaskGenerationApiResponse) => {
-      const client = await getClient(credentialGetter);
-      const data = createTaskFromTaskGenerationParameters(params);
-      return client.post<
-        ReturnType<typeof createTaskFromTaskGenerationParameters>,
-        { data: { task_id: string } }
-      >("/tasks", data);
-    },
-    onSuccess: (response) => {
-      navigate(`/tasks/${response.data.task_id}/actions`);
-    },
-    onError: (error: AxiosError) => {
-      toast({
-        variant: "destructive",
-        title: "Error running task",
-        description: error.message,
-      });
-    },
-  });
-
   return (
     <div>
       <div
@@ -163,8 +129,7 @@ function PromptBox() {
             />
             <div className="h-full">
               {getTaskFromPromptMutation.isPending ||
-              saveTaskMutation.isPending ||
-              runTaskMutation.isPending ? (
+              saveTaskMutation.isPending ? (
                 <ReloadIcon className="h-6 w-6 animate-spin" />
               ) : (
                 <PaperPlaneIcon
@@ -173,7 +138,11 @@ function PromptBox() {
                     const taskGenerationResponse =
                       await getTaskFromPromptMutation.mutateAsync(prompt);
                     await saveTaskMutation.mutateAsync(taskGenerationResponse);
-                    await runTaskMutation.mutateAsync(taskGenerationResponse);
+                    navigate("/create/from-prompt", {
+                      state: {
+                        data: taskGenerationResponse,
+                      },
+                    });
                   }}
                 />
               )}