Add job agent (#1672)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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

@@ -30,10 +30,11 @@ import {
   useParams,
   useSearchParams,
 } from "react-router-dom";
-import { WorkflowApiResponse } from "./types/workflowTypes";
 import { WorkflowActions } from "./WorkflowActions";
 import { useState } from "react";
 import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
+import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
+import { globalWorkflowIds } from "@/util/env";
 
 function WorkflowPage() {
   const credentialGetter = useCredentialGetter();
@@ -49,7 +50,12 @@ function WorkflowPage() {
     queryKey: ["workflowRuns", workflowPermanentId, { statusFilters }, 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`, {
@@ -60,16 +66,9 @@ function WorkflowPage() {
     refetchOnMount: "always",
   });
 
-  const { data: workflow, isLoading: workflowIsLoading } =
-    useQuery<WorkflowApiResponse>({
-      queryKey: ["workflow", workflowPermanentId],
-      queryFn: async () => {
-        const client = await getClient(credentialGetter);
-        return client
-          .get(`/workflows/${workflowPermanentId}`)
-          .then((response) => response.data);
-      },
-    });
+  const { data: workflow, isLoading: workflowIsLoading } = useWorkflowQuery({
+    workflowPermanentId,
+  });
 
   if (!workflowPermanentId) {
     return null; // this should never happen

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

@@ -13,6 +13,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { globalWorkflowIds } from "@/util/env";
 
 type Props = {
   title: string;
@@ -30,6 +31,9 @@ function WorkflowHeader({
   onTitleChange,
 }: Props) {
   const { workflowPermanentId } = useParams();
+  const isGlobalWorkflow = Boolean(
+    workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId),
+  );
   const navigate = useNavigate();
 
   return (
@@ -51,6 +55,7 @@ function WorkflowHeader({
                 size="icon"
                 variant="tertiary"
                 className="size-10"
+                disabled={isGlobalWorkflow}
                 onClick={() => {
                   onSave();
                 }}

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

@@ -2,6 +2,7 @@ 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";
 
 type Props = {
   workflowPermanentId?: string;
@@ -13,8 +14,14 @@ function useWorkflowQuery({ workflowPermanentId }: Props) {
     queryKey: ["workflow", workflowPermanentId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
+      const isGlobalWorkflow =
+        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+      const params = new URLSearchParams();
+      if (isGlobalWorkflow) {
+        params.set("template", "true");
+      }
       return client
-        .get(`/workflows/${workflowPermanentId}`)
+        .get(`/workflows/${workflowPermanentId}`, { params })
         .then((response) => response.data);
     },
   });

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

@@ -5,6 +5,7 @@ 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";
 
@@ -16,8 +17,16 @@ function useWorkflowRunQuery() {
     queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
+      const isGlobalWorkflow =
+        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+      const params = new URLSearchParams();
+      if (isGlobalWorkflow) {
+        params.set("template", "true");
+      }
       return client
-        .get(`/workflows/${workflowPermanentId}/runs/${workflowRunId}`)
+        .get(`/workflows/${workflowPermanentId}/runs/${workflowRunId}`, {
+          params,
+        })
         .then((response) => response.data);
     },
     refetchInterval: (query) => {

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

@@ -5,6 +5,7 @@ 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";
 
 function useWorkflowRunTimelineQuery() {
   const { workflowRunId, workflowPermanentId } = useParams();
@@ -15,8 +16,17 @@ function useWorkflowRunTimelineQuery() {
     queryKey: ["workflowRunTimeline", workflowPermanentId, workflowRunId],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
+      const isGlobalWorkflow =
+        workflowPermanentId && globalWorkflowIds.includes(workflowPermanentId);
+      const params = new URLSearchParams();
+      if (isGlobalWorkflow) {
+        params.set("template", "true");
+      }
       return client
-        .get(`/workflows/${workflowPermanentId}/runs/${workflowRunId}/timeline`)
+        .get(
+          `/workflows/${workflowPermanentId}/runs/${workflowRunId}/timeline`,
+          { params },
+        )
         .then((response) => response.data);
     },
     refetchInterval: