Jon/use new runs urls (#3930)

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 +
-                              `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}/overview`,
+                            window.location.origin + url,
                             "_blank",
                             "noopener,noreferrer",
                           );
                           return;
                         }
-                        navigate(
-                          `/workflows/${workflowPermanentId}/${workflowRun.workflow_run_id}/overview`,
-                        );
+                        navigate(url);
                       }}
                       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 workflowPermanentId =
-    workflowPermanentIdParam ?? workflowRun?.workflow?.workflow_permanent_id;
+  const workflow = workflowRun?.workflow;
+  const workflowPermanentId = 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],
             });