update with refresh changes

ui/admin/app/components/composed/typography.tsx

@@ -11,22 +11,38 @@ import {
 export function Truncate({
 	children,
 	className,
+	classNames,
 	asChild,
 	disableTooltip,
 	tooltipContent = children,
 	clamp = true,
+	clampLength = 1,
 }: {
 	children: React.ReactNode;
 	className?: string;
 	asChild?: boolean;
 	disableTooltip?: boolean;
 	tooltipContent?: React.ReactNode;
 	clamp?: boolean;
+	clampLength?: 1 | 2 | 3;
+	classNames?: {
+		root?: string;
+	};
 }) {
 	const Comp = asChild ? Slot : "p";
 
 	const content = (
-		<Comp className={cn({ "line-clamp-1": clamp, truncate: !clamp })}>
+		<Comp
+			className={cn(
+				{
+					"line-clamp-1": clamp && clampLength === 1,
+					"line-clamp-2": clamp && clampLength === 2,
+					"line-clamp-3": clamp && clampLength === 3,
+					truncate: !clamp,
+				},
+				classNames?.root
+			)}
+		>
 			{children}
 		</Comp>
 	);

ui/admin/app/components/tools/list/ToolCard.tsx

@@ -1,8 +1,9 @@
 import { ToolReference } from "~/lib/model/toolReferences";
 import { cn } from "~/lib/utils/cn";
 
+import { Truncate } from "~/components/composed/typography";
 import { ToolIcon } from "~/components/tools/ToolIcon";
-import { ToolDropdown } from "~/components/tools/list/ToolDropdown";
+import { ToolCardActions } from "~/components/tools/list/ToolCardActions";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
 import {
@@ -26,11 +27,7 @@ export function ToolCard({
 			})}
 		>
 			<CardHeader className="flex flex-row items-center justify-between space-y-0 px-2.5 pb-0 pt-2">
-				{!tool.builtin || tool?.metadata?.oauth ? (
-					<ToolDropdown tool={tool} />
-				) : (
-					<div className="h-8 w-6" />
-				)}
+				<ToolCardActions tool={tool} />
 				<div className="pr-2">
 					{tool.error ? (
 						<Popover>
@@ -55,21 +52,33 @@ export function ToolCard({
 					)}
 				</div>
 			</CardHeader>
-			<CardContent className="flex flex-col items-center gap-4">
+			<CardContent className="flex flex-col items-center gap-2 text-center">
 				<ToolIcon
 					className="h-16 w-16"
 					disableTooltip
 					name={tool?.name ?? ""}
 					icon={tool?.metadata?.icon}
 				/>
-				<div className="line-clamp-1 text-center text-lg font-semibold">
-					{tool.name}
-				</div>
-				<p className="line-clamp-2 text-center text-sm">{tool.description}</p>
+				<Truncate className="text-lg font-semibold">{tool.name}</Truncate>
+				<Truncate
+					classNames={{
+						root: "leading-5",
+					}}
+					className="text-sm"
+					clampLength={2}
+				>
+					{tool.description}
+				</Truncate>
 				{!tool.builtin && tool.reference && (
-					<p className="line-clamp-2 text-wrap break-all text-center text-sm">
+					<Truncate
+						classNames={{
+							root: "leading-5",
+						}}
+						className="text-wrap break-all text-sm"
+						clampLength={2}
+					>
 						{tool.reference}
-					</p>
+					</Truncate>
 				)}
 			</CardContent>
 		</Card>

ui/admin/app/components/tools/list/ToolDropdown.tsx → ui/admin/app/components/tools/list/ToolCardActions.tsx

@@ -6,10 +6,12 @@ import { mutate } from "swr";
 import { OAuthProvider } from "~/lib/model/oauthApps/oauth-helpers";
 import { ToolReference } from "~/lib/model/toolReferences";
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
+import { cn } from "~/lib/utils";
 
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
 import { CustomOauthAppDetail } from "~/components/oauth-apps/CustomOauthAppDetail";
 import { OAuthAppDetail } from "~/components/oauth-apps/OAuthAppDetail";
+import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
 import {
 	DropdownMenu,
@@ -20,12 +22,9 @@ import {
 import { useConfirmationDialog } from "~/hooks/component-helpers/useConfirmationDialog";
 import { useOAuthAppList } from "~/hooks/oauthApps/useOAuthApps";
 import { useAsync } from "~/hooks/useAsync";
+import { usePollSingleTool } from "~/hooks/usePollSingleTool";
 
-type ToolDropdownProps = {
-	tool: ToolReference;
-};
-
-export function ToolDropdown({ tool }: ToolDropdownProps) {
+export function ToolCardActions({ tool }: { tool: ToolReference }) {
 	const [configureAuthOpen, setConfigureAuthOpen] = useState(false);
 	const { dialogProps, interceptAsync } = useConfirmationDialog();
 
@@ -38,13 +37,25 @@ export function ToolDropdown({ tool }: ToolDropdownProps) {
 	const deleteTool = useAsync(ToolReferenceService.deleteToolReference, {
 		onSuccess: () => {
 			toast.success("Tool has been deleted.");
-			mutate(ToolReferenceService.getToolReferencesCategoryMap.key("tool"));
+			mutate(ToolReferenceService.getToolReferences.key("tool"));
 		},
 		onError: () => {
 			toast.error("Something went wrong");
 		},
 	});
 
+	const { startPolling, isPolling } = usePollSingleTool(tool.id);
+
+	const forceRefresh = useAsync(
+		ToolReferenceService.forceRefreshToolReference,
+		{
+			onSuccess: () => {
+				toast.success("Tool reference force refreshed");
+				startPolling();
+			},
+		}
+	);
+
 	const handleDelete = () =>
 		interceptAsync(() => deleteTool.executeAsync(tool.id));
 
@@ -60,17 +71,21 @@ export function ToolDropdown({ tool }: ToolDropdownProps) {
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button variant="ghost" size="icon-sm">
-						{requiresConfiguration ? (
+						{forceRefresh.isLoading || isPolling ? (
+							<LoadingSpinner />
+						) : requiresConfiguration ? (
 							<TriangleAlertIcon className="text-warning" />
 						) : (
 							<SettingsIcon />
 						)}
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent className="w-56" side="bottom" align="start">
+				<DropdownMenuContent className="w-56" side="top" align="start">
 					{!tool.error && toolOauthMetadata && (
 						<DropdownMenuItem
-							className="flex items-center gap-1"
+							className={cn("flex items-center gap-1", {
+								"text-warning": requiresConfiguration,
+							})}
 							onClick={() => {
 								setConfigureAuthOpen(true);
 							}}
@@ -81,6 +96,9 @@ export function ToolDropdown({ tool }: ToolDropdownProps) {
 							Configure OAuth
 						</DropdownMenuItem>
 					)}
+					<DropdownMenuItem onClick={() => forceRefresh.execute(tool.id)}>
+						Refresh Tool
+					</DropdownMenuItem>
 					{!tool.builtin && (
 						<DropdownMenuItem
 							className="text-destructive"