From 8c3a27c7f5b9265fec569815ec12cd70daac965f Mon Sep 17 00:00:00 2001
From: Daryl Lim <5508348+daryllimyt@users.noreply.github.com>
Date: Sat, 25 Jan 2025 18:29:50 +0000
Subject: [PATCH] fix(ui): Fix overflow and scroll behavior in events sidebar
 (#798)

---
 .../events/events-selected-action.tsx         | 101 +++++++--------
 .../workbench/events/events-sidebar.tsx       | 115 +++++++++++-------
 .../src/components/workbench/workbench.tsx    |   6 +-
 3 files changed, 113 insertions(+), 109 deletions(-)

diff --git a/frontend/src/components/workbench/events/events-selected-action.tsx b/frontend/src/components/workbench/events/events-selected-action.tsx
index 4617b349d..9c1b0dbe5 100644
--- a/frontend/src/components/workbench/events/events-selected-action.tsx
+++ b/frontend/src/components/workbench/events/events-selected-action.tsx
@@ -55,14 +55,16 @@ export function ActionEvent({
     )
   }
   return (
-    <ActionEventDetails
-      actionId={node.id}
-      workflowId={workflowId}
-      workspaceId={workspaceId}
-      status={execution.status}
-      events={execution.events}
-      type={type}
-    />
+    <div className="p-4">
+      <ActionEventDetails
+        actionId={node.id}
+        workflowId={workflowId}
+        workspaceId={workspaceId}
+        status={execution.status}
+        events={execution.events}
+        type={type}
+      />
+    </div>
   )
 }
 export function ActionEventDetails({
@@ -125,18 +127,12 @@ export function ActionEventDetails({
   }
   const actionEvent = actionEventsForRef[0]
   return (
-    <div className="space-y-4">
-      <div className="space-y-2 p-4">
-        <JsonViewWithControls
-          src={
-            type === "input"
-              ? actionEvent.action_input
-              : actionEvent.action_result
-          }
-          defaultExpanded={true}
-        />
-      </div>
-    </div>
+    <JsonViewWithControls
+      src={
+        type === "input" ? actionEvent.action_input : actionEvent.action_result
+      }
+      defaultExpanded={true}
+    />
   )
 }
 
@@ -194,10 +190,12 @@ export function JsonViewWithControls({
       ? flattenObject(src as Record<string, unknown>)
       : src
 
-  console.log(flattenedSrc)
-  console.log(src)
+  const tabItems = [
+    { value: "flat", label: "Flat", src: flattenedSrc },
+    { value: "nested", label: "Nested", src: src },
+  ]
   return (
-    <div className="space-y-2">
+    <div className="w-full space-y-2 overflow-x-auto">
       <div className="flex w-full items-center gap-4">
         <span className="text-xs font-semibold text-foreground/50">
           {title}
@@ -215,44 +213,29 @@ export function JsonViewWithControls({
       </div>
       <Tabs defaultValue="flat">
         <TabsList className="h-7 text-xs">
-          <TabsTrigger value="flat" className="text-xs">
-            Flat
-          </TabsTrigger>
-          <TabsTrigger value="nested" className="text-xs">
-            Nested
-          </TabsTrigger>
+          {tabItems.map(({ value, label }) => (
+            <TabsTrigger key={value} value={value} className="text-xs">
+              {label}
+            </TabsTrigger>
+          ))}
         </TabsList>
 
-        <TabsContent
-          value="flat"
-          className="rounded-md border bg-muted-foreground/5 p-4"
-        >
-          <JsonView
-            collapsed={!isExpanded}
-            displaySize
-            enableClipboard
-            src={flattenedSrc}
-            className="text-sm"
-            theme="atom"
-            customizeCopy={(node) => {
-              console.log("COPY", node)
-              return node
-            }}
-          />
-        </TabsContent>
-        <TabsContent
-          value="nested"
-          className="rounded-md border bg-muted-foreground/5 p-4"
-        >
-          <JsonView
-            collapsed={!isExpanded}
-            displaySize
-            enableClipboard
-            src={src}
-            className="text-sm"
-            theme="atom"
-          />
-        </TabsContent>
+        {tabItems.map(({ value, src: source }) => (
+          <TabsContent
+            key={value}
+            value={value}
+            className="rounded-md border bg-muted-foreground/5 p-4"
+          >
+            <JsonView
+              collapsed={!isExpanded}
+              displaySize
+              enableClipboard
+              src={source}
+              className="w-full overflow-x-scroll text-wrap text-sm"
+              theme="atom"
+            />
+          </TabsContent>
+        ))}
       </Tabs>
     </div>
   )
diff --git a/frontend/src/components/workbench/events/events-sidebar.tsx b/frontend/src/components/workbench/events/events-sidebar.tsx
index e4b6886fe..4102609ed 100644
--- a/frontend/src/components/workbench/events/events-sidebar.tsx
+++ b/frontend/src/components/workbench/events/events-sidebar.tsx
@@ -11,6 +11,7 @@ import {
   useCompactWorkflowExecution,
   useManualWorkflowExecution,
 } from "@/lib/hooks"
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { CenteredSpinner } from "@/components/loading/spinner"
@@ -123,54 +124,76 @@ function WorkbenchSidebarEventsList({
       />
     )
 
+  const tabItems = [
+    {
+      value: "workflow-events",
+      label: "Events",
+      icon: CalendarSearchIcon,
+      content: (
+        <>
+          <WorkflowEventsHeader execution={execution} />
+          <WorkflowEvents events={execution.events} />
+        </>
+      ),
+    },
+    {
+      value: "action-input",
+      label: "Input",
+      icon: FileInputIcon,
+      content: <ActionEvent execution={execution} type="input" />,
+    },
+    {
+      value: "action-result",
+      label: "Result",
+      icon: ShapesIcon,
+      content: <ActionEvent execution={execution} type="result" />,
+    },
+  ]
   return (
-    <Tabs
-      value={activeTab}
-      onValueChange={(value: string) => {
-        if (sidebarRef.current?.setActiveTab) {
-          sidebarRef.current.setActiveTab(value as EventsSidebarTabs)
-        }
-      }}
-      className="flex size-full flex-col"
-    >
-      <div className="w-full grow">
-        <div className="mt-2 flex items-center justify-start">
-          <TabsList className="h-8 justify-start rounded-none bg-transparent p-0">
-            <TabsTrigger
-              className="flex h-full min-w-28 items-center justify-center rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-              value="workflow-events"
-            >
-              <CalendarSearchIcon className="mr-2 size-4" />
-              <span>Events</span>
-            </TabsTrigger>
-            <TabsTrigger
-              className="h-full min-w-28 rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-              value="action-input"
-            >
-              <FileInputIcon className="mr-2 size-4" />
-              <span>Input</span>
-            </TabsTrigger>
-            <TabsTrigger
-              className="h-full min-w-28 rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-              value="action-result"
-            >
-              <ShapesIcon className="mr-2 size-4" />
-              <span>Result</span>
-            </TabsTrigger>
-          </TabsList>
+    <div className="h-full">
+      <Tabs
+        value={activeTab}
+        onValueChange={(value: string) => {
+          if (sidebarRef.current?.setActiveTab) {
+            sidebarRef.current.setActiveTab(value as EventsSidebarTabs)
+          }
+        }}
+        className="flex size-full flex-col"
+      >
+        <div className="sticky top-0 z-10 mt-2 bg-background">
+          <ScrollArea className="w-full whitespace-nowrap rounded-md">
+            <TabsList className="inline-flex h-8 w-full items-center justify-start bg-transparent p-0">
+              {tabItems.map((tab) => (
+                <TabsTrigger
+                  key={tab.value}
+                  value={tab.value}
+                  className="flex h-full min-w-28 items-center justify-center rounded-none border-b-2 border-transparent py-0 text-xs data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+                >
+                  <tab.icon className="mr-2 size-4" />
+                  <span>{tab.label}</span>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            <ScrollBar orientation="horizontal" className="invisible" />
+          </ScrollArea>
         </div>
         <Separator />
-        <TabsContent value="workflow-events">
-          <WorkflowEventsHeader execution={execution} />
-          <WorkflowEvents events={execution.events} />
-        </TabsContent>
-        <TabsContent value="action-input">
-          <ActionEvent execution={execution} type="input" />
-        </TabsContent>
-        <TabsContent value="action-result">
-          <ActionEvent execution={execution} type="result" />
-        </TabsContent>
-      </div>
-    </Tabs>
+        <ScrollArea className="!m-0 flex-1 rounded-md p-0">
+          <div className="overflow-y-auto">
+            {tabItems.map((tab) => (
+              <TabsContent
+                key={tab.value}
+                value={tab.value}
+                className="m-0 size-full min-w-[200px] p-0"
+              >
+                {tab.content}
+              </TabsContent>
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+          <ScrollBar orientation="vertical" />
+        </ScrollArea>
+      </Tabs>
+    </div>
   )
 }
diff --git a/frontend/src/components/workbench/workbench.tsx b/frontend/src/components/workbench/workbench.tsx
index 3a151d26b..6d196c692 100644
--- a/frontend/src/components/workbench/workbench.tsx
+++ b/frontend/src/components/workbench/workbench.tsx
@@ -48,11 +48,9 @@ export function Workbench({ defaultLayout = [0, 68, 32] }: WorkbenchProps) {
           collapsible={true}
           minSize={20}
           maxSize={40}
-          className="flex h-full flex-col"
+          className="h-full"
         >
-          <div className="relative flex-1">
-            <WorkbenchSidebarEvents />
-          </div>
+          <WorkbenchSidebarEvents />
         </ResizablePanel>
         <TooltipProvider>
           <Tooltip>