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

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

@@ -1,6 +1,6 @@
-import { getClient } from "@/api/AxiosClient";
+import { Status } from "@/api/types";
-import { Status, WorkflowRunApiResponse } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
+import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
 import { Button } from "@/components/ui/button";
 import {
   Pagination,
@@ -19,50 +19,31 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import { Pencil2Icon, PlayIcon } from "@radix-ui/react-icons";
-import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 import {
   Link,
   useNavigate,
   useParams,
   useSearchParams,
 } from "react-router-dom";
-import { WorkflowActions } from "./WorkflowActions";
-import { useState } from "react";
-import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
 import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
-import { globalWorkflowIds } from "@/util/env";
+import { useWorkflowRunsQuery } from "./hooks/useWorkflowRunsQuery";
+import { WorkflowActions } from "./WorkflowActions";
 
 function WorkflowPage() {
-  const credentialGetter = useCredentialGetter();
   const { workflowPermanentId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
   const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
   const navigate = useNavigate();
 
-  const { data: workflowRuns, isLoading } = useQuery<
+  const { data: workflowRuns, isLoading } = useWorkflowRunsQuery({
-    Array<WorkflowRunApiResponse>
+    workflowPermanentId,
-  >({
+    statusFilters,
-    queryKey: ["workflowRuns", workflowPermanentId, { statusFilters }, page],
+    page,
-    queryFn: async () => {
-      const client = await getClient(credentialGetter);
-      const isGlobalWorkflow =
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
-      const params = new URLSearchParams();
-      if (isGlobalWorkflow) {
-        params.set("template", "true");
-      }
-      params.append("page", String(page));
-      return client
-        .get(`/workflows/${workflowPermanentId}/runs`, {
-          params,
-        })
-        .then((response) => response.data);
-    },
     refetchOnMount: "always",
   });
 

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

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

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -1,19 +1,19 @@
 import { SaveIcon } from "@/components/icons/SaveIcon";
 import { Button } from "@/components/ui/button";
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  PlayIcon,
-} from "@radix-ui/react-icons";
-import { useNavigate, useParams } from "react-router-dom";
-import { EditableNodeTitle } from "./nodes/components/EditableNodeTitle";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { globalWorkflowIds } from "@/util/env";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  PlayIcon,
+} from "@radix-ui/react-icons";
+import { useNavigate, useParams } from "react-router-dom";
+import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
+import { EditableNodeTitle } from "./nodes/components/EditableNodeTitle";
 
 type Props = {
   title: string;
@@ -31,11 +31,17 @@ function WorkflowHeader({
   onTitleChange,
 }: Props) {
   const { workflowPermanentId } = useParams();
-  const isGlobalWorkflow = Boolean(
+  const { data: globalWorkflows } = useGlobalWorkflowsQuery();
-    workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId),
-  );
   const navigate = useNavigate();
 
+  if (!globalWorkflows) {
+    return null; // this should be loaded already by some other components
+  }
+
+  const isGlobalWorkflow = globalWorkflows.some(
+    (workflow) => workflow.workflow_permanent_id === workflowPermanentId,
+  );
+
   return (
     <div className="flex h-full w-full justify-between rounded-xl bg-slate-elevation2 px-6 py-5">
       <div className="flex h-full items-center">

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 =
+      const isGlobalWorkflow = globalWorkflows?.some(
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+        (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 =
+      const isGlobalWorkflow = globalWorkflows?.some(
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+        (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 =
+      const isGlobalWorkflow = globalWorkflows?.some(
-        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+        (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 };

skyvern-frontend/src/util/env.ts

@@ -21,29 +21,10 @@ if (!artifactApiBaseUrl) {
 
 const apiPathPrefix = import.meta.env.VITE_API_PATH_PREFIX ?? "";
 
-function getGlobalWorkflowIds(): Array<string> {
-  const globalWorkflowIds = import.meta.env.VITE_GLOBAL_WORKFLOW_IDS;
-  if (!globalWorkflowIds) {
-    return [];
-  }
-  try {
-    const globalWorkflowIdsAsAList = JSON.parse(globalWorkflowIds);
-    if (Array.isArray(globalWorkflowIdsAsAList)) {
-      return globalWorkflowIdsAsAList;
-    }
-    return [];
-  } catch {
-    return [];
-  }
-}
-
-const globalWorkflowIds = getGlobalWorkflowIds();
-
 export {
   apiBaseUrl,
   environment,
   envCredential,
   artifactApiBaseUrl,
   apiPathPrefix,
-  globalWorkflowIds,
 };