From dd6874f1aef069a7c3250427ddfaa554be03097b Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Fri, 3 Jul 2026 19:42:48 -0400
Subject: [PATCH] fix: replace native title tooltips with Radix tooltips on
 Schedules and Settings pages

Converted Run now, Execution history, Edit, Delete buttons on Schedules;
Download/Delete on Cloud Backup; Send test/Edit/Delete on Notification
Routing; Reset 2FA on Users; and Edit/Remove suppression on
Suppressions panel. Skipped SettingsSection/Modal title props which
are React component props, not native HTML attributes.
---
 .../components/ScheduledOperationsView.tsx    | 53 +++++++++---
 .../settings/CloudBackupSection.tsx           | 83 +++++++++++--------
 .../settings/NotificationRoutingSection.tsx   | 70 ++++++++++------
 .../components/settings/SuppressionsPanel.tsx | 49 +++++++----
 .../src/components/settings/UsersSection.tsx  | 23 +++--
 5 files changed, 180 insertions(+), 98 deletions(-)

diff --git a/frontend/src/components/ScheduledOperationsView.tsx b/frontend/src/components/ScheduledOperationsView.tsx
index 0eb5dc2b..aecde342 100644
--- a/frontend/src/components/ScheduledOperationsView.tsx
+++ b/frontend/src/components/ScheduledOperationsView.tsx
@@ -11,6 +11,7 @@ import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Clock, Plus, Pencil, Trash2, History, RefreshCw, Play, ChevronLeft, ChevronRight, Download, CalendarClock, Table2 } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { apiFetch, fetchForNode } from '@/lib/api';
 import { Combobox } from '@/components/ui/combobox';
 import { SegmentedControl } from '@/components/ui/segmented-control';
@@ -730,18 +731,46 @@ export default function ScheduledOperationsView({ filterNodeId, onClearFilter, p
                     </TableCell>
                     <TableCell className="text-right">
                       <div className="flex items-center justify-end gap-1">
-                        <Button variant="ghost" size="sm" onClick={() => handleRunNow(task)} title="Run now" disabled={runningTaskId === task.id}>
-                          <Play className={`w-4 h-4 ${runningTaskId === task.id ? 'animate-pulse' : ''}`} strokeWidth={1.5} />
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={() => openRuns(task)} title="Execution history">
-                          <History className="w-4 h-4" strokeWidth={1.5} />
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={() => openEdit(task)} title="Edit">
-                          <Pencil className="w-4 h-4" strokeWidth={1.5} />
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={() => setDeleteTarget(task)} title="Delete" className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground">
-                          <Trash2 className="w-4 h-4" strokeWidth={1.5} />
-                        </Button>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button variant="ghost" size="sm" onClick={() => handleRunNow(task)} disabled={runningTaskId === task.id}>
+                                <Play className={`w-4 h-4 ${runningTaskId === task.id ? 'animate-pulse' : ''}`} strokeWidth={1.5} />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Run now</TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button variant="ghost" size="sm" onClick={() => openRuns(task)}>
+                                <History className="w-4 h-4" strokeWidth={1.5} />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Execution history</TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button variant="ghost" size="sm" onClick={() => openEdit(task)}>
+                                <Pencil className="w-4 h-4" strokeWidth={1.5} />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Edit</TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button variant="ghost" size="sm" onClick={() => setDeleteTarget(task)} className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground">
+                                <Trash2 className="w-4 h-4" strokeWidth={1.5} />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Delete</TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
                       </div>
                     </TableCell>
                   </TableRow>
diff --git a/frontend/src/components/settings/CloudBackupSection.tsx b/frontend/src/components/settings/CloudBackupSection.tsx
index a2be4d42..90f2cb65 100644
--- a/frontend/src/components/settings/CloudBackupSection.tsx
+++ b/frontend/src/components/settings/CloudBackupSection.tsx
@@ -7,6 +7,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { TogglePill } from '@/components/ui/toggle-pill';
 import { ConfirmModal } from '@/components/ui/modal';
 import { toast } from '@/components/ui/toast-store';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { apiFetch } from '@/lib/api';
 import { formatBytes } from '@/lib/utils';
 import { useLicense } from '@/context/LicenseContext';
@@ -496,41 +497,53 @@ export function CloudBackupSection() {
                                         </div>
                                     </div>
                                     <div className="flex items-center gap-1 shrink-0">
-                                        <Button
-                                            size="icon"
-                                            variant="ghost"
-                                            className="h-7 w-7"
-                                            onClick={async () => {
-                                                const encoded = btoa(s.objectKey).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-                                                try {
-                                                    const res = await apiFetch(`/cloud-backup/object/${encoded}/download`);
-                                                    if (!res.ok) {
-                                                        const err = await res.json().catch(() => ({}));
-                                                        throw new Error(err?.error || `Download failed (${res.status})`);
-                                                    }
-                                                    const blob = await res.blob();
-                                                    const link = document.createElement('a');
-                                                    link.href = URL.createObjectURL(blob);
-                                                    link.download = s.objectKey.split('/').pop() || 'snapshot.tar.gz';
-                                                    link.click();
-                                                    URL.revokeObjectURL(link.href);
-                                                } catch (err) {
-                                                    toast.error((err as Error)?.message || 'Download failed.');
-                                                }
-                                            }}
-                                            title="Download"
-                                        >
-                                            <Download className="w-3.5 h-3.5" strokeWidth={1.5} />
-                                        </Button>
-                                        <Button
-                                            size="icon"
-                                            variant="ghost"
-                                            className="h-7 w-7"
-                                            onClick={() => setDeleteKey(s.objectKey)}
-                                            title="Delete"
-                                        >
-                                            <Trash2 className="w-3.5 h-3.5" strokeWidth={1.5} />
-                                        </Button>
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button
+                                                        size="icon"
+                                                        variant="ghost"
+                                                        className="h-7 w-7"
+                                                        onClick={async () => {
+                                                            const encoded = btoa(s.objectKey).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+                                                            try {
+                                                                const res = await apiFetch(`/cloud-backup/object/${encoded}/download`);
+                                                                if (!res.ok) {
+                                                                    const err = await res.json().catch(() => ({}));
+                                                                    throw new Error(err?.error || `Download failed (${res.status})`);
+                                                                }
+                                                                const blob = await res.blob();
+                                                                const link = document.createElement('a');
+                                                                link.href = URL.createObjectURL(blob);
+                                                                link.download = s.objectKey.split('/').pop() || 'snapshot.tar.gz';
+                                                                link.click();
+                                                                URL.revokeObjectURL(link.href);
+                                                            } catch (err) {
+                                                                toast.error((err as Error)?.message || 'Download failed.');
+                                                            }
+                                                        }}
+                                                    >
+                                                        <Download className="w-3.5 h-3.5" strokeWidth={1.5} />
+                                                    </Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>Download</TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button
+                                                        size="icon"
+                                                        variant="ghost"
+                                                        className="h-7 w-7"
+                                                        onClick={() => setDeleteKey(s.objectKey)}
+                                                    >
+                                                        <Trash2 className="w-3.5 h-3.5" strokeWidth={1.5} />
+                                                    </Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>Delete</TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
                                     </div>
                                 </li>
                             ))}
diff --git a/frontend/src/components/settings/NotificationRoutingSection.tsx b/frontend/src/components/settings/NotificationRoutingSection.tsx
index a7135300..1ad9b678 100644
--- a/frontend/src/components/settings/NotificationRoutingSection.tsx
+++ b/frontend/src/components/settings/NotificationRoutingSection.tsx
@@ -12,6 +12,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { springs } from '@/lib/motion';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from '@/components/ui/modal';
 import { toast } from '@/components/ui/toast-store';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { apiFetch } from '@/lib/api';
 import { useNodes } from '@/context/NodeContext';
 import { CapabilityGate } from '@/components/CapabilityGate';
@@ -528,31 +529,50 @@ export function NotificationRoutingSection() {
                                     onChange={() => handleToggleEnabled(route)}
                                     className="scale-75"
                                 />
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => handleTest(route.id)}
-                                    disabled={testingId === route.id}
-                                    title="Send test notification"
-                                >
-                                    {testingId === route.id ? (
-                                        <RefreshCw className="w-4 h-4 animate-spin" />
-                                    ) : (
-                                        <Zap className="w-4 h-4" strokeWidth={1.5} />
-                                    )}
-                                </Button>
-                                <Button variant="ghost" size="sm" onClick={() => startEdit(route)} title="Edit">
-                                    <Pencil className="w-4 h-4" strokeWidth={1.5} />
-                                </Button>
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
-                                    title="Delete"
-                                    onClick={() => setDeleteRouteId(route.id)}
-                                >
-                                    <Trash2 className="w-4 h-4" strokeWidth={1.5} />
-                                </Button>
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleTest(route.id)}
+                                                disabled={testingId === route.id}
+                                            >
+                                                {testingId === route.id ? (
+                                                    <RefreshCw className="w-4 h-4 animate-spin" />
+                                                ) : (
+                                                    <Zap className="w-4 h-4" strokeWidth={1.5} />
+                                                )}
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Send test notification</TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="sm" onClick={() => startEdit(route)}>
+                                                <Pencil className="w-4 h-4" strokeWidth={1.5} />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Edit</TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
+                                                onClick={() => setDeleteRouteId(route.id)}
+                                            >
+                                                <Trash2 className="w-4 h-4" strokeWidth={1.5} />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Delete</TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
                             </div>
                         </div>
                         <div className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
diff --git a/frontend/src/components/settings/SuppressionsPanel.tsx b/frontend/src/components/settings/SuppressionsPanel.tsx
index a7620369..a5c9f6c1 100644
--- a/frontend/src/components/settings/SuppressionsPanel.tsx
+++ b/frontend/src/components/settings/SuppressionsPanel.tsx
@@ -8,6 +8,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from '@/components/ui/modal';
 import { ChevronLeft, ChevronRight, Plus, Pencil, Trash2, Download } from 'lucide-react';
 import { toast } from '@/components/ui/toast-store';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { apiFetch } from '@/lib/api';
 import { FleetTabHeading } from '@/components/fleet/FleetEmptyState';
 import type { CveSuppression } from '@/types/security';
@@ -290,24 +291,36 @@ export function SuppressionsPanel({ isReplica }: SuppressionsPanelProps) {
                 </div>
                 {isAdmin && !isReplica && row.replicated_from_control === 0 && (
                   <div className="flex items-center gap-1 shrink-0">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 text-stat-subtitle hover:text-stat-value"
-                      onClick={() => openEdit(row)}
-                      title="Edit suppression"
-                    >
-                      <Pencil className="w-3.5 h-3.5" strokeWidth={1.5} />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
-                      onClick={() => setDeleteRow(row)}
-                      title="Remove suppression"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" strokeWidth={1.5} />
-                    </Button>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-stat-subtitle hover:text-stat-value"
+                            onClick={() => openEdit(row)}
+                          >
+                            <Pencil className="w-3.5 h-3.5" strokeWidth={1.5} />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Edit suppression</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
+                            onClick={() => setDeleteRow(row)}
+                          >
+                            <Trash2 className="w-3.5 h-3.5" strokeWidth={1.5} />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Remove suppression</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                   </div>
                 )}
               </li>
diff --git a/frontend/src/components/settings/UsersSection.tsx b/frontend/src/components/settings/UsersSection.tsx
index ae65890f..62100dd5 100644
--- a/frontend/src/components/settings/UsersSection.tsx
+++ b/frontend/src/components/settings/UsersSection.tsx
@@ -7,6 +7,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Combobox } from '@/components/ui/combobox';
 import { ConfirmModal } from '@/components/ui/modal';
 import { toast } from '@/components/ui/toast-store';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { apiFetch } from '@/lib/api';
 import { useAuth, type UserRole } from '@/context/AuthContext';
 import { useLicense } from '@/context/LicenseContext';
@@ -454,14 +455,20 @@ export function UsersSection() {
                                                         <Pencil className="w-3.5 h-3.5" strokeWidth={1.5} />
                                                     </Button>
                                                     {u.mfaEnabled && (
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="sm"
-                                                            title="Reset 2FA"
-                                                            onClick={() => setResetMfaTarget(u)}
-                                                        >
-                                                            <ShieldOff className="w-3.5 h-3.5 text-warning" strokeWidth={1.5} />
-                                                        </Button>
+                                                        <TooltipProvider>
+                                                            <Tooltip>
+                                                                <TooltipTrigger asChild>
+                                                                    <Button
+                                                                        variant="ghost"
+                                                                        size="sm"
+                                                                        onClick={() => setResetMfaTarget(u)}
+                                                                    >
+                                                                        <ShieldOff className="w-3.5 h-3.5 text-warning" strokeWidth={1.5} />
+                                                                    </Button>
+                                                                </TooltipTrigger>
+                                                                <TooltipContent>Reset 2FA</TooltipContent>
+                                                            </Tooltip>
+                                                        </TooltipProvider>
                                                     )}
                                                     <Button
                                                         variant="ghost"