Merge branch 'main' into scanner/fix-19300

clubanderson · web-flow · commit 45937b3b2289 · 2026-06-20T11:06:15.000-04:00
diff --git a/web/src/components/cards/StorageOverview.test.tsx b/web/src/components/cards/StorageOverview.test.tsx
@@ -61,8 +61,27 @@ vi.mock('../../lib/cards/cardHooks', () => ({
 }))
 
 vi.mock('../../lib/cards/CardComponents', () => ({
-  CardClusterFilter: ({ availableClusters }: { availableClusters: Array<{ name: string }> }) => (
-    <div data-testid="cluster-filter" data-count={availableClusters.length} />
+  CardHeaderRow: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  CardStatGrid: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  CardStatHeader: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  CardControlsRow: ({
+    clusterFilter,
+    clusterIndicator,
+  }: {
+    clusterFilter?: { availableClusters: Array<{ name: string }> }
+    clusterIndicator?: { selectedCount: number; totalCount: number }
+  }) => (
+    <div data-testid="card-controls-row">
+      {clusterFilter && (
+        <div
+          data-testid="cluster-filter"
+          data-count={clusterFilter.availableClusters.length}
+        />
+      )}
+      {clusterIndicator && (
+        <span>{clusterIndicator.selectedCount}/{clusterIndicator.totalCount}</span>
+      )}
+    </div>
   ),
 }))
 
diff --git a/web/src/components/cards/__tests__/ClusterHealth.test.tsx b/web/src/components/cards/__tests__/ClusterHealth.test.tsx
@@ -131,16 +131,31 @@ vi.mock('../../clusters/ClusterDetailModal', () => ({
   ),
 }))
 
-vi.mock('../../../lib/cards/CardComponents', () => ({
-  CardSearchInput: ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
-    <input data-testid="search-input" value={value} onChange={(e) => onChange(e.target.value)} />
-  ),
-  CardControlsRow: () => <div data-testid="card-controls-row" />,
-  CardPaginationFooter: ({ needsPagination }: { needsPagination: boolean }) =>
-    needsPagination ? <div data-testid="pagination" /> : null,
-  CardAIActions: () => <div data-testid="ai-actions" />,
-  CardEmptyState: ({ title, message }: { title?: string; message?: string; icon?: unknown }) => <div data-testid="empty-state">{title}{message && <span>{message}</span>}</div>,
-}))
+vi.mock('../../../lib/cards/CardComponents', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../lib/cards/CardComponents')>()
+
+  return {
+    ...actual,
+    CardSearchInput: ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
+      <input data-testid="search-input" value={value} onChange={(e) => onChange(e.target.value)} />
+    ),
+    CardControlsRow: ({
+      clusterIndicator,
+    }: {
+      clusterIndicator?: { selectedCount: number; totalCount: number }
+    }) => (
+      <div data-testid="card-controls-row">
+        {clusterIndicator && (
+          <span>{clusterIndicator.selectedCount}/{clusterIndicator.totalCount}</span>
+        )}
+      </div>
+    ),
+    CardPaginationFooter: ({ needsPagination }: { needsPagination: boolean }) =>
+      needsPagination ? <div data-testid="pagination" /> : null,
+    CardAIActions: () => <div data-testid="ai-actions" />,
+    CardEmptyState: ({ title, message }: { title?: string; message?: string; icon?: unknown }) => <div data-testid="empty-state">{title}{message && <span>{message}</span>}</div>,
+  }
+})
 
 // ---------------------------------------------------------------------------
 // Helpers
diff --git a/web/src/components/cards/card-wrapper/CardActionMenu.tsx b/web/src/components/cards/card-wrapper/CardActionMenu.tsx
@@ -8,6 +8,7 @@ import { cn } from '../../../lib/cn'
 import { isCardExportable } from '../../../lib/widgets/widgetRegistry'
 import { copyToClipboard } from '../../../lib/clipboard'
 import { useDashboardContextOptional } from '../../../hooks/useDashboardContext'
