From d905a8d4b9ea3e9fdcddb694203d0c1036424919 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Wed, 15 Jan 2025 02:20:00 -0800
Subject: [PATCH] Add api path prefix into screenshots and title (#1557)

---
 .../src/routes/tasks/detail/ActionScreenshot.tsx       |  3 ++-
 .../src/routes/workflows/WorkflowTitle.tsx             |  3 ++-
 .../workflowRun/ObserverThoughtScreenshot.tsx          |  3 ++-
 .../workflowRun/WorkflowRunBlockScreenshot.tsx         |  5 ++++-
 skyvern-frontend/src/util/env.ts                       | 10 +++++++++-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx b/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
index f35c1b84..78452d22 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { getImageURL } from "./artifactUtils";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { statusIsNotFinalized } from "../types";
+import { apiPathPrefix } from "@/util/env";
 
 type Props = {
   stepId: string;
@@ -25,7 +26,7 @@ function ActionScreenshot({ stepId, index, taskStatus }: Props) {
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       return client
-        .get(`/step/${stepId}/artifacts`)
+        .get(`${apiPathPrefix}/step/${stepId}/artifacts`)
         .then((response) => response.data);
     },
     refetchInterval: (query) => {
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowTitle.tsx b/skyvern-frontend/src/routes/workflows/WorkflowTitle.tsx
index dfe4ea31..b2b870b9 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowTitle.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowTitle.tsx
@@ -3,6 +3,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { WorkflowApiResponse } from "./types/workflowTypes";
+import { apiPathPrefix } from "@/util/env";
 
 type Props = {
   workflowPermanentId: string;
@@ -20,7 +21,7 @@ function WorkflowTitle({ workflowPermanentId }: Props) {
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       return client
-        .get(`/workflows/${workflowPermanentId}`)
+        .get(`${apiPathPrefix}/workflows/${workflowPermanentId}`)
         .then((response) => response.data);
     },
   });
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx
index e90d4bd2..b8b23bf3 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx
@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { statusIsNotFinalized } from "@/routes/tasks/types";
 import { getImageURL } from "@/routes/tasks/detail/artifactUtils";
+import { apiPathPrefix } from "@/util/env";
 
 type Props = {
   observerThoughtId: string;
@@ -20,7 +21,7 @@ function ObserverThoughtScreenshot({ observerThoughtId, taskStatus }: Props) {
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       return client
-        .get(`/observer_thought/${observerThoughtId}/artifacts`)
+        .get(`${apiPathPrefix}/observer_thought/${observerThoughtId}/artifacts`)
         .then((response) => response.data);
     },
     refetchInterval: (query) => {
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx
index 4ac6bb6b..acb1d954 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx
@@ -5,6 +5,7 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { getImageURL } from "@/routes/tasks/detail/artifactUtils";
+import { apiPathPrefix } from "@/util/env";
 
 type Props = {
   workflowRunBlockId: string;
@@ -18,7 +19,9 @@ function WorkflowRunBlockScreenshot({ workflowRunBlockId }: Props) {
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       return client
-        .get(`/workflow_run_block/${workflowRunBlockId}/artifacts`)
+        .get(
+          `${apiPathPrefix}/workflow_run_block/${workflowRunBlockId}/artifacts`,
+        )
         .then((response) => response.data);
     },
     refetchInterval: (query) => {
diff --git a/skyvern-frontend/src/util/env.ts b/skyvern-frontend/src/util/env.ts
index d54adc00..2aec4617 100644
--- a/skyvern-frontend/src/util/env.ts
+++ b/skyvern-frontend/src/util/env.ts
@@ -19,4 +19,12 @@ if (!artifactApiBaseUrl) {
   console.warn("artifactApiBaseUrl environment variable was not set");
 }
 
-export { apiBaseUrl, environment, envCredential, artifactApiBaseUrl };
+const apiPathPrefix = import.meta.env.VITE_API_PATH_PREFIX ?? "";
+
+export {
+  apiBaseUrl,
+  environment,
+  envCredential,
+  artifactApiBaseUrl,
+  apiPathPrefix,
+};