Jon/use new runs urls (#3930)

skyvern-frontend/src/hooks/useFirstParam.ts

@@ -11,7 +11,7 @@ const useFirstParam = (...paramNames: string[]) => {
       return value;
     }
   }
-  return null;
+  return undefined;
 };
 
 export { useFirstParam };

skyvern-frontend/src/routes/history/RunHistory.tsx

@@ -29,6 +29,7 @@ import { useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import * as env from "@/util/env";
 
 function isTask(run: Task | WorkflowRunApiResponse): run is Task {
   return "task_id" in run;
@@ -185,7 +186,9 @@ function RunHistory() {
                     onClick={(event) => {
                       handleNavigate(
                         event,
-                        `/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/overview`,
+                        env.useNewRunsUrl
+                          ? `/runs/${run.workflow_run_id}`
+                          : `/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/overview`,
                       );
                     }}
                   >

skyvern-frontend/src/routes/runs/RunRouter.tsx

@@ -4,6 +4,7 @@
  */
 
 import { Navigate, Route, Routes, useParams } from "react-router-dom";
+import { useMemo } from "react";
 
 import { PageLayout } from "@/components/PageLayout";
 import { Status404 } from "@/components/Status404";
@@ -22,12 +23,67 @@ import { WorkflowsPageLayout } from "@/routes/workflows/WorkflowsPageLayout";
 import { useTaskV2Query } from "@/routes/runs/useTaskV2Query";
 
 function RunRouter() {
-  let { runId } = useParams();
+  const { runId } = useParams();
 
   const { data: task_v2, isLoading } = useTaskV2Query({
     id: runId?.startsWith("tsk_v2") ? runId : undefined,
   });
 
+  const runType = runId?.startsWith("tsk_v2")
+    ? "redirect"
+    : runId?.startsWith("wr_")
+      ? "workflow"
+      : runId?.startsWith("tsk_")
+        ? "task"
+        : null;
+
+  const routes = useMemo(() => {
+    if (runType === "workflow") {
+      return (
+        <Routes>
+          <Route element={<WorkflowsPageLayout />}>
+            <Route element={<WorkflowRun />}>
+              <Route index element={<Navigate to="overview" replace />} />
+              <Route
+                path="blocks"
+                element={<Navigate to="overview" replace />}
+              />
+              <Route path="overview" element={<WorkflowRunOverview />} />
+              <Route path="output" element={<WorkflowRunOutput />} />
+              <Route
+                path="parameters"
+                element={<WorkflowPostRunParameters />}
+              />
+              <Route path="recording" element={<WorkflowRunRecording />} />
+              <Route
+                path="code"
+                element={<WorkflowRunCode showCacheKeyValueSelector={true} />}
+              />
+            </Route>
+          </Route>
+        </Routes>
+      );
+    }
+
+    if (runType === "task") {
+      return (
+        <Routes>
+          <Route element={<PageLayout />}>
+            <Route element={<TaskDetails />}>
+              <Route index element={<Navigate to="actions" replace />} />
+              <Route path="actions" element={<TaskActions />} />
+              <Route path="recording" element={<TaskRecording />} />
+              <Route path="parameters" element={<TaskParameters />} />
+              <Route path="diagnostics" element={<StepArtifactsLayout />} />
+            </Route>
+          </Route>
+        </Routes>
+      );
+    }
+
+    return <Status404 />;
+  }, [runType]);
+
   if (runId?.startsWith("tsk_v2")) {
     if (isLoading) {
       return <div>Fetching task details...</div>;
@@ -45,50 +101,10 @@ function RunRouter() {
       return <Status404 />;
     }
 
-    runId = workflowRunId;
-
     return <Navigate to={`/runs/${workflowRunId}`} replace />;
   }
 
-  if (runId?.startsWith("wr_")) {
+  return routes;
-    return (
-      <Routes>
-        <Route element={<WorkflowsPageLayout />}>
-          <Route element={<WorkflowRun />}>
-            <Route index element={<Navigate to="overview" replace />} />
-            <Route path="blocks" element={<Navigate to="overview" replace />} />
-            <Route path="overview" element={<WorkflowRunOverview />} />
-            <Route path="output" element={<WorkflowRunOutput />} />
-            <Route path="parameters" element={<WorkflowPostRunParameters />} />
-            <Route path="recording" element={<WorkflowRunRecording />} />
-            <Route
-              path="code"
-              element={<WorkflowRunCode showCacheKeyValueSelector={true} />}
-            />
-          </Route>
-        </Route>
-      </Routes>
-    );
-  }
-
-  if (runId?.startsWith("tsk_")) {
-    return (
-      <Routes>
-        <Route element={<PageLayout />}>
-          <Route element={<TaskDetails />}>
-            <Route index element={<Navigate to="actions" replace />} />
-            <Route path="actions" element={<TaskActions />} />
-            <Route path="recording" element={<TaskRecording />} />
-            <Route path="parameters" element={<TaskParameters />} />
-            <Route path="diagnostics" element={<StepArtifactsLayout />} />
-          </Route>
-        </Route>
-      </Routes>
-    );
-  }
-
-  // Fallback (should not reach here due to earlier check)
-  return <Status404 />;
 }
 
 export { RunRouter };

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

@@ -1,9 +1,9 @@
-import { useParams } from "react-router-dom";
 import { useTaskQuery } from "../../detail/hooks/useTaskQuery";
 import { CreateNewTaskForm } from "../CreateNewTaskForm";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 function RetryTask() {
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
   const { data: task, isLoading } = useTaskQuery({ id: taskId });
 
   if (isLoading) {

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

@@ -40,6 +40,7 @@ import { statusIsFinalized } from "../types";
 import { MAX_STEPS_DEFAULT } from "../constants";
 import { useTaskQuery } from "./hooks/useTaskQuery";
 import { useFirstParam } from "@/hooks/useFirstParam";
+import * as env from "@/util/env";
 
 function createTaskRequestObject(values: TaskApiResponse) {
   return {
@@ -303,7 +304,11 @@ function TaskDetails() {
             workflow &&
             workflowRun && (
               <Link
-                to={`/workflows/${workflow.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`}
+                to={
+                  env.useNewRunsUrl
+                    ? `/runs/${workflowRun.workflow_run_id}`
+                    : `/workflows/${workflow.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`
+                }
               >
                 {workflow.title}
               </Link>

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

@@ -49,6 +49,7 @@ import { getLabelForWorkflowParameterType } from "./editor/workflowEditorUtils";
 import { WorkflowParameter } from "./types/workflowTypes";
 import { WorkflowParameterInput } from "./WorkflowParameterInput";
 import { TestWebhookDialog } from "@/components/TestWebhookDialog";
+import * as env from "@/util/env";
 
 // Utility function to omit specified keys from an object
 function omit<T extends Record<string, unknown>, K extends keyof T>(
@@ -247,7 +248,9 @@ function RunWorkflowForm({
         queryKey: ["runs"],
       });
       navigate(
-        `/workflows/${workflowPermanentId}/${response.data.workflow_run_id}/overview`,
+        env.useNewRunsUrl
+          ? `/runs/${response.data.workflow_run_id}`
+          : `/workflows/${workflowPermanentId}/${response.data.workflow_run_id}/overview`,
       );
     },
     onError: (error: AxiosError) => {

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

@@ -49,6 +49,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { RunParametersDialog } from "./workflowRun/RunParametersDialog";
+import * as env from "@/util/env";
 
 function WorkflowPage() {
   const { workflowPermanentId } = useParams();
@@ -186,18 +187,19 @@ function WorkflowPage() {
                     <TableRow
                       key={workflowRun.workflow_run_id}
                       onClick={(event) => {
+                        const url = env.useNewRunsUrl
+                          ? `/runs/${workflowRun.workflow_run_id}`
+                          : `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}/overview`;
+
                         if (event.ctrlKey || event.metaKey) {
                           window.open(
-                            window.location.origin +
+                            window.location.origin + url,
-                              `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}/overview`,
                             "_blank",
                             "noopener,noreferrer",
                           );
                           return;
                         }
-                        navigate(
+                        navigate(url);
-                          `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}/overview`,
-                        );
                       }}
                       className="cursor-pointer"
                     >

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

@@ -32,7 +32,7 @@ import {
   ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Link, Outlet, useParams, useSearchParams } from "react-router-dom";
+import { Link, Outlet, useSearchParams } from "react-router-dom";
 import { statusIsFinalized, statusIsRunningOrQueued } from "../tasks/types";
 import { useWorkflowRunWithWorkflowQuery } from "./hooks/useWorkflowRunWithWorkflowQuery";
 import { WorkflowRunTimeline } from "./workflowRun/WorkflowRunTimeline";
@@ -44,6 +44,7 @@ import { cn } from "@/util/utils";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { ApiWebhookActionsMenu } from "@/components/ApiWebhookActionsMenu";
 import { WebhookReplayDialog } from "@/components/WebhookReplayDialog";
+import { useFirstParam } from "@/hooks/useFirstParam";
 import { type ApiCommandOptions } from "@/util/apiCommands";
 import { useBlockScriptsQuery } from "@/routes/workflows/hooks/useBlockScriptsQuery";
 import { constructCacheKeyValue } from "@/routes/workflows/editor/utils";
@@ -55,7 +56,7 @@ function WorkflowRun() {
   const embed = searchParams.get("embed");
   const isEmbedded = embed === "true";
   const active = searchParams.get("active");
-  const { workflowRunId } = useParams();
+  const workflowRunId = useFirstParam("workflowRunId", "runId");
   const credentialGetter = useCredentialGetter();
   const apiCredential = useApiCredential();
   const queryClient = useQueryClient();

skyvern-frontend/src/routes/workflows/hooks/useWorkflowRunTimelineQuery.ts

@@ -2,7 +2,6 @@ import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { statusIsNotFinalized } from "@/routes/tasks/types";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
 import { WorkflowRunTimelineItem } from "../types/workflowRunTypes";
 import { useWorkflowRunWithWorkflowQuery } from "./useWorkflowRunWithWorkflowQuery";
 import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
@@ -10,13 +9,11 @@ import { useFirstParam } from "@/hooks/useFirstParam";
 
 function useWorkflowRunTimelineQuery() {
   const workflowRunId = useFirstParam("workflowRunId", "runId");
-  const { workflowPermanentId: workflowPermanentIdParam } = useParams();
   const credentialGetter = useCredentialGetter();
   const { data: globalWorkflows } = useGlobalWorkflowsQuery();
   const { data: workflowRun } = useWorkflowRunWithWorkflowQuery();
-
+  const workflow = workflowRun?.workflow;
-  const workflowPermanentId =
+  const workflowPermanentId = workflow?.workflow_permanent_id;
-    workflowPermanentIdParam ?? workflowRun?.workflow?.workflow_permanent_id;
 
   return useQuery<Array<WorkflowRunTimelineItem>>({
     queryKey: ["workflowRunTimeline", workflowPermanentId, workflowRunId],

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunStream.tsx

@@ -1,5 +1,5 @@
 import { Status } from "@/api/types";
-import { useWorkflowRunQuery } from "../hooks/useWorkflowRunQuery";
+import { useWorkflowRunWithWorkflowQuery } from "../hooks/useWorkflowRunWithWorkflowQuery";
 import { ZoomableImage } from "@/components/ZoomableImage";
 import { useEffect, useState } from "react";
 import { statusIsNotFinalized } from "@/routes/tasks/types";
@@ -25,12 +25,14 @@ const wssBaseUrl = import.meta.env.VITE_WSS_BASE_URL;
 
 function WorkflowRunStream(props?: Props) {
   const alwaysShowStream = props?.alwaysShowStream ?? false;
-  const { data: workflowRun } = useWorkflowRunQuery();
+  const { data: workflowRun } = useWorkflowRunWithWorkflowQuery();
   const [streamImgSrc, setStreamImgSrc] = useState<string>("");
   const showStream =
     alwaysShowStream || (workflowRun && statusIsNotFinalized(workflowRun));
   const credentialGetter = useCredentialGetter();
-  const { workflowRunId, workflowPermanentId } = useParams();
+  const { workflowRunId } = useParams();
+  const workflow = workflowRun?.workflow;
+  const workflowPermanentId = workflow?.workflow_permanent_id;
   const queryClient = useQueryClient();
 
   useEffect(() => {
@@ -73,6 +75,9 @@ function WorkflowRunStream(props?: Props) {
             queryClient.invalidateQueries({
               queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
             });
+            queryClient.invalidateQueries({
+              queryKey: ["workflowRun", workflowRunId],
+            });
             queryClient.invalidateQueries({
               queryKey: ["workflowTasks", workflowRunId],
             });

skyvern-frontend/src/util/env.ts

@@ -94,6 +94,8 @@ function clearRuntimeApiKey(): void {
   }
 }
 
+const useNewRunsUrl = true as const;
+
 export {
   apiBaseUrl,
   runsApiBaseUrl,
@@ -106,4 +108,5 @@ export {
   getRuntimeApiKey,
   persistRuntimeApiKey,
   clearRuntimeApiKey,
+  useNewRunsUrl,
 };