From 926a1a67678907451e89ac287612e10e385999ac Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 21 Mar 2025 12:02:20 -0700
Subject: [PATCH] Workflow output hide whatever is not present (#1991)

---
 .../src/routes/workflows/WorkflowRun.tsx      | 67 +++++++++++--------
 1 file changed, 39 insertions(+), 28 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index e9f6a686..12491c05 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -38,6 +38,7 @@ import { findActiveItem } from "./workflowRun/workflowTimelineUtils";
 import { getAggregatedExtractedInformation } from "./workflowRun/workflowRunUtils";
 import { Label } from "@/components/ui/label";
 import { CodeEditor } from "./components/CodeEditor";
+import { cn } from "@/util/utils";
 
 function WorkflowRun() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -153,6 +154,8 @@ function WorkflowRun() {
     ? (workflowRun.downloaded_file_urls as string[])
     : [];
 
+  const showBoth = hasSomeExtractedInformation && hasFileUrls;
+
   const showOutputSection =
     workflowRunIsFinalized &&
     (hasSomeExtractedInformation || hasFileUrls) &&
@@ -260,35 +263,43 @@ function WorkflowRun() {
         </div>
       </header>
       {showOutputSection && (
-        <div className="grid grid-cols-2 gap-4 rounded-lg bg-slate-elevation1 p-4">
-          <div className="space-y-4">
-            <Label>Extracted Information</Label>
-            <CodeEditor
-              language="json"
-              value={JSON.stringify(aggregatedExtractedInformation, null, 2)}
-              readOnly
-              maxHeight="250px"
-            />
-          </div>
-          <div className="space-y-4">
-            <Label>Downloaded Files</Label>
-            <div className="space-y-2">
-              {fileUrls.length > 0 ? (
-                fileUrls.map((url, index) => {
-                  return (
-                    <div key={url} title={url} className="flex gap-2">
-                      <FileIcon className="size-6" />
-                      <a href={url} className="underline underline-offset-4">
-                        <span>{`File ${index + 1}`}</span>
-                      </a>
-                    </div>
-                  );
-                })
-              ) : (
-                <div className="text-sm">No files downloaded</div>
-              )}
+        <div
+          className={cn("grid gap-4 rounded-lg bg-slate-elevation1 p-4", {
+            "grid-cols-2": showBoth,
+          })}
+        >
+          {hasSomeExtractedInformation && (
+            <div className="space-y-4">
+              <Label>Extracted Information</Label>
+              <CodeEditor
+                language="json"
+                value={JSON.stringify(aggregatedExtractedInformation, null, 2)}
+                readOnly
+                maxHeight="250px"
+              />
             </div>
-          </div>
+          )}
+          {hasFileUrls && (
+            <div className="space-y-4">
+              <Label>Downloaded Files</Label>
+              <div className="space-y-2">
+                {fileUrls.length > 0 ? (
+                  fileUrls.map((url, index) => {
+                    return (
+                      <div key={url} title={url} className="flex gap-2">
+                        <FileIcon className="size-6" />
+                        <a href={url} className="underline underline-offset-4">
+                          <span>{`File ${index + 1}`}</span>
+                        </a>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div className="text-sm">No files downloaded</div>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       )}
       {workflowFailureReason}