Frontend: unified /runs URL (#3912)

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

@@ -4,14 +4,19 @@ 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 { useWorkflowRunQuery } from "./useWorkflowRunQuery";
+import { useWorkflowRunWithWorkflowQuery } from "./useWorkflowRunWithWorkflowQuery";
 import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 function useWorkflowRunTimelineQuery() {
-  const { workflowRunId, workflowPermanentId } = useParams();
+  const workflowRunId = useFirstParam("workflowRunId", "runId");
+  const { workflowPermanentId: workflowPermanentIdParam } = useParams();
   const credentialGetter = useCredentialGetter();
   const { data: globalWorkflows } = useGlobalWorkflowsQuery();
-  const { data: workflowRun } = useWorkflowRunQuery();
+  const { data: workflowRun } = useWorkflowRunWithWorkflowQuery();
+
+  const workflowPermanentId =
+    workflowPermanentIdParam ?? workflowRun?.workflow?.workflow_permanent_id;
 
   return useQuery<Array<WorkflowRunTimelineItem>>({
     queryKey: ["workflowRunTimeline", workflowPermanentId, workflowRunId],

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

@@ -0,0 +1,51 @@
+import { getClient } from "@/api/AxiosClient";
+import { WorkflowRunStatusApiResponseWithWorkflow } from "@/api/types";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import {
+  statusIsNotFinalized,
+  statusIsRunningOrQueued,
+} from "@/routes/tasks/types";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useFirstParam } from "@/hooks/useFirstParam";
+
+function useWorkflowRunWithWorkflowQuery() {
+  const workflowRunId = useFirstParam("workflowRunId", "runId");
+  const credentialGetter = useCredentialGetter();
+
+  return useQuery<WorkflowRunStatusApiResponseWithWorkflow>({
+    queryKey: ["workflowRun", workflowRunId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter, "sans-api-v1");
+      return client
+        .get(`/workflows/runs/${workflowRunId}`)
+        .then((response) => response.data);
+    },
+    refetchInterval: (query) => {
+      if (!query.state.data) {
+        return false;
+      }
+      if (statusIsNotFinalized(query.state.data)) {
+        return 5000;
+      }
+      return false;
+    },
+    // required for OS-level notifications to work (workflow run completion)
+    refetchIntervalInBackground: true,
+    placeholderData: keepPreviousData,
+    refetchOnMount: (query) => {
+      if (!query.state.data) {
+        return false;
+      }
+      return statusIsRunningOrQueued(query.state.data) ? "always" : false;
+    },
+    refetchOnWindowFocus: (query) => {
+      if (!query.state.data) {
+        return false;
+      }
+      return statusIsRunningOrQueued(query.state.data);
+    },
+    enabled: !!workflowRunId,
+  });
+}
+
+export { useWorkflowRunWithWorkflowQuery };