Implement retry task (#600)

skyvern-frontend/src/api/utils.ts

@@ -0,0 +1,13 @@
+import { Status, TaskApiResponse } from "./types";
+
+const finalTaskStates: Array<Status> = [
+  Status.Canceled,
+  Status.Completed,
+  Status.Terminated,
+  Status.TimedOut,
+  Status.Failed,
+];
+
+export function taskIsFinalized(task: TaskApiResponse) {
+  return finalTaskStates.includes(task.status);
+}

skyvern-frontend/src/router.tsx

@@ -17,6 +17,7 @@ import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
 import { Workflows } from "./routes/workflows/Workflows";
 import { WorkflowPage } from "./routes/workflows/WorkflowPage";
 import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters";
+import { RetryTask } from "./routes/tasks/create/retry/RetryTask";
 
 const router = createBrowserRouter([
   {
@@ -79,6 +80,10 @@ const router = createBrowserRouter([
             path: ":template",
             element: <CreateNewTaskFormPage />,
           },
+          {
+            path: "retry/:taskId",
+            element: <RetryTask />,
+          },
         ],
       },
       {

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

@@ -0,0 +1,41 @@
+import { useParams } from "react-router-dom";
+import { useTaskQuery } from "../../detail/hooks/useTaskQuery";
+import { CreateNewTaskForm } from "../CreateNewTaskForm";
+
+function RetryTask() {
+  const { taskId } = useParams();
+  const { data: task, isLoading } = useTaskQuery({ id: taskId });
+
+  if (isLoading) {
+    return <div>Fetching task details...</div>;
+  }
+
+  if (!task) {
+    return null;
+  }
+
+  return (
+    <CreateNewTaskForm
+      initialValues={{
+        url: task.request.url,
+        navigationGoal: task.request.navigation_goal,
+        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,
+        extractedInformationSchema:
+          typeof task.request.extracted_information_schema === "string"
+            ? task.request.extracted_information_schema
+            : JSON.stringify(
+                task.request.extracted_information_schema,
+                null,
+                2,
+              ),
+        webhookCallbackUrl: task.request.webhook_callback_url,
+      }}
+    />
+  );
+}
+
+export { RetryTask };

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -19,9 +19,10 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { cn } from "@/util/utils";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { NavLink, Outlet, useParams } from "react-router-dom";
+import { Link, NavLink, Outlet, useParams } from "react-router-dom";
 import { TaskInfo } from "./TaskInfo";
 import { useTaskQuery } from "./hooks/useTaskQuery";
+import { taskIsFinalized } from "@/api/utils";
 
 function TaskDetails() {
   const { taskId } = useParams();
@@ -84,6 +85,8 @@ function TaskDetails() {
   const taskIsRunningOrQueued =
     task?.status === Status.Running || task?.status === Status.Queued;
 
+  const taskHasTerminalState = task && taskIsFinalized(task);
+
   const showFailureReason =
     task?.status === Status.Failed ||
     task?.status === Status.Terminated ||
@@ -138,6 +141,11 @@ function TaskDetails() {
             </DialogContent>
           </Dialog>
         )}
+        {taskHasTerminalState && (
+          <Button variant="secondary" asChild>
+            <Link to={`/create/retry/${task.task_id}`}>Retry Task</Link>
+          </Button>
+        )}
       </div>
       {taskIsLoading ? (
         <div className="flex items-center gap-2">

skyvern-frontend/src/routes/tasks/list/TaskActions.tsx

@@ -41,6 +41,7 @@ import {
   TaskTemplateFormValues,
   taskTemplateFormSchema,
 } from "../create/TaskTemplateFormSchema";
+import { useNavigate } from "react-router-dom";
 
 function createTaskTemplateRequestObject(
   values: TaskTemplateFormValues,
@@ -88,6 +89,7 @@ function TaskActions({ task }: Props) {
   const [open, setOpen] = useState(false);
   const id = useId();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   const credentialGetter = useCredentialGetter();
   const form = useForm<TaskTemplateFormValues>({
     resolver: zodResolver(taskTemplateFormSchema),
@@ -154,6 +156,13 @@ function TaskActions({ task }: Props) {
                 Save as Template
               </DropdownMenuItem>
             </DialogTrigger>
+            <DropdownMenuItem
+              onSelect={() => {
+                navigate(`/create/retry/${task.task_id}`);
+              }}
+            >
+              Retry Task
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
         <DialogContent>