From 3a26aac9498a8adc49c1712a8fcd3cd3babc3f68 Mon Sep 17 00:00:00 2001
From: ramnique <30795890+ramnique@users.noreply.github.com>
Date: Wed, 19 Mar 2025 00:17:06 +0530
Subject: [PATCH] relocate mcp tool import btn

---
 .../app/lib/components/structured-list.tsx    | 23 ++++------
 .../[projectId]/workflow/entity_list.tsx      | 44 ++++++++++++++++---
 .../[projectId]/workflow/workflow_editor.tsx  | 14 +++---
 3 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/apps/rowboat/app/lib/components/structured-list.tsx b/apps/rowboat/app/lib/components/structured-list.tsx
index f957c98f..5bb9e0f6 100644
--- a/apps/rowboat/app/lib/components/structured-list.tsx
+++ b/apps/rowboat/app/lib/components/structured-list.tsx
@@ -1,31 +1,26 @@
 import clsx from "clsx";
 import { ActionButton } from "./structured-panel";
 
-export function SectionHeader({ title, onAdd }: { title: string; onAdd: () => void }) {
+export function SectionHeader({ title, children }: { title: string; children: React.ReactNode }) {
     return (
         <div className="flex items-center justify-between px-2 py-1 mt-4 first:mt-0 border-b border-gray-200 dark:border-gray-600">
             <div className="text-xs font-semibold text-gray-400 dark:text-gray-300 uppercase">{title}</div>
-            <ActionButton
-                icon={<svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h14m-7 7V5" />
-                </svg>}
-                onClick={onAdd}
-            >
-                Add
-            </ActionButton>
+            <div className="flex items-center gap-3">
+                {children}
+            </div>
         </div>
     );
 }
 
-export function ListItem({ 
-    name, 
-    isSelected, 
-    onClick, 
+export function ListItem({
+    name,
+    isSelected,
+    onClick,
     disabled,
     rightElement,
     selectedRef,
     icon
-}: { 
+}: {
     name: string;
     isSelected: boolean;
     onClick: () => void;
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx b/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
index 278a4bc3..9dca2490 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
@@ -6,7 +6,7 @@ import { Dropdown, DropdownItem, DropdownTrigger, DropdownMenu } from "@heroui/r
 import { useRef, useEffect } from "react";
 import { ActionButton, StructuredPanel } from "../../../lib/components/structured-panel";
 import clsx from "clsx";
-import { EllipsisVerticalIcon, ImportIcon } from "lucide-react";
+import { EllipsisVerticalIcon, ImportIcon, PlusIcon } from "lucide-react";
 import { SectionHeader, ListItem } from "../../../lib/components/structured-list";
 
 interface EntityListProps {
@@ -29,6 +29,7 @@ interface EntityListProps {
     onDeleteAgent: (name: string) => void;
     onDeleteTool: (name: string) => void;
     onDeletePrompt: (name: string) => void;
+    triggerMcpImport: () => void;
 }
 
 export function EntityList({
@@ -48,6 +49,7 @@ export function EntityList({
     onDeleteAgent,
     onDeleteTool,
     onDeletePrompt,
+    triggerMcpImport,
 }: EntityListProps) {
     const selectedRef = useRef<HTMLButtonElement | null>(null);
 
@@ -58,13 +60,20 @@ export function EntityList({
     }, [selectedEntity]);
 
     return (
-        <StructuredPanel 
-            title="WORKFLOW" 
+        <StructuredPanel
+            title="WORKFLOW"
             tooltip="Browse and manage your agents, tools, and prompts in this sidebar"
         >
             <div className="overflow-auto flex flex-col gap-1 justify-start">
                 {/* Agents Section */}
-                <SectionHeader title="Agents" onAdd={() => onAddAgent({})} />
+                <SectionHeader title="Agents">
+                    <ActionButton
+                        icon={<PlusIcon className="w-4 h-4" />}
+                        onClick={() => onAddAgent({})}
+                    >
+                        Add
+                    </ActionButton>
+                </SectionHeader>
                 {agents.map((agent, index) => (
                     <ListItem
                         key={`agent-${index}`}
@@ -91,7 +100,21 @@ export function EntityList({
                 ))}
 
                 {/* Tools Section */}
-                <SectionHeader title="Tools" onAdd={() => onAddTool({})} />
+                <SectionHeader title="Tools">
+                    <ActionButton
+                        icon={<PlusIcon className="w-4 h-4" />}
+                        onClick={() => onAddTool({})}
+                    >
+                        Add
+                    </ActionButton>
+                    <ActionButton
+                        icon={<ImportIcon className="w-4 h-4" />}
+                        onClick={triggerMcpImport}
+                    >
+                        MCP
+                    </ActionButton>
+                </SectionHeader>
+
                 {tools.map((tool, index) => (
                     <ListItem
                         key={`tool-${index}`}
@@ -100,12 +123,19 @@ export function EntityList({
                         onClick={() => onSelectTool(tool.name)}
                         selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
                         rightElement={<EntityDropdown name={tool.name} onDelete={onDeleteTool} />}
-                        icon={tool.isMcp ? <ImportIcon className="w-4 h-4 text-blue-700" /> : <></>}
+                        icon={tool.isMcp ? <ImportIcon className="w-4 h-4 text-blue-700" /> : undefined}
                     />
                 ))}
 
                 {/* Prompts Section */}
-                <SectionHeader title="Prompts" onAdd={() => onAddPrompt({})} />
+                <SectionHeader title="Prompts">
+                    <ActionButton
+                        icon={<PlusIcon className="w-4 h-4" />}
+                        onClick={() => onAddPrompt({})}
+                    >
+                        Add
+                    </ActionButton>
+                </SectionHeader>
                 {prompts.map((prompt, index) => (
                     <ListItem
                         key={`prompt-${index}`}
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
index 9389add6..14ebb089 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
@@ -714,6 +714,10 @@ export function WorkflowEditor({
         }, 1500);
     }
 
+    function triggerMcpImport() {
+        setIsMcpImportModalOpen(true);
+    }
+
     const processQueue = useCallback(async (state: State, dispatch: React.Dispatch<Action>) => {
         if (saving.current || saveQueue.current.length === 0) return;
 
@@ -791,9 +795,6 @@ export function WorkflowEditor({
                             if (key === 'clipboard') {
                                 handleCopyJSON();
                             }
-                            if (key === 'mcp') {
-                                setIsMcpImportModalOpen(true);
-                            }
                         }}
                     >
                         <DropdownItem
@@ -821,12 +822,6 @@ export function WorkflowEditor({
                         >
                             Copy as JSON
                         </DropdownItem>
-                        <DropdownItem
-                            key="mcp"
-                            startContent={<ImportIcon className="w-4 h-4 text-blue-700" />}
-                        >
-                            MCP: Import tools
-                        </DropdownItem>
                     </DropdownMenu>
                 </Dropdown>
             </div>
@@ -901,6 +896,7 @@ export function WorkflowEditor({
                     onDeleteAgent={handleDeleteAgent}
                     onDeleteTool={handleDeleteTool}
                     onDeletePrompt={handleDeletePrompt}
+                    triggerMcpImport={triggerMcpImport}
                 />
             </ResizablePanel>
             <ResizableHandle />