Change rerun workflow behavior (#775)

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

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -1,6 +1,17 @@
 import { getClient } from "@/api/AxiosClient";
 import { TaskApiResponse, WorkflowRunStatusApiResponse } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
@@ -11,31 +22,16 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
 import { basicTimeFormat } from "@/util/timeFormat";
-import { TaskActions } from "../tasks/list/TaskActions";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
 import { cn } from "@/util/utils";
-import { queryClient } from "@/api/QueryClient";
+import { useQuery } from "@tanstack/react-query";
-import { toast } from "@/components/ui/use-toast";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { Button } from "@/components/ui/button";
+import { TaskActions } from "../tasks/list/TaskActions";
-import { ReloadIcon } from "@radix-ui/react-icons";
+import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
 
 function WorkflowRun() {
   const [searchParams, setSearchParams] = useSearchParams();
   const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
-
   const { workflowRunId, workflowPermanentId } = useParams();
   const credentialGetter = useCredentialGetter();
   const navigate = useNavigate();
@@ -64,35 +60,6 @@ function WorkflowRun() {
     },
   });
 
-  const runWorkflowMutation = useMutation({
-    mutationFn: async (values: Record<string, unknown>) => {
-      const client = await getClient(credentialGetter);
-      return client
-        .post(`/workflows/${workflowPermanentId}/run`, {
-          data: values,
-          proxy_location: "RESIDENTIAL",
-        })
-        .then((response) => response.data);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["workflowRuns"],
-      });
-      toast({
-        variant: "success",
-        title: "Workflow run started",
-        description: "The workflow run has been started successfully",
-      });
-    },
-    onError: (error) => {
-      toast({
-        variant: "destructive",
-        title: "Failed to start workflow run",
-        description: error.message,
-      });
-    },
-  });
-
   function handleNavigate(event: React.MouseEvent, id: string) {
     if (event.ctrlKey || event.metaKey) {
       window.open(
@@ -120,14 +87,12 @@ function WorkflowRun() {
         </div>
         <Button
           onClick={() => {
-            runWorkflowMutation.mutate(parameters);
+            navigate(`/workflows/${workflowPermanentId}/run`, {
+              state: { data: parameters },
+            });
           }}
-          disabled={runWorkflowMutation.isPending}
           variant="secondary"
         >
-          {runWorkflowMutation.isPending && (
-            <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-          )}
           Rerun Workflow
         </Button>
       </header>

skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx

@@ -2,7 +2,7 @@ import { getClient } from "@/api/AxiosClient";
 import { WorkflowApiResponse, WorkflowParameterValueType } from "@/api/types";
 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 { RunWorkflowForm } from "./RunWorkflowForm";
 
 function defaultValue(type: WorkflowParameterValueType) {
@@ -25,6 +25,7 @@ function defaultValue(type: WorkflowParameterValueType) {
 function WorkflowRunParameters() {
   const credentialGetter = useCredentialGetter();
   const { workflowPermanentId } = useParams();
+  const location = useLocation();
 
   const { data: workflow, isFetching } = useQuery<WorkflowApiResponse>({
     queryKey: ["workflow", workflowPermanentId],
@@ -40,31 +41,33 @@ function WorkflowRunParameters() {
     (parameter) => parameter.parameter_type === "workflow",
   );
 
-  const initialValues = workflowParameters?.reduce(
+  const initialValues = location.state?.data
-    (acc, curr) => {
+    ? location.state.data
-      if (curr.workflow_parameter_type === "file_url") {
+    : workflowParameters?.reduce(
-        acc[curr.key] = null;
+        (acc, curr) => {
-        return acc;
+          if (curr.workflow_parameter_type === "file_url") {
-      }
+            acc[curr.key] = null;
-      if (curr.workflow_parameter_type === "json") {
+            return acc;
-        if (typeof curr.default_value === "string") {
+          }
-          acc[curr.key] = curr.default_value;
+          if (curr.workflow_parameter_type === "json") {
+            if (typeof curr.default_value === "string") {
+              acc[curr.key] = curr.default_value;
+              return acc;
+            }
+            if (curr.default_value) {
+              acc[curr.key] = JSON.stringify(curr.default_value, null, 2);
+              return acc;
+            }
+          }
+          if (curr.default_value) {
+            acc[curr.key] = curr.default_value;
+            return acc;
+          }
+          acc[curr.key] = defaultValue(curr.workflow_parameter_type);
           return acc;
-        }
+        },
-        if (curr.default_value) {
+        {} as Record<string, unknown>,
-          acc[curr.key] = JSON.stringify(curr.default_value, null, 2);
+      );
-          return acc;
-        }
-      }
-      if (curr.default_value) {
-        acc[curr.key] = curr.default_value;
-        return acc;
-      }
-      acc[curr.key] = defaultValue(curr.workflow_parameter_type);
-      return acc;
-    },
-    {} as Record<string, unknown>,
-  );
 
   if (isFetching) {
     return <div>Getting workflow parameters...</div>;