Change workflow queries to use API to get global workflows (#1688)

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

@@ -0,0 +1,24 @@
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { WorkflowApiResponse } from "../types/workflowTypes";
+
+function useGlobalWorkflowsQuery() {
+  const credentialGetter = useCredentialGetter();
+  return useQuery({
+    queryKey: ["globalWorkflows"],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.set("template", "true");
+      params.set("page_size", "100");
+      return client
+        .get<Array<WorkflowApiResponse>>("/workflows", {
+          params,
+        })
+        .then((response) => response.data);
+    },
+  });
+}
+
+export { useGlobalWorkflowsQuery };

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

@@ -2,20 +2,22 @@ import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { WorkflowApiResponse } from "../types/workflowTypes";
-import { globalWorkflowIds } from "@/util/env";
-
+import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
 type Props = {
   workflowPermanentId?: string;
 };
 
 function useWorkflowQuery({ workflowPermanentId }: Props) {
+  const { data: globalWorkflows } = useGlobalWorkflowsQuery();
   const credentialGetter = useCredentialGetter();
+
   return useQuery<WorkflowApiResponse>({
     queryKey: ["workflow", workflowPermanentId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      const isGlobalWorkflow =
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+      const isGlobalWorkflow = globalWorkflows?.some(
+        (workflow) => workflow.workflow_permanent_id === workflowPermanentId,
+      );
       const params = new URLSearchParams();
       if (isGlobalWorkflow) {
         params.set("template", "true");
@@ -24,6 +26,7 @@ function useWorkflowQuery({ workflowPermanentId }: Props) {
         .get(`/workflows/${workflowPermanentId}`, { params })
         .then((response) => response.data);
     },
+    enabled: !!globalWorkflows && !!workflowPermanentId,
   });
 }
 

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

@@ -5,20 +5,22 @@ import {
   statusIsNotFinalized,
   statusIsRunningOrQueued,
 } from "@/routes/tasks/types";
-import { globalWorkflowIds } from "@/util/env";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
+import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
 
 function useWorkflowRunQuery() {
   const { workflowRunId, workflowPermanentId } = useParams();
   const credentialGetter = useCredentialGetter();
+  const { data: globalWorkflows } = useGlobalWorkflowsQuery();
 
   return useQuery<WorkflowRunStatusApiResponse>({
     queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      const isGlobalWorkflow =
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+      const isGlobalWorkflow = globalWorkflows?.some(
+        (workflow) => workflow.workflow_permanent_id === workflowPermanentId,
+      );
       const params = new URLSearchParams();
       if (isGlobalWorkflow) {
         params.set("template", "true");
@@ -51,6 +53,7 @@ function useWorkflowRunQuery() {
       }
       return statusIsRunningOrQueued(query.state.data);
     },
+    enabled: !!globalWorkflows && !!workflowPermanentId && !!workflowRunId,
   });
 }
 

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

@@ -5,19 +5,21 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
 import { WorkflowRunTimelineItem } from "../types/workflowRunTypes";
 import { useWorkflowRunQuery } from "./useWorkflowRunQuery";
-import { globalWorkflowIds } from "@/util/env";
+import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
 
 function useWorkflowRunTimelineQuery() {
   const { workflowRunId, workflowPermanentId } = useParams();
   const credentialGetter = useCredentialGetter();
+  const { data: globalWorkflows } = useGlobalWorkflowsQuery();
   const { data: workflowRun } = useWorkflowRunQuery();
 
   return useQuery<Array<WorkflowRunTimelineItem>>({
     queryKey: ["workflowRunTimeline", workflowPermanentId, workflowRunId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      const isGlobalWorkflow =
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+      const isGlobalWorkflow = globalWorkflows?.some(
+        (workflow) => workflow.workflow_permanent_id === workflowPermanentId,
+      );
       const params = new URLSearchParams();
       if (isGlobalWorkflow) {
         params.set("template", "true");
@@ -36,6 +38,7 @@ function useWorkflowRunTimelineQuery() {
       workflowRun && statusIsNotFinalized(workflowRun) ? "always" : false,
     refetchOnWindowFocus:
       workflowRun && statusIsNotFinalized(workflowRun) ? "always" : false,
+    enabled: !!globalWorkflows && !!workflowPermanentId && !!workflowRunId,
   });
 }
 

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

@@ -0,0 +1,57 @@
+import { getClient } from "@/api/AxiosClient";
+import { Status, WorkflowRunApiResponse } from "@/api/types";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
+
+type QueryReturnType = Array<WorkflowRunApiResponse>;
+type UseQueryOptions = Omit<
+  Parameters<typeof useQuery<QueryReturnType>>[0],
+  "queryKey" | "queryFn" | "enabled"
+>;
+
+type Props = {
+  workflowPermanentId?: string;
+  statusFilters?: Array<Status>;
+  page: number;
+} & UseQueryOptions;
+
+function useWorkflowRunsQuery({
+  workflowPermanentId,
+  statusFilters,
+  page,
+  ...queryOptions
+}: Props) {
+  const { data: globalWorkflows } = useGlobalWorkflowsQuery();
+  const credentialGetter = useCredentialGetter();
+
+  return useQuery<Array<WorkflowRunApiResponse>>({
+    queryKey: ["workflowRuns", { statusFilters }, workflowPermanentId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      const isGlobalWorkflow = globalWorkflows?.some(
+        (workflow) => workflow.workflow_permanent_id === workflowPermanentId,
+      );
+      params.append("page", String(page));
+      if (isGlobalWorkflow) {
+        params.append("template", "true");
+      }
+      if (statusFilters) {
+        statusFilters.forEach((status) => {
+          params.append("status", status);
+        });
+      }
+
+      return client
+        .get(`/workflows/${workflowPermanentId}/runs`, {
+          params,
+        })
+        .then((response) => response.data);
+    },
+    enabled: !!workflowPermanentId && !!globalWorkflows,
+    ...queryOptions,
+  });
+}
+
+export { useWorkflowRunsQuery };