From 04a1b19f6446c811785804a055bbf01e93b731d7 Mon Sep 17 00:00:00 2001
From: ykeremy <kerem@skyvern.com>
Date: Mon, 26 Aug 2024 19:49:33 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'skyvern-fronte?=
 =?UTF-8?q?nd/src/'=20with=20remote=20'skyvern-frontend/src/'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ELLIPSIS_HIDDEN -->

| :rocket: | This description was created by [Ellipsis](https://www.ellipsis.dev) for commit 868509b6e6be2d47e58422f6bc214715b1a12c9f  |
|--------|--------|

### Summary:
This PR improves error handling in `TaskRecording` by changing `useQuery` to return `string | null` and updating `getRecordingURL` to return `null` when no recording URL is available.

**Key points**:
- Update `useQuery` in `skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx` to return `string | null` instead of `string | undefined`.
- Modify `getRecordingURL` in `skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts` to return `null` when `task.recording_url` is absent.
- Adjust error handling in `TaskRecording` to display "No recording available for this task" when `recordingURL` is `null`.

----
Generated with :heart: by [ellipsis.dev](https://www.ellipsis.dev)

<!-- ELLIPSIS_HIDDEN -->
---
 .../src/routes/tasks/detail/TaskRecording.tsx     | 15 +++++++--------
 .../src/routes/tasks/detail/artifactUtils.ts      |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
index 737111bef..4ebf0076a 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
@@ -4,6 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { getRecordingURL } from "./artifactUtils";
 import { useParams } from "react-router-dom";
 import { Skeleton } from "@/components/ui/skeleton";
+import { TaskApiResponse } from "@/api/types";
 
 function TaskRecording() {
   const { taskId } = useParams();
@@ -13,11 +14,11 @@ function TaskRecording() {
     data: recordingURL,
     isLoading: taskIsLoading,
     isError: taskIsError,
-  } = useQuery<string | undefined>({
+  } = useQuery<string | null>({
     queryKey: ["task", taskId, "recordingURL"],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      const task = await client
+      const task: TaskApiResponse = await client
         .get(`/tasks/${taskId}`)
         .then((response) => response.data);
       return getRecordingURL(task);
@@ -39,14 +40,12 @@ function TaskRecording() {
     return <div>Error loading recording</div>;
   }
 
-  return (
+  return recordingURL ? (
     <div className="mx-auto flex">
-      {recordingURL ? (
-        <video width={800} height={450} src={recordingURL} controls />
-      ) : (
-        <div>No recording available</div>
-      )}
+      <video width={800} height={450} src={recordingURL} controls />
     </div>
+  ) : (
+    <div>No recording available for this task</div>
   );
 }
 
diff --git a/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts b/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts
index 4e8e9b9db..f3760f293 100644
--- a/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts
+++ b/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts
@@ -22,7 +22,7 @@ export function getScreenshotURL(task: TaskApiResponse) {
 
 export function getRecordingURL(task: TaskApiResponse) {
   if (!task.recording_url) {
-    return;
+    return null;
   }
   if (task.recording_url?.startsWith("file://")) {
     return `${artifactApiBaseUrl}/artifact/recording?path=${task.recording_url.slice(7)}`;