+import { useModalState } from '../../../lib/modals'
 
 // Card width options (in grid columns out of 12)
 const WIDTH_OPTIONS = [
@@ -86,9 +87,9 @@ export const CardActionMenu = memo(function CardActionMenu({
   const { t } = useTranslation(['cards', 'common'])
   const studioContext = useDashboardContextOptional()
 
-  const [showMenu, setShowMenu] = useState(false)
-  const [showResizeMenu, setShowResizeMenu] = useState(false)
-  const [showHeightMenu, setShowHeightMenu] = useState(false)
+  const { isOpen: showMenu, open: openMenu, close: closeMenu } = useModalState()
+  const { isOpen: showResizeMenu, open: openResizeMenu, close: closeResizeMenu } = useModalState()
+  const { isOpen: showHeightMenu, open: openHeightMenu, close: closeHeightMenu } = useModalState()
   const [resizeMenuOnLeft, setResizeMenuOnLeft] = useState(false)
   const [heightMenuOnLeft, setHeightMenuOnLeft] = useState(false)
   const [menuPosition, setMenuPosition] = useState<{ top: number; right: number } | null>(null)
@@ -107,15 +108,15 @@ export const CardActionMenu = memo(function CardActionMenu({
   // Close resize/height submenus when main menu closes (#7869)
   useEffect(() => {
     if (!showMenu) {
-      setShowResizeMenu(false)
-      setShowHeightMenu(false)
+      closeResizeMenu()
+      closeHeightMenu()
       setMenuPosition(null)
       if (restoreFocusRef.current) {
         menuButtonRef.current?.focus()
         restoreFocusRef.current = false
       }
     }
-  }, [showMenu])
+  }, [showMenu, closeResizeMenu, closeHeightMenu])
 
   useEffect(() => {
     if (!showMenu) return
@@ -140,12 +141,12 @@ export const CardActionMenu = memo(function CardActionMenu({
     function handleOtherMenuOpen(e: Event) {
       const detail = (e as CustomEvent).detail
       if (detail !== cardId && showMenu) {
-        setShowMenu(false)
+        closeMenu()
       }
     }
     window.addEventListener('card-menu-open', handleOtherMenuOpen)
     return () => window.removeEventListener('card-menu-open', handleOtherMenuOpen)
-  }, [showMenu, cardId])
+  }, [showMenu, cardId, closeMenu])
 
   // Keep menu anchored to button on scroll/resize (#5253).
   useEffect(() => {
@@ -184,13 +185,13 @@ export const CardActionMenu = memo(function CardActionMenu({
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement
       if (!target.closest('[data-tour="card-menu"]') && !target.closest('[data-card-action-menu]')) {
-        setShowMenu(false)
+        closeMenu()
       }
     }
 
     document.addEventListener('mousedown', handleClickOutside)
     return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [showMenu])
+  }, [showMenu, closeMenu])
 
   // Flip resize submenu to left when near viewport edge
   useEffect(() => {
@@ -212,15 +213,15 @@ export const CardActionMenu = memo(function CardActionMenu({
     if (e.key === 'Escape') {
       e.preventDefault()
       restoreFocusRef.current = true
-      setShowResizeMenu(false)
-      setShowHeightMenu(false)
-      setShowMenu(false)
+      closeResizeMenu()
+      closeHeightMenu()
+      closeMenu()
       return
     }
     if (e.key === 'ArrowLeft' && (showResizeMenu || showHeightMenu)) {
       e.preventDefault()
-      setShowResizeMenu(false)
-      setShowHeightMenu(false)
+      closeResizeMenu()
+      closeHeightMenu()
       menuRef.current?.querySelector<HTMLElement>(MENU_ITEM_SELECTOR)?.focus()
       return
     }
@@ -251,8 +252,10 @@ export const CardActionMenu = memo(function CardActionMenu({
           const opening = !showMenu
           if (opening) {
             window.dispatchEvent(new CustomEvent('card-menu-open', { detail: cardId }))
+            openMenu()
+          } else {
+            closeMenu()
           }
-          setShowMenu(opening)
         }}
         className="p-1.5 rounded-lg hover:bg-secondary/50 text-muted-foreground hover:text-foreground transition-colors"
         aria-label={t('cardWrapper.cardMenuTooltip')}
@@ -275,7 +278,7 @@ export const CardActionMenu = memo(function CardActionMenu({
           onKeyDown={handleMenuKeyDown}
         >
           <button
-            onClick={() => { setShowMenu(false); onConfigure?.() }}
+            onClick={() => { closeMenu(); onConfigure?.() }}
             className="w-full px-4 py-2 text-left text-sm text-muted-foreground hover:text-foreground hover:bg-secondary/50 flex items-center gap-2"
             role="menuitem"
             title={t('cardWrapper.configureTooltip')}
@@ -285,7 +288,7 @@ export const CardActionMenu = memo(function CardActionMenu({
           </button>
           <button
             onClick={() => {
-              setShowMenu(false)
+              closeMenu()
               const url = `${window.location.origin}${window.location.pathname}?card=${cardType}`
               copyToClipboard(url)
             }}
@@ -301,7 +304,7 @@ export const CardActionMenu = memo(function CardActionMenu({
           {onWidthChange && (
             <div className="relative" ref={menuContainerRef}>
               <button
-                onClick={() => { setShowResizeMenu(!showResizeMenu); setShowHeightMenu(false) }}
+                onClick={() => { if (showResizeMenu) { closeResizeMenu() } else { openResizeMenu() } closeHeightMenu() }}
                 className="w-full px-4 py-2 text-left text-sm text-muted-foreground hover:text-foreground hover:bg-secondary/50 flex flex-wrap items-center justify-between gap-y-2"
                 role="menuitem"
                 aria-haspopup="menu"
@@ -327,7 +330,7 @@ export const CardActionMenu = memo(function CardActionMenu({
                   {WIDTH_OPTIONS.map((option) => (
                     <button
                       key={option.value}
-                      onClick={() => { onWidthChange(option.value); setShowResizeMenu(false); setShowMenu(false) }}
+                      onClick={() => { onWidthChange(option.value); closeResizeMenu(); closeMenu() }}
                       className={cn(
                         'w-full px-3 py-2 text-left text-sm flex flex-wrap items-center justify-between gap-y-2',
                         cardWidth === option.value
@@ -349,7 +352,7 @@ export const CardActionMenu = memo(function CardActionMenu({
           {onHeightChange && (
             <div className="relative" ref={heightMenuContainerRef}>
               <button
-                onClick={() => { setShowHeightMenu(!showHeightMenu); setShowResizeMenu(false) }}
+                onClick={() => { if (showHeightMenu) { closeHeightMenu() } else { openHeightMenu() } closeResizeMenu() }}
                 className="w-full px-4 py-2 text-left text-sm text-muted-foreground hover:text-foreground hover:bg-secondary/50 flex flex-wrap items-center justify-between gap-y-2"
                 role="menuitem"
                 aria-haspopup="menu"
@@ -375,7 +378,7 @@ export const CardActionMenu = memo(function CardActionMenu({
                   {HEIGHT_OPTIONS.map((option) => (
                     <button
                       key={option.value}
-                      onClick={() => { onHeightChange(option.value); setShowHeightMenu(false); setShowMenu(false) }}
+                      onClick={() => { onHeightChange(option.value); closeHeightMenu(); closeMenu() }}
                       className={cn(
                         'w-full px-3 py-2 text-left text-sm flex flex-wrap items-center justify-between gap-y-2',
                         cardHeight === option.value
@@ -396,7 +399,7 @@ export const CardActionMenu = memo(function CardActionMenu({
           {isCardExportable(cardType) && (
             <button
               onClick={() => {
-                setShowMenu(false)
+                closeMenu()
                 if (studioContext?.openAddCardModal) {
                   studioContext.openAddCardModal('widgets', cardType)
                 } else {
@@ -413,7 +416,7 @@ export const CardActionMenu = memo(function CardActionMenu({
           )}
 
           <button
-            onClick={() => { setShowMenu(false); onRemove?.() }}
+            onClick={() => { closeMenu(); onRemove?.() }}
             className="w-full px-4 py-2 text-left text-sm text-red-400 hover:bg-red-500/10 flex items-center gap-2"
             role="menuitem"
             title={t('cardWrapper.removeTooltip')}
diff --git a/web/src/components/cards/card-wrapper/InfoTooltip.tsx b/web/src/components/cards/card-wrapper/InfoTooltip.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { Info } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useModalState } from '../../../lib/modals'
 
 // #6227: shared Escape-key coordinator. Multiple InfoTooltips (one per
 // CardWrapper) used to each register their own document-level keydown
@@ -50,7 +51,7 @@ const TOOLTIP_EDGE_MARGIN_PX = 8
  */
 export function InfoTooltip({ text }: { text: string }) {
   const { t } = useTranslation('cards')
-  const [isVisible, setIsVisible] = useState(false)
+  const { isOpen: isVisible, open: show, close: hide, toggle } = useModalState()
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
   const triggerRef = useRef<HTMLButtonElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)
@@ -109,27 +110,27 @@ export function InfoTooltip({ text }: { text: string }) {
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement
       if (!triggerRef.current?.contains(target) && !tooltipRef.current?.contains(target)) {
-        setIsVisible(false)
+        hide()
       }
     }
 
     document.addEventListener('mousedown', handleClickOutside)
-    const popEscape = pushEscapeHandler(() => setIsVisible(false))
+    const popEscape = pushEscapeHandler(hide)
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
       popEscape()
     }
-  }, [isVisible])
+  }, [isVisible, hide])
 
   return (
     <>
       <button
         ref={triggerRef}
-        onClick={() => setIsVisible(!isVisible)}
-        onMouseEnter={() => setIsVisible(true)}
-        onMouseLeave={() => setIsVisible(false)}
-        onFocus={() => setIsVisible(true)}
-        onBlur={() => setIsVisible(false)}
+        onClick={toggle}
+        onMouseEnter={show}
+        onMouseLeave={hide}
+        onFocus={show}
+        onBlur={hide}
         className="p-0.5 rounded text-muted-foreground/50 hover:text-muted-foreground transition-colors"
         aria-label={t('cardWrapper.cardInfo')}
         aria-describedby={isVisible ? tooltipId : undefined}
@@ -143,8 +144,8 @@ export function InfoTooltip({ text }: { text: string }) {
           role="tooltip"
           className="fixed z-dropdown max-w-xs px-3 py-2.5 text-xs leading-relaxed rounded-lg bg-background border border-border text-foreground shadow-xl animate-fade-in"
           style={{ top: position.top, left: position.left }}
-          onMouseEnter={() => setIsVisible(true)}
-          onMouseLeave={() => setIsVisible(false)}
+          onMouseEnter={show}
+          onMouseLeave={hide}
         >
           {text}
         </div>,
diff --git a/web/src/components/cards/card-wrapper/InstallCTAFlow.tsx b/web/src/components/cards/card-wrapper/InstallCTAFlow.tsx
@@ -7,6 +7,7 @@ import { ClusterSelectionDialog } from '../../missions/ClusterSelectionDialog'
 import { ConfirmMissionPromptDialog } from '../../missions/ConfirmMissionPromptDialog'
 import { useMissions } from '../../../hooks/useMissions'
 import { useLocalAgent } from '../../../hooks/useLocalAgent'
+import { useModalState } from '../../../lib/modals'
 
 /** Timeout for fetching KB guide data (ms) */
 const KB_FETCH_TIMEOUT_MS = 10_000
@@ -31,7 +32,7 @@ export function InstallCTAFlow({ cardType, title }: InstallCTAFlowProps) {
 
   const installInfo = CARD_INSTALL_MAP[cardType]
 
-  const [showClusterSelect, setShowClusterSelect] = useState(false)
+  const { isOpen: showClusterSelect, open: openClusterSelect, close: closeClusterSelect } = useModalState()
   const [showInstallGuide, setShowInstallGuide] = useState<{
     mission: { mission?: { title?: string; description?: string; steps?: { title?: string; description?: string }[] } }
   } | null>(null)
@@ -51,7 +52,7 @@ export function InstallCTAFlow({ cardType, title }: InstallCTAFlowProps) {
     if (isPreparingInstall) return
     setInstallError(null)
     if (isAgentConnected && installInfo) {
-      setShowClusterSelect(true)
+      openClusterSelect()
     } else if (installInfo) {
       setIsPreparingInstall(true)
       try {
@@ -93,9 +94,9 @@ export function InstallCTAFlow({ cardType, title }: InstallCTAFlowProps) {
       {showClusterSelect && installInfo && (
         <ClusterSelectionDialog
           open={showClusterSelect}
-          onCancel={() => setShowClusterSelect(false)}
+          onCancel={closeClusterSelect}
           onSelect={async (clusters) => {
-            setShowClusterSelect(false)
+            closeClusterSelect()
             setInstallError(null)
             setIsPreparingInstall(true)
             try {
diff --git a/web/src/components/widget/MiniDashboard.test.tsx b/web/src/components/widget/MiniDashboard.test.tsx
