Add job agent (#1672)

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

skyvern-frontend/src/components/FileUpload.tsx

@@ -1,7 +1,7 @@
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { cn } from "@/util/utils";
-import { ReloadIcon } from "@radix-ui/react-icons";
+import { Cross2Icon, FileIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation } from "@tanstack/react-query";
 import { useId, useState } from "react";
 import { Button } from "./ui/button";
@@ -113,11 +113,16 @@ function FileUpload({ value, onChange }: Props) {
       </TabsList>
       <TabsContent value="upload">
         {isManualUpload && ( // redundant check for ts compiler
-          <div className="flex h-full items-center gap-4">
+          <div className="flex h-full items-center gap-4 p-4">
             <a href={value.presignedUrl} className="underline">
-              <span>{file.name}</span>
+              <div className="flex gap-2">
+                <FileIcon className="size-6" />
+                <span>{file.name}</span>
+              </div>
             </a>
-            <Button onClick={() => reset()}>Change</Button>
+            <Button onClick={() => reset()} size="icon" variant="secondary">
+              <Cross2Icon />
+            </Button>
           </div>
         )}
         {value === null && (

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 } =
+  const { data: workflow, isLoading: workflowIsLoading } = useWorkflowQuery({
-    useQuery<WorkflowApiResponse>({
+    workflowPermanentId,
-      queryKey: ["workflow", workflowPermanentId],
+  });
-      queryFn: async () => {
-        const client = await getClient(credentialGetter);
-        return client
-          .get(`/workflows/${workflowPermanentId}`)
-          .then((response) => response.data);
-      },
-    });
 
   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:

skyvern-frontend/src/util/env.ts

@@ -21,10 +21,29 @@ 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,
 };