gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-13 04:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace native title tooltips with Radix tooltips on Security page

Browse Source 
Converted scanner info icon, exploitability n/a badge, and scan
image button from native HTML title attributes to the shared Radix
Tooltip component.
This commit is contained in:
SaelixCode
2026-07-03 19:35:13 -04:00
parent 717d956593
commit 5a18be8667
3 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SecurityView.tsx
+11 -7
View File
@@ -8,6 +8,7 @@ import { CapabilityGate } from '@/components/CapabilityGate';
import { deriveMasthead, SCANNER_DETECTIONS_NOTE } from './security/securityMasthead';
import { springs } from '@/lib/motion';
import { apiFetch } from '@/lib/api';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { formatTimeAgo } from '@/lib/relativeTime';
import { useAuth } from '@/context/AuthContext';
import { useNodes } from '@/context/NodeContext';
@@ -237,13 +238,16 @@ export function SecurityView({ activeTab, onTabChange, headerActions }: Security
<span>
{overview.scannedImages} {overview.scannedImages === 1 ? 'image' : 'images'} scanned · scanner {overview.scanner.available ? 'ready' : 'not installed'}
</span>
<span
className="inline-flex shrink-0 cursor-help text-stat-subtitle/70 hover:text-stat-subtitle"
title={SCANNER_DETECTIONS_NOTE}
aria-label={SCANNER_DETECTIONS_NOTE}
>
<Info className="h-3 w-3" strokeWidth={1.5} aria-hidden="true" />
</span>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex shrink-0 cursor-help text-stat-subtitle/70 hover:text-stat-subtitle">
<Info className="h-3 w-3" strokeWidth={1.5} aria-hidden="true" />
</span>
</TooltipTrigger>
<TooltipContent className="max-w-[260px]">{SCANNER_DETECTIONS_NOTE}</TooltipContent>
</Tooltip>
</TooltipProvider>
</span>
) : undefined;
frontend/src/components/security/ImagesTab.tsx
+21 -14
View File
@@ -7,6 +7,7 @@ import { Combobox } from '@/components/ui/combobox';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { SeverityBadge } from '@/components/ui/SeverityBadge';
import { getSeverityKey, type SeverityKey, type ImageFilterValue } from '@/lib/severityStyles';
import { formatTimeAgo } from '@/lib/relativeTime';
@@ -255,20 +256,26 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
{canScan && (
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-foreground transition-colors"
disabled={scanningRef === s.image_ref}
title="Scan image"
aria-label={`Scan ${s.image_ref}`}
>
{scanningRef === s.image_ref
? <Loader2 className="w-3.5 h-3.5 animate-spin" strokeWidth={1.5} />
: <ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />}
</Button>
</DropdownMenuTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-foreground transition-colors"
disabled={scanningRef === s.image_ref}
aria-label={`Scan ${s.image_ref}`}
>
{scanningRef === s.image_ref
? <Loader2 className="w-3.5 h-3.5 animate-spin" strokeWidth={1.5} />
: <ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />}
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent>Scan image</TooltipContent>
</Tooltip>
</TooltipProvider>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => onScan(s.image_ref, ['vuln'])}>
Scan (vulnerabilities)
frontend/src/components/security/SecurityCharts.tsx
+9 -1
View File
@@ -8,6 +8,7 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } f
import { Button } from '@/components/ui/button';
import { useChartStyle, type ChartStyle } from '@/hooks/use-theme';
import { cn } from '@/lib/utils';
import { TooltipProvider, Tooltip as RadixTooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
import type { SecurityRiskTrendPoint, SecurityOverview, ExploitIntelFinding } from '@/types/security';
// Severity colours resolve through the --sev-* tokens, which the appearance
@@ -260,7 +261,14 @@ export function TopExploitRiskList({
{f.epss_score !== null ? (
<span className="text-warning">{Math.round(f.epss_score * 100)}%</span>
) : (
<span className="text-stat-subtitle/70" title="Exploitability unrated; treated as potentially automatable">n/a</span>
<TooltipProvider>
<RadixTooltip>
<TooltipTrigger asChild>
<span className="text-stat-subtitle/70 cursor-help">n/a</span>
</TooltipTrigger>
<TooltipContent>Exploitability unrated; treated as potentially automatable</TooltipContent>
</RadixTooltip>
</TooltipProvider>
)}
</span>
<span className="text-right font-mono text-[11px] tabular-nums text-stat-subtitle">