Add api path prefix into screenshots and title (#1557)

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) => {

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);
     },
   });

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) => {

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) => {

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,
+};