feat(ui): Add toggle button for action panel and resize tabs (#834)

TracecatHQ · Feb 6, 2025 · e771374 · e771374
1 parent 9e6ea00
commit e771374
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 12 deletions.
diff --git a/frontend/src/components/workbench/events/events-sidebar.tsx b/frontend/src/components/workbench/events/events-sidebar.tsx
@@ -137,10 +137,12 @@ function WorkbenchSidebarEventsList({
                 <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"
+                  className="flex h-full min-w-20 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 sm:min-w-16 md:min-w-20"
                 >
-                  <tab.icon className="mr-2 size-4" />
-                  <span>{tab.label}</span>
+                  {/* TODO(chris): Please adjust this */}
+                  <tab.icon className="mr-2 size-4 sm:mr-1" />
+                  <span className="hidden sm:inline">{tab.label}</span>
+                  <span className="sm:hidden">{tab.label.slice(0, 4)}</span>
                 </TabsTrigger>
               ))}
             </TabsList>

diff --git a/frontend/src/components/workbench/panel/action-panel.tsx b/frontend/src/components/workbench/panel/action-panel.tsx
@@ -32,6 +32,7 @@ import {
   ToyBrickIcon,
 } from "lucide-react"
 import { FormProvider, useForm } from "react-hook-form"
+import { ImperativePanelHandle } from "react-resizable-panels"
 import YAML from "yaml"
 import { z } from "zod"
 
@@ -157,6 +158,8 @@ const parseYaml = (str: string | undefined) =>
 const stringifyYaml = (obj: unknown | undefined) =>
   obj ? YAML.stringify(obj) : ""
 
+export interface ActionPanelRef extends ImperativePanelHandle {}
+
 export function ActionPanel({
   actionId,
   workflowId,

diff --git a/frontend/src/components/workbench/panel/workbench-panel.tsx b/frontend/src/components/workbench/panel/workbench-panel.tsx
@@ -6,11 +6,14 @@ import { useWorkflow } from "@/providers/workflow"
 import { FormLoading } from "@/components/loading/form"
 import { AlertNotification } from "@/components/notifications"
 import { NodeType } from "@/components/workbench/canvas/canvas"
-import { ActionPanel } from "@/components/workbench/panel/action-panel"
+import {
+  ActionPanel,
+  ActionPanelRef,
+} from "@/components/workbench/panel/action-panel"
 import { TriggerPanel } from "@/components/workbench/panel/trigger-panel"
 import { WorkflowPanel } from "@/components/workbench/panel/workflow-panel"
 
-export function WorkbenchPanel() {
+export const WorkbenchPanel = React.forwardRef<ActionPanelRef>((_, ref) => {
   const { selectedNodeId, getNode } = useWorkflowBuilder()
   const { workflow, isLoading, error } = useWorkflow()
   const selectedNode = getNode(selectedNodeId ?? "")
@@ -45,7 +48,10 @@ export function WorkbenchPanel() {
       )}
     </div>
   )
-}
+})
+
+WorkbenchPanel.displayName = "WorkbenchPanel"
+
 function NodePanel({
   node,
   workflow,

diff --git a/frontend/src/components/workbench/workbench.tsx b/frontend/src/components/workbench/workbench.tsx
@@ -8,7 +8,6 @@ import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
   CustomResizableHandle,
-  ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
@@ -28,8 +27,15 @@ interface WorkbenchProps {
 }
 
 export function Workbench({ defaultLayout = [0, 68, 32] }: WorkbenchProps) {
-  const { canvasRef, sidebarRef, isSidebarCollapsed, toggleSidebar } =
-    useWorkflowBuilder()
+  const {
+    canvasRef,
+    sidebarRef,
+    isSidebarCollapsed,
+    toggleSidebar,
+    actionPanelRef,
+    isActionPanelCollapsed,
+    toggleActionPanel,
+  } = useWorkflowBuilder()
   return (
     <TooltipProvider delayDuration={0}>
       <ResizablePanelGroup
@@ -77,9 +83,38 @@ export function Workbench({ defaultLayout = [0, 68, 32] }: WorkbenchProps) {
         <ResizablePanel defaultSize={defaultLayout[1]}>
           <WorkflowCanvas ref={canvasRef} />
         </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={defaultLayout[2]} minSize={32}>
-          <WorkbenchPanel />
+        <TooltipProvider>
+          <Tooltip>
+            <CustomResizableHandle>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className={cn(
+                    "absolute top-0 m-0 -translate-x-6 rounded-full !bg-transparent p-4 active:cursor-grabbing"
+                  )}
+                  onClick={toggleActionPanel}
+                >
+                  <div className="group rounded-sm p-1 hover:bg-border">
+                    <SidebarIcon className="group size-4 -scale-x-100 text-muted-foreground group-hover:text-foreground" />
+                  </div>
+                </Button>
+              </TooltipTrigger>
+              {isActionPanelCollapsed && (
+                <TooltipContent side="right">View Side Panel</TooltipContent>
+              )}
+            </CustomResizableHandle>
+          </Tooltip>
+        </TooltipProvider>
+        <ResizablePanel
+          ref={actionPanelRef}
+          defaultSize={defaultLayout[2]}
+          collapsedSize={0}
+          collapsible={true}
+          minSize={32}
+          maxSize={60}
+          className="h-full"
+        >
+          <WorkbenchPanel ref={actionPanelRef} />
         </ResizablePanel>
       </ResizablePanelGroup>
     </TooltipProvider>

diff --git a/frontend/src/providers/builder.tsx b/frontend/src/providers/builder.tsx
@@ -25,6 +25,7 @@ import {
   WorkflowCanvasRef,
 } from "@/components/workbench/canvas/canvas"
 import { EventsSidebarRef } from "@/components/workbench/events/events-sidebar"
+import { ActionPanelRef } from "@/components/workbench/panel/action-panel"
 
 interface ReactFlowContextType {
   reactFlow: ReactFlowInstance
@@ -37,8 +38,11 @@ interface ReactFlowContextType {
   setSelectedNodeId: React.Dispatch<SetStateAction<string | null>>
   canvasRef: React.RefObject<WorkflowCanvasRef>
   sidebarRef: React.RefObject<EventsSidebarRef>
+  actionPanelRef: React.RefObject<ActionPanelRef>
   isSidebarCollapsed: boolean
+  isActionPanelCollapsed: boolean
   toggleSidebar: () => void
+  toggleActionPanel: () => void
   expandSidebarAndFocusEvents: () => void
 }
 
@@ -58,8 +62,11 @@ export const WorkflowBuilderProvider: React.FC<
 
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
   const [isSidebarCollapsed, setIsSidebarCollapsed] = React.useState(false)
+  const [isActionPanelCollapsed, setIsActionPanelCollapsed] =
+    React.useState(false)
   const canvasRef = useRef<WorkflowCanvasRef>(null)
   const sidebarRef = useRef<EventsSidebarRef>(null)
+  const actionPanelRef = useRef<ActionPanelRef>(null)
 
   useEffect(() => {
     setSelectedNodeId(null)
@@ -103,6 +110,20 @@ export const WorkflowBuilderProvider: React.FC<
     })
   }, [sidebarRef])
 
+  const toggleActionPanel = React.useCallback(() => {
+    setIsActionPanelCollapsed((prev: boolean) => {
+      const newState = !prev
+      if (actionPanelRef.current) {
+        if (newState) {
+          actionPanelRef.current.collapse()
+        } else {
+          actionPanelRef.current.expand()
+        }
+      }
+      return newState
+    })
+  }, [sidebarRef])
+
   const expandSidebarAndFocusEvents = React.useCallback(() => {
     setIsSidebarCollapsed(() => {
       const newState = false
@@ -129,6 +150,9 @@ export const WorkflowBuilderProvider: React.FC<
       isSidebarCollapsed,
       toggleSidebar,
       expandSidebarAndFocusEvents,
+      actionPanelRef,
+      isActionPanelCollapsed,
+      toggleActionPanel,
     }),
     [
       workflowId,
@@ -143,6 +167,9 @@ export const WorkflowBuilderProvider: React.FC<
       isSidebarCollapsed,
       toggleSidebar,
       expandSidebarAndFocusEvents,
+      actionPanelRef,
+      isActionPanelCollapsed,
+      toggleActionPanel,
     ]
   )