Don't show extracted information if null (#456)

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -41,19 +41,33 @@ function TaskDetails() {
     return <div>Error: {taskError?.message}</div>;
   }
 
-  const informationContentLabel =
+  const showExtractedInformation =
-    task?.status === Status.Completed
+    task?.status === Status.Completed && task.extracted_information !== null;
-      ? "Extracted Information"
+  const extractedInformation = showExtractedInformation ? (
-      : task?.status === Status.Failed || task?.status === Status.Terminated
+    <div className="flex items-center">
-        ? "Failure Reason"
+      <Label className="w-32 shrink-0 text-lg">Extracted Information</Label>
-        : "";
+      <Textarea
+        rows={5}
+        value={JSON.stringify(task.extracted_information, null, 2)}
+        readOnly
+      />
+    </div>
+  ) : null;
 
-  const informationContent =
+  const showFailureReason =
-    task?.status === Status.Completed
+    task?.status === Status.Failed ||
-      ? JSON.stringify(task.extracted_information, null, 2)
+    task?.status === Status.Terminated ||
-      : task?.status === Status.Failed || task?.status === Status.Terminated
+    task?.status === Status.TimedOut;
-        ? JSON.stringify(task?.failure_reason)
+  const failureReason = showFailureReason ? (
-        : "";
+    <div className="flex items-center">
+      <Label className="w-32 shrink-0 text-lg">Failure Reason</Label>
+      <Textarea
+        rows={5}
+        value={JSON.stringify(task.failure_reason, null, 2)}
+        readOnly
+      />
+    </div>
+  ) : null;
 
   return (
     <div className="flex flex-col gap-8">
@@ -65,21 +79,17 @@ function TaskDetails() {
           <StatusBadge status={task?.status} />
         ) : null}
       </div>
-      <div>
+      {taskIsFetching ? (
-        {taskIsFetching ? (
+        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-2">
+          <Skeleton className="w-32 h-32" />
-            <Skeleton className="w-32 h-32" />
+          <Skeleton className="w-full h-32" />
-            <Skeleton className="w-full h-32" />
+        </div>
-          </div>
+      ) : (
-        ) : (
+        <>
-          <div className="flex items-center">
+          {extractedInformation}
-            <Label className="w-32 shrink-0 text-lg">
+          {failureReason}
-              {informationContentLabel}
+        </>
-            </Label>
+      )}
-            <Textarea rows={5} value={informationContent} readOnly />
-          </div>
-        )}
-      </div>
       <div className="flex justify-center items-center">
         <div className="inline-flex border rounded bg-muted p-1">
           <NavLink