diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx index a3aee33b0..b5b76c253 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx @@ -5,6 +5,7 @@ import { differenceInDays, differenceInMinutes, format, isToday, isYesterday } f import { FileText, Loader2 } from "lucide-react"; import type { FC } from "react"; import { Button } from "@/components/ui/button"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import type { LogActiveTask } from "@/contracts/types/log.types"; import { cn } from "@/lib/utils"; @@ -138,14 +139,8 @@ export const ConnectorCard: FC = ({ ); } - // Priority 1: Show status message if available (for both connected and disconnected connectors) - // This takes precedence over indexed dates and warnings - if (statusMessage) { - return {statusMessage}; - } - if (isConnected) { - // Show last indexed date for connected connectors (only if no status message) + // Show last indexed date for connected connectors if (lastIndexedAt) { return ( @@ -160,7 +155,12 @@ export const ConnectorCard: FC = ({ return description; }; - return ( + // Determine if we should show tooltip on the whole card (for disabled/maintenance) + const shouldShowCardTooltip = + statusMessage && + (status.status === "disabled" || status.status === "maintenance"); + + const cardContent = (
= ({
{title} {showWarnings && status.status !== "active" && ( - + )}
{getStatusContent()}
@@ -239,4 +243,20 @@ export const ConnectorCard: FC = ({
); + + // Wrap card in tooltip for disabled/maintenance status + if (shouldShowCardTooltip) { + return ( + + + {cardContent} + + + {statusMessage} + + + ); + } + + return cardContent; }; diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-status-badge.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-status-badge.tsx index 15e9cadb8..8549ebc47 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-status-badge.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-status-badge.tsx @@ -2,15 +2,21 @@ import { AlertTriangle, Ban, Wrench } from "lucide-react"; import type { FC } from "react"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import type { ConnectorStatus } from "../config/connector-status-config"; import { cn } from "@/lib/utils"; interface ConnectorStatusBadgeProps { status: ConnectorStatus; + statusMessage?: string | null; className?: string; } -export const ConnectorStatusBadge: FC = ({ status, className }) => { +export const ConnectorStatusBadge: FC = ({ + status, + statusMessage, + className, +}) => { if (status === "active") { return null; } @@ -21,25 +27,25 @@ export const ConnectorStatusBadge: FC = ({ status, cl return { icon: AlertTriangle, className: "text-yellow-500 dark:text-yellow-400", - title: "Warning", + defaultTitle: "Warning", }; case "disabled": return { icon: Ban, className: "text-red-500 dark:text-red-400", - title: "Disabled", + defaultTitle: "Disabled", }; case "maintenance": return { icon: Wrench, className: "text-orange-500 dark:text-orange-400", - title: "Maintenance", + defaultTitle: "Maintenance", }; case "deprecated": return { icon: AlertTriangle, className: "text-amber-500 dark:text-amber-400", - title: "Deprecated", + defaultTitle: "Deprecated", }; default: return null; @@ -50,11 +56,33 @@ export const ConnectorStatusBadge: FC = ({ status, cl if (!config) return null; const Icon = config.icon; + // Only show statusMessage in tooltip for warning status + // For disabled/maintenance, the card tooltip will show the statusMessage + const shouldUseTooltip = status === "warning" && statusMessage; + const tooltipTitle = shouldUseTooltip ? statusMessage : config.defaultTitle; + + // Use Tooltip component for warning status with statusMessage, native title for others + if (shouldUseTooltip) { + return ( + + + + + + + + {statusMessage} + + + ); + } return (