chore: extract action code for easier updates

obot-platform · Jan 14, 2025 · 608cba0 · 608cba0
1 parent 3713551
commit 608cba0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 41 deletions.
diff --git a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
@@ -1,14 +1,12 @@
-import { EllipsisVerticalIcon, Trash } from "lucide-react";
-import { toast } from "sonner";
+import { Trash } from "lucide-react";
 
 import { ToolReference } from "~/lib/model/toolReferences";
-import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 import { cn, timeSince } from "~/lib/utils";
 
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
 import { Truncate } from "~/components/composed/typography";
 import { ToolIcon } from "~/components/tools/ToolIcon";
-import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
+import { ToolCardActions } from "~/components/tools/toolGrid/ToolCardActions";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import {
@@ -17,38 +15,18 @@ import {
 	CardFooter,
 	CardHeader,
 } from "~/components/ui/card";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
 } from "~/components/ui/tooltip";
-import { useAsync } from "~/hooks/useAsync";
-import { usePollSingleTool } from "~/hooks/usePollSingleTool";
 
 interface ToolCardProps {
 	tool: ToolReference;
 	onDelete: (id: string) => void;
 }
 
 export function ToolCard({ tool, onDelete }: ToolCardProps) {
-	const { startPolling, isPolling } = usePollSingleTool(tool.id);
-
-	const forceRefresh = useAsync(
-		ToolReferenceService.forceRefreshToolReference,
-		{
-			onSuccess: () => {
-				toast.success("Tool reference force refreshed");
-				startPolling();
-			},
-		}
-	);
-
 	return (
 		<Card
 			className={cn("flex h-full flex-col", {
@@ -83,23 +61,7 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
 					)}
 				</h4>
 
-				<div className="flex items-center gap-2">
-					{(forceRefresh.isLoading || isPolling) && <LoadingSpinner />}
-
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Button variant="ghost" size="icon" className="m-0">
-								<EllipsisVerticalIcon />
-							</Button>
-						</DropdownMenuTrigger>
-
-						<DropdownMenuContent side="top" align="start">
-							<DropdownMenuItem onClick={() => forceRefresh.execute(tool.id)}>
-								Refresh Tool
-							</DropdownMenuItem>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
+				<ToolCardActions tool={tool} />
 			</CardHeader>
 			<CardContent className="flex-grow">
 				{!tool.builtin && (

diff --git a/ui/admin/app/components/tools/toolGrid/ToolCardActions.tsx b/ui/admin/app/components/tools/toolGrid/ToolCardActions.tsx
@@ -0,0 +1,50 @@
+import { EllipsisVerticalIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { ToolReference } from "~/lib/model/toolReferences";
+import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
+
+import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
+import { Button } from "~/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { useAsync } from "~/hooks/useAsync";
+import { usePollSingleTool } from "~/hooks/usePollSingleTool";
+
+export function ToolCardActions({ tool }: { tool: ToolReference }) {
+	const { startPolling, isPolling } = usePollSingleTool(tool.id);
+
+	const forceRefresh = useAsync(
+		ToolReferenceService.forceRefreshToolReference,
+		{
+			onSuccess: () => {
+				toast.success("Tool reference force refreshed");
+				startPolling();
+			},
+		}
+	);
+
+	return (
+		<div className="flex items-center gap-2">
+			{(forceRefresh.isLoading || isPolling) && <LoadingSpinner />}
+
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="ghost" size="icon" className="m-0">
+						<EllipsisVerticalIcon />
+					</Button>
+				</DropdownMenuTrigger>
+
+				<DropdownMenuContent side="top" align="start">
+					<DropdownMenuItem onClick={() => forceRefresh.execute(tool.id)}>
+						Refresh Tool
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
+	);
+}