From 0734f0f28b118e3a3a35b6f6b3992ac61ca049f8 Mon Sep 17 00:00:00 2001
From: Christopher Lo <46541035+topher-lo@users.noreply.github.com>
Date: Sat, 2 Mar 2024 21:29:03 +0000
Subject: [PATCH] feat(ui): Implement drag and drop logic

---
 frontend/src/components/action-node.tsx  |  97 +++++++++++++
 frontend/src/components/action-tiles.tsx |  71 ++++++----
 frontend/src/components/canvas.tsx       | 117 ++++++++++++++++
 frontend/src/components/workspace.tsx    | 168 ++++++++++++-----------
 4 files changed, 347 insertions(+), 106 deletions(-)
 create mode 100644 frontend/src/components/action-node.tsx
 create mode 100644 frontend/src/components/canvas.tsx

diff --git a/frontend/src/components/action-node.tsx b/frontend/src/components/action-node.tsx
new file mode 100644
index 000000000..a123ed5d9
--- /dev/null
+++ b/frontend/src/components/action-node.tsx
@@ -0,0 +1,97 @@
+import React from "react"
+import { Handle, NodeProps, Position } from "reactflow"
+
+import {
+  ChevronsDownIcon,
+  CircleIcon,
+  GanttChartIcon,
+  PlayIcon,
+  TestTubeIcon,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export interface ActionNodeData {
+  title: string
+  name: string
+  status: "online" | "error" | "offline"
+  numberOfEvents: number
+  // Generic metadata
+}
+
+const handleStyle = { width: 8, height: 8 }
+
+export default React.memo(function ActionNode({
+  data: { title, name, status, numberOfEvents },
+}: NodeProps<ActionNodeData>) {
+  return (
+    <Card>
+      <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+        <div className="space-y-1">
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>{name}</CardDescription>
+        </div>
+        <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary" className="px-2 shadow-none">
+                <ChevronsDownIcon className="h-4 w-4 text-secondary-foreground" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              alignOffset={-5}
+              className="w-[200px]"
+              forceMount
+            >
+              <DropdownMenuItem>
+                <PlayIcon className="mr-2 h-4 w-4" /> Run
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <TestTubeIcon className="mr-2 h-4 w-4" /> Test action
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <GanttChartIcon className="mr-2 h-4 w-4" /> View events
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex space-x-4 text-sm text-muted-foreground">
+          <div className="flex items-center">
+            <CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" /> {status}
+          </div>
+          <div className="flex items-center">
+            <GanttChartIcon className="mr-1 h-3 w-3" /> {numberOfEvents} events
+          </div>
+        </div>
+      </CardContent>
+
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="w-16 !bg-gray-500"
+        style={handleStyle}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="w-16 !bg-gray-500"
+        style={handleStyle}
+      />
+    </Card>
+  )
+})
diff --git a/frontend/src/components/action-tiles.tsx b/frontend/src/components/action-tiles.tsx
index 1937807f6..5ae10f3de 100644
--- a/frontend/src/components/action-tiles.tsx
+++ b/frontend/src/components/action-tiles.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import Link from "next/link"
+import { DragEvent } from "react"
 import { LucideIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -13,7 +13,7 @@ import {
 
 interface ActionTilesProps {
   isCollapsed: boolean
-  links: {
+  tiles: {
     title: string
     label?: string
     icon: LucideIcon
@@ -21,64 +21,87 @@ interface ActionTilesProps {
   }[]
 }
 
-export function ActionTiles({ links, isCollapsed }: ActionTilesProps) {
+export function ActionTiles({ tiles, isCollapsed }: ActionTilesProps) {
+  
+  const onDragStart = (
+    event: DragEvent<HTMLDivElement>,
+    tile: { title: string; label?: string; icon: LucideIcon; variant: "default" | "ghost" }
+  ) => {
+
+    const actionNodeData = {
+      title: tile.title,
+      name: tile.label || "",
+      status: "offline",
+      numberOfEvents: 0
+    };
+    event.dataTransfer.setData("application/reactflow", "action")
+    event.dataTransfer.setData("application/json", JSON.stringify(actionNodeData))
+    event.dataTransfer.effectAllowed = "move";
+  };
+
   return (
     <div
       data-collapsed={isCollapsed}
       className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2"
     >
       <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
-        {links.map((link, index) =>
+        {tiles.map((tile, index) =>
           isCollapsed ? (
             <Tooltip key={index} delayDuration={0}>
               <TooltipTrigger asChild>
-                <Link
-                  href="#"
+                <div
                   className={cn(
-                    buttonVariants({ variant: link.variant, size: "icon" }),
+                    buttonVariants({ variant: tile.variant, size: "icon" }),
                     "h-9 w-9",
-                    link.variant === "default" &&
+                    tile.variant === "default" &&
                       "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
                   )}
+                  draggable
+                  onMouseOver={(e) => e.currentTarget.style.cursor = "grab"}
+                  onMouseOut={(e) => e.currentTarget.style.cursor = ""}
+                  onDragStart={(event) => onDragStart(event, tile)}
                 >
-                  <link.icon className="h-4 w-4" />
-                  <span className="sr-only">{link.title}</span>
-                </Link>
+                  <tile.icon className="h-4 w-4" />
+                  <span className="sr-only">{tile.title}</span>
+                </div>
               </TooltipTrigger>
               <TooltipContent side="right" className="flex items-center gap-4">
-                {link.title}
-                {link.label && (
+                {tile.title}
+                {tile.label && (
                   <span className="ml-auto text-muted-foreground">
-                    {link.label}
+                    {tile.label}
                   </span>
                 )}
               </TooltipContent>
             </Tooltip>
           ) : (
-            <Link
+            <div
               key={index}
-              href="#"
               className={cn(
-                buttonVariants({ variant: link.variant, size: "sm" }),
-                link.variant === "default" &&
+                buttonVariants({ variant: tile.variant, size: "sm" }),
+                tile.variant === "default" &&
                   "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                 "justify-start"
               )}
+              draggable
+              onMouseOver={(e) => e.currentTarget.style.cursor = "grab"}
+              onMouseOut={(e) => e.currentTarget.style.cursor = ""}
+              onDragStart={(event) => onDragStart(event, tile)}
             >
-              <link.icon className="mr-2 h-4 w-4" />
-              {link.title}
-              {link.label && (
+              <tile.icon className="mr-2 h-4 w-4" />
+              {tile.title}
+              {tile.label && (
                 <span
                   className={cn(
                     "ml-auto",
-                    link.variant === "default" &&
+                    tile.variant === "default" &&
                       "text-background dark:text-white"
                   )}
                 >
-                  {link.label}
+                  {tile.label}
                 </span>
               )}
-            </Link>
+            </div>
           )
         )}
       </nav>
diff --git a/frontend/src/components/canvas.tsx b/frontend/src/components/canvas.tsx
new file mode 100644
index 000000000..12a6483ff
--- /dev/null
+++ b/frontend/src/components/canvas.tsx
@@ -0,0 +1,117 @@
+import React, { useCallback, useRef, useState } from "react"
+import ReactFlow, {
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  MarkerType,
+  Node,
+  OnConnect,
+  ReactFlowInstance,
+  ReactFlowProvider,
+  addEdge,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
+} from "reactflow"
+
+import "reactflow/dist/style.css"
+import { useToast } from "@/components/ui/use-toast"
+import ActionNode, { ActionNodeData } from "@/components/action-node"
+
+let id = 0
+const getActionNodeId = (): string => `node_${id++}`
+
+const nodeTypes = {
+  action: ActionNode,
+}
+
+const defaultEdgeOptions = {
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+  },
+  style: { strokeWidth: 3 },
+}
+
+const Workflow: React.FC = () => {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null)
+  const [nodes, setNodes, onNodesChange] = useNodesState([])
+  const [edges, setEdges, onEdgesChange] = useEdgesState([])
+  const [reactFlowInstance, setReactFlowInstance] =
+    useState<ReactFlowInstance | null>(null)
+  const { toast } = useToast()
+
+  const onConnect = useCallback(
+    (params: Edge | Connection) => {
+      setEdges((eds) => addEdge(params, eds))
+    },
+    [toast, edges, setEdges]
+  )
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = "move"
+  }, [])
+
+  const onDrop = (event: React.DragEvent) => {
+    event.preventDefault()
+
+    // Limit total number of nodes
+    if (nodes.length >= 50) {
+      toast({
+        title: "Invalid action",
+        description: "Maximum 50 nodes allowed.",
+      })
+      return
+    }
+
+    const reactFlowNodeType = event.dataTransfer.getData("application/reactflow");
+    const actionNodeData = JSON.parse(
+      event.dataTransfer.getData("application/json")
+    ) as ActionNodeData
+
+    if (!actionNodeData || !reactFlowNodeType || !reactFlowInstance) return
+
+    const reactFlowNodePosition = reactFlowInstance.screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY,
+    })
+
+    const newNode = {
+      id: getActionNodeId(),
+      type: reactFlowNodeType,
+      position: reactFlowNodePosition,
+      data: actionNodeData,
+    } as Node<ActionNodeData>
+
+    setNodes((nds) => nds.concat(newNode))
+  }
+
+  return (
+    <div ref={reactFlowWrapper} style={{ height: "100%" }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        defaultEdgeOptions={defaultEdgeOptions}
+        onConnect={onConnect as OnConnect}
+        onInit={setReactFlowInstance}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        nodeTypes={nodeTypes}
+        fitViewOptions={{ maxZoom: 1 }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  )
+}
+
+const WorkflowBuilder = ReactFlowProvider
+const useWorkflowBuilder = useReactFlow
+
+export { WorkflowBuilder, useWorkflowBuilder }
+export default Workflow
diff --git a/frontend/src/components/workspace.tsx b/frontend/src/components/workspace.tsx
index 804bd8c30..d55defdf1 100644
--- a/frontend/src/components/workspace.tsx
+++ b/frontend/src/components/workspace.tsx
@@ -13,6 +13,7 @@ import {
 } from "lucide-react"
 
 import { ActionTiles } from "@/components/action-tiles"
+import Canvas, { WorkflowBuilder } from "@/components/canvas"
 import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 import { TooltipProvider } from "@/components/ui/tooltip"
@@ -46,88 +47,91 @@ export function Workspace({
   };
 
   return (
-    <TooltipProvider delayDuration={0}>
-      <ResizablePanelGroup
-        direction="horizontal"
-        onLayout={(sizes: number[]) => {
-          document.cookie = `react-resizable-panels:layout=${JSON.stringify(
-            sizes
-          )}`
-        }}
-        className="h-full max-h-[800px] items-stretch"
-      >
-        <ResizablePanel
-          defaultSize={defaultLayout[0]}
-          collapsedSize={navCollapsedSize}
-          collapsible={true}
-          minSize={15}
-          maxSize={20}
-          onCollapse={handleCollapse}
-          onExpand={handleExpand}
-          className={cn(isCollapsed && "min-w-[50px] transition-all duration-300 ease-in-out")}
+    <WorkflowBuilder>
+      <TooltipProvider delayDuration={0}>
+        <ResizablePanelGroup
+          direction="horizontal"
+          onLayout={(sizes: number[]) => {
+            document.cookie = `react-resizable-panels:layout=${JSON.stringify(
+              sizes
+            )}`
+          }}
+          className="h-full max-h-[800px] items-stretch"
         >
-          <Separator />
-          <ActionTiles
-            isCollapsed={isCollapsed}
-            links={[
-              {
-                title: "Webhook",
-                label: "",
-                icon: Webhook,
-                variant: "ghost",
-              },
-              {
-                title: "HTTP Request",
-                label: "",
-                icon: Globe,
-                variant: "ghost",
-              },
-              {
-                title: "Data Transform",
-                label: "",
-                icon: Blend,
-                variant: "ghost",
-              },
-              {
-                title: "If Condition",
-                label: "",
-                icon: Split,
-                variant: "ghost",
-              },
-              {
-                title: "Open Case",
-                label: "",
-                icon: ShieldAlert,
-                variant: "ghost",
-              },
-              {
-                title: "Receive Email",
-                label: "",
-                icon: Mail,
-                variant: "ghost",
-              },
-              {
-                title: "Send Email",
-                label: "",
-                icon: Send,
-                variant: "ghost",
-              },
-              {
-                title: "AI Copilot",
-                label: "",
-                icon: Sparkles,
-                variant: "ghost",
-              },
-            ]}
-          />
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={defaultLayout[1]} minSize={30}>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={defaultLayout[2]}>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </TooltipProvider>
+          <ResizablePanel
+            defaultSize={defaultLayout[0]}
+            collapsedSize={navCollapsedSize}
+            collapsible={true}
+            minSize={15}
+            maxSize={20}
+            onCollapse={handleCollapse}
+            onExpand={handleExpand}
+            className={cn(isCollapsed && "min-w-[50px] transition-all duration-300 ease-in-out")}
+          >
+            <Separator />
+            <ActionTiles
+              isCollapsed={isCollapsed}
+              tiles={[
+                {
+                  title: "Webhook",
+                  label: "",
+                  icon: Webhook,
+                  variant: "ghost",
+                },
+                {
+                  title: "HTTP Request",
+                  label: "",
+                  icon: Globe,
+                  variant: "ghost",
+                },
+                {
+                  title: "Data Transform",
+                  label: "",
+                  icon: Blend,
+                  variant: "ghost",
+                },
+                {
+                  title: "If Condition",
+                  label: "",
+                  icon: Split,
+                  variant: "ghost",
+                },
+                {
+                  title: "Open Case",
+                  label: "",
+                  icon: ShieldAlert,
+                  variant: "ghost",
+                },
+                {
+                  title: "Receive Email",
+                  label: "",
+                  icon: Mail,
+                  variant: "ghost",
+                },
+                {
+                  title: "Send Email",
+                  label: "",
+                  icon: Send,
+                  variant: "ghost",
+                },
+                {
+                  title: "AI Copilot",
+                  label: "",
+                  icon: Sparkles,
+                  variant: "ghost",
+                },
+              ]}
+            />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={defaultLayout[1]} minSize={30}>
+            <Canvas />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={defaultLayout[2]}>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </TooltipProvider>
+    </WorkflowBuilder>
   )
 }