@skyhook-io/k8s-ui 1.18.0 → 1.18.2

package/src/components/namespace-switcher/NamespacePicker.test.tsx

@@ -1,8 +1,8 @@
 // @vitest-environment jsdom
-import { act, type ReactNode } from 'react'
+import { act, createRef, useState, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { NamespacePicker, type NamespacePickerProps, type NamespaceScopeView } from './NamespacePicker'
+import { NamespacePicker, type NamespacePickerHandle, type NamespacePickerProps, type NamespaceScopeView } from './NamespacePicker'
 
 vi.mock('../ui/Tooltip', () => ({
   Tooltip: ({ children, content }: { children: ReactNode; content: ReactNode }) => (
@@ -138,3 +138,237 @@ describe('NamespacePicker incomplete-list notice', () => {
     expect(onApply).toHaveBeenCalledWith(['team-a'])
   })
 })
+
+describe('NamespacePicker Only button', () => {
+  const scope = { ...baseScope, actives: ['team-a'], accessibleNamespaces: ['team-a', 'team-b', 'team-c'] }
+
+  const triggerButton = () =>
+    document.querySelector<HTMLButtonElement>('button[aria-label="Switch active namespaces"]')!
+
+  async function open(onApply = vi.fn()) {
+    await act(async () => {
+      root.render(<NamespacePicker scope={scope} onApply={onApply} />)
+    })
+    await act(async () => { triggerButton().click() })
+    return onApply
+  }
+
+  const onlyButton = (ns: string) =>
+    document.querySelector<HTMLButtonElement>(`button[aria-label="Show only ${ns}"]`)!
+  const row = (ns: string) =>
+    Array.from(document.querySelectorAll('label')).find(l => l.textContent?.includes(ns))!
+  const checkbox = (ns: string) => row(ns).querySelector<HTMLInputElement>('input[type="checkbox"]')!
+  const doneButton = () =>
+    Array.from(document.querySelectorAll('button')).find(b => b.textContent === 'Done')!
+  const isOpen = () => document.querySelector('input[type="checkbox"]') !== null
+
+  it('puts an Only button on every row', async () => {
+    await open()
+    for (const ns of ['team-a', 'team-b', 'team-c']) expect(onlyButton(ns).textContent).toBe('Only')
+  })
+
+  it('applies just that namespace and closes the dropdown', async () => {
+    const onApply = await open()
+    expect(isOpen()).toBe(true)
+    await act(async () => { onlyButton('team-c').click() })
+
+    expect(onApply).toHaveBeenCalledTimes(1)
+    expect(onApply).toHaveBeenCalledWith(['team-c'])
+    expect(isOpen()).toBe(false)
+  })
+
+  it('replaces unsaved checkbox toggles', async () => {
+    const onApply = await open()
+    await act(async () => { checkbox('team-b').click() })
+    await act(async () => { onlyButton('team-c').click() })
+
+    expect(onApply).toHaveBeenCalledWith(['team-c'])
+  })
+
+  it('does not re-apply when that namespace is already the only one active', async () => {
+    const onApply = await open()
+    await act(async () => { onlyButton('team-a').click() })
+
+    expect(onApply).not.toHaveBeenCalled()
+    expect(isOpen()).toBe(false)
+  })
+
+  it('keeps the name and checkbox as add/remove toggles', async () => {
+    const onApply = await open()
+    await act(async () => { checkbox('team-b').click() })
+    expect(checkbox('team-b').checked).toBe(true)
+    expect(onApply).not.toHaveBeenCalled()
+    expect(isOpen()).toBe(true)
+
+    const name = Array.from(row('team-c').querySelectorAll('span')).find(s => s.textContent === 'team-c')!
+    await act(async () => { name.click() })
+    expect(checkbox('team-c').checked).toBe(true)
+    expect(onApply).not.toHaveBeenCalled()
+    expect(isOpen()).toBe(true)
+
+    await act(async () => { doneButton().click() })
+    expect(onApply).toHaveBeenCalledWith(['team-a', 'team-b', 'team-c'])
+  })
+
+  it('keeps the button out of the row label', async () => {
+    await open()
+    expect(document.querySelector('label button')).toBeNull()
+    expect(onlyButton('team-b').parentElement).toBe(row('team-b').parentElement)
+  })
+
+  it('is reachable by keyboard, with no tabindex taking it out of the tab order', async () => {
+    await open()
+    const only = onlyButton('team-b')
+    expect(only.tabIndex).toBe(0)
+    only.focus()
+    expect(document.activeElement).toBe(only)
+  })
+
+  it.each(['Only', 'Done', 'Clear all'])('reopens from active namespaces after an unacknowledged %s apply', async (action) => {
+    const onApply = await open()
+    if (action === 'Only') {
+      await act(async () => { onlyButton('team-c').click() })
+    } else if (action === 'Done') {
+      await act(async () => { checkbox('team-b').click() })
+      await act(async () => { doneButton().click() })
+    } else {
+      const clear = document.querySelector<HTMLButtonElement>('button[aria-label="Clear namespace selection"]')!
+      await act(async () => { clear.click() })
+    }
+    expect(onApply).toHaveBeenCalledTimes(1)
+    expect(isOpen()).toBe(false)
+
+    await act(async () => { triggerButton().click() })
+    expect(checkbox('team-a').checked).toBe(true)
+    expect(checkbox('team-b').checked).toBe(false)
+    expect(checkbox('team-c').checked).toBe(false)
+    await act(async () => { document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })) })
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('also refreshes the draft when the keyboard shortcut opens the picker', async () => {
+    const ref = createRef<NamespacePickerHandle>()
+    const onApply = vi.fn()
+    await act(async () => { root.render(<NamespacePicker ref={ref} scope={scope} onApply={onApply} />) })
+    await act(async () => { ref.current?.open() })
+    await act(async () => { onlyButton('team-c').click() })
+    await act(async () => { ref.current?.open() })
+    expect(checkbox('team-a').checked).toBe(true)
+    expect(checkbox('team-c').checked).toBe(false)
+    await act(async () => { doneButton().click() })
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps current edits if the open shortcut is used while the menu is already open', async () => {
+    const ref = createRef<NamespacePickerHandle>()
+    const onApply = vi.fn()
+    await act(async () => { root.render(<NamespacePicker ref={ref} scope={scope} onApply={onApply} />) })
+    await act(async () => { ref.current?.open() })
+    await act(async () => { checkbox('team-b').click() })
+    await act(async () => { ref.current?.open() })
+    expect(checkbox('team-a').checked).toBe(true)
+    expect(checkbox('team-b').checked).toBe(true)
+    expect(onApply).not.toHaveBeenCalled()
+  })
+
+  describe('returning focus after the switch', () => {
+    let setPending: (pending: boolean) => void
+
+    function Host({ onApply, pendingOnApply = true }: { onApply: (namespaces: string[]) => void; pendingOnApply?: boolean }) {
+      const [pending, setPendingState] = useState(false)
+      setPending = setPendingState
+      return (
+        <NamespacePicker
+          scope={scope}
+          pending={pending}
+          onApply={namespaces => {
+            if (pendingOnApply) setPendingState(true)
+            onApply(namespaces)
+          }}
+        />
+      )
+    }
+
+    async function openAndPressOnly(ns: string, pendingOnApply = true) {
+      const onApply = vi.fn()
+      await act(async () => { root.render(<Host onApply={onApply} pendingOnApply={pendingOnApply} />) })
+      await act(async () => { triggerButton().click() })
+      const only = onlyButton(ns)
+      only.focus()
+      await act(async () => { only.click() })
+      return onApply
+    }
+
+    // A browser blurs a focused button the moment it becomes disabled; jsdom does not.
+    async function startPending() {
+      ;(document.activeElement as HTMLElement | null)?.blur()
+      await act(async () => { setPending(true) })
+    }
+
+    it('puts focus back on the trigger when the switch is instant', async () => {
+      await open()
+      const only = onlyButton('team-a')
+      only.focus()
+      await act(async () => { only.click() })
+
+      expect(document.activeElement).toBe(triggerButton())
+    })
+
+    it('waits for the pending switch to finish, because the trigger is inert until then', async () => {
+      await openAndPressOnly('team-c')
+      expect(triggerButton().disabled).toBe(true)
+      expect(document.activeElement).toBe(document.body)
+
+      await act(async () => { setPending(false) })
+      expect(document.activeElement).toBe(triggerButton())
+    })
+
+    it('restores focus again when the host only reports pending after the menu has closed', async () => {
+      await openAndPressOnly('team-c', false)
+      expect(document.activeElement).toBe(triggerButton())
+
+      await startPending()
+      expect(triggerButton().disabled).toBe(true)
+      expect(document.activeElement).toBe(document.body)
+
+      await act(async () => { setPending(false) })
+      expect(document.activeElement).toBe(triggerButton())
+    })
+
+    it('leaves focus alone when the user moved elsewhere during the switch', async () => {
+      const elsewhere = document.createElement('input')
+      document.body.appendChild(elsewhere)
+      await openAndPressOnly('team-c')
+      await act(async () => { elsewhere.focus() })
+
+      await act(async () => { setPending(false) })
+      expect(document.activeElement).toBe(elsewhere)
+    })
+
+    it('leaves focus alone when the user clicked elsewhere during the switch', async () => {
+      await openAndPressOnly('team-c')
+      await act(async () => { document.body.dispatchEvent(new Event('pointerdown', { bubbles: true })) })
+
+      await act(async () => { setPending(false) })
+      expect(document.activeElement).toBe(document.body)
+    })
+
+    it('does not claim focus for a later switch once the user has moved on', async () => {
+      const elsewhere = document.createElement('input')
+      document.body.appendChild(elsewhere)
+      await openAndPressOnly('team-c', false)
+      await act(async () => { elsewhere.focus() })
+      await act(async () => { elsewhere.blur() })
+
+      await startPending()
+      await act(async () => { setPending(false) })
+      expect(document.activeElement).toBe(document.body)
+    })
+
+    it('does not move focus for other ways of closing', async () => {
+      await open()
+      await act(async () => { doneButton().click() })
+      expect(document.activeElement).toBe(document.body)
+    })
+  })
+})

package/src/components/namespace-switcher/NamespacePicker.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import { ChevronDown, Globe, Search } from 'lucide-react'
 import { Badge } from '../ui/Badge'
 import { Tooltip } from '../ui/Tooltip'
+import { useKeepInViewport } from '../../hooks/useKeepInViewport'
 import { MultiSelectPicker } from '../ui/MultiSelectPicker'
 
 /**
@@ -82,7 +83,8 @@ export interface NamespacePickerProps {
  *
  * Selection model: the dropdown keeps a draft Set<string>; toggling rows
  * mutates the draft locally; closing the dropdown applies the draft in a single
- * onApply. "Clear all" applies immediately and closes.
+ * onApply. "Clear all" applies immediately and closes, as does a row's "Only"
+ * button, which switches to that namespace alone.
  */
 export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePickerProps>(function NamespacePicker(
   { scope, onApply, loading = false, pending = false, disabled = false, disabledTooltip, className = '', variant = 'chip', label, limitedListHelp },
@@ -95,6 +97,8 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
 
   const triggerRef = useRef<HTMLButtonElement>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  useKeepInViewport(dropdownRef, isOpen)
+  const [restoreFocus, setRestoreFocus] = useState(false)
 
   const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
   const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
@@ -149,12 +153,34 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
     applySelection(draft)
   }, [applySelection, draft])
 
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      if (disabled || loading || pending) return
-      setIsOpen(true)
-    },
-  }), [disabled, loading, pending])
+  const openPicker = useCallback(() => {
+    if (isOpen || disabled || loading || pending) return
+    setDraft(new Set(scopeActives))
+    setIsOpen(true)
+  }, [isOpen, disabled, loading, pending, scopeActives])
+
+  useImperativeHandle(ref, () => ({ open: openPicker }), [openPicker])
+
+  // Disabling the trigger while a switch is pending drops its focus, so this stays armed through that cycle.
+  useEffect(() => {
+    if (!restoreFocus || isOpen || disabled || loading || pending) return
+    const active = document.activeElement
+    if (!active || active === document.body) triggerRef.current?.focus()
+  }, [restoreFocus, isOpen, disabled, loading, pending])
+
+  useEffect(() => {
+    if (!restoreFocus) return
+    const onFocusIn = (e: FocusEvent) => {
+      if (e.target !== triggerRef.current) setRestoreFocus(false)
+    }
+    const onPointerDown = () => setRestoreFocus(false)
+    document.addEventListener('focusin', onFocusIn)
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => {
+      document.removeEventListener('focusin', onFocusIn)
+      document.removeEventListener('pointerdown', onPointerDown)
+    }
+  }, [restoreFocus])
 
   useEffect(() => {
     if (!isOpen) return
@@ -198,6 +224,15 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
     setDraft(next)
   }
 
+  const selectOnly = (ns: string) => {
+    const next = new Set([ns])
+    setRestoreFocus(true)
+    setDraft(next)
+    setIsOpen(false)
+    setSearch('')
+    applySelection(next)
+  }
+
   const clearAll = () => {
     if (scope.cacheScoped) return
     setDraft(new Set())
@@ -255,7 +290,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
       >
         <button
           ref={triggerRef}
-          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
+          onClick={() => !isDisabled && (isOpen ? closeAndApply() : openPicker())}
           disabled={isDisabled}
           className={
             variant === 'segment'
@@ -350,6 +385,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
                 onSelectionChange={setDraft}
                 onClearAll={clearAll}
                 onDone={closeAndApply}
+                onSelectOnly={selectOnly}
                 search={search}
                 onSearchChange={setSearch}
                 searchPlaceholder="Filter namespaces"

package/src/components/resources/ResourcesSidebar.keyboard.test.tsx

@@ -40,3 +40,31 @@ it('opens a matching View with Enter when search finds no kind', () => {
   act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
   expect(view).toHaveBeenCalledTimes(1)
 })
+it('in a drawer, Escape in a non-empty kind filter clears it without reaching the dialog', () => {
+  const outside = vi.fn()
+  document.addEventListener('keydown', outside)
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} containEscape />))
+  const input = host.querySelector('input')!
+  const type = (v: string) => act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, v)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  const escape = () => act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })))
+  type('pod'); escape()
+  expect(input.value).toBe('')
+  expect(outside).not.toHaveBeenCalled()
+  // An empty filter lets Escape through, so the drawer still closes on it.
+  escape()
+  expect(outside).toHaveBeenCalledTimes(1)
+  document.removeEventListener('keydown', outside)
+})
+it('reads and reports display settings through the parent when it holds them', () => {
+  const onChange = vi.fn()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} pinned={[{ name: 'pods', kind: 'Pod', group: '' }]} displayState={{ showEmptyKinds: false, favoritesExpanded: false }} onDisplayStateChange={onChange} />))
+  const favorites = [...host.querySelectorAll('button')].find((b) => b.textContent?.toLowerCase().includes('favorites'))!
+  expect(favorites.getAttribute('aria-expanded')).toBe('false')
+  act(() => favorites.click())
+  expect(onChange).toHaveBeenCalledWith({ showEmptyKinds: false, favoritesExpanded: true })
+})

package/src/components/resources/ResourcesSidebar.test.tsx

@@ -68,6 +68,7 @@ describe('ResourcesSidebar count visibility', () => {
         onSelectedKindChange={() => {}}
         apiResources={[horizontalPodAutoscaler]}
         resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'complete', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'all_namespaces' } } }}
       />
     )
 
@@ -82,6 +83,7 @@ describe('ResourcesSidebar count visibility', () => {
         onSelectedKindChange={() => {}}
         apiResources={[horizontalPodAutoscaler]}
         resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'complete', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'all_namespaces' } } }}
       />
     )
 
@@ -96,6 +98,7 @@ describe('ResourcesSidebar count visibility', () => {
         onSelectedKindChange={() => {}}
         apiResources={[horizontalPodAutoscaler]}
         resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'complete', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'all_namespaces' } } }}
         pinned={[{ name: 'horizontalpodautoscalers', kind: 'HorizontalPodAutoscaler', group: 'autoscaling' }]}
         isPinned={(name, group) => name === 'horizontalpodautoscalers' && group === 'autoscaling'}
       />
@@ -197,6 +200,33 @@ describe('ResourcesSidebar category workspaces', () => {
   })
 })
 
+describe('ResourcesSidebar counts from a Radar that predates coverage', () => {
+  it('hides an empty kind and shows plain counts, as before coverage', () => {
+    const hidden = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }} resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'unknown' } }} />)
+    expect(hidden).not.toContain('HorizontalPodAutoscaler')
+    const shown = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 23 }} />)
+    expect(shown).toContain('>23</')
+    expect(shown).not.toContain('≥')
+  })
+})
+
+it('sizes the count badge to fit a bounded count in the thousands', () => {
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 12345 }} resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'partial', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'namespaces', namespaces: { names: ['alpha'], count: 1 } } } }} />)
+  const label = `≥${(12345).toLocaleString()}`
+  const badge = html.slice(html.lastIndexOf('<span', html.indexOf(label)), html.indexOf(label))
+  const classes = badge.match(/class="([^"]*)"/)?.[1].split(/\s+/) ?? []
+  expect(classes).toContain('min-w-8')
+  expect(classes).not.toContain('w-8')
+  expect(classes).not.toContain('w-9')
+})
+
+it('keeps a partial zero visible rather than hiding the kind as empty', () => {
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[horizontalPodAutoscaler]} resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }} resourceCoverage={{ 'autoscaling/HorizontalPodAutoscaler': { status: 'partial', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'namespaces', namespaces: { names: ['alpha'], count: 1 } } } }} />)
+  expect(html).toContain('HorizontalPodAutoscaler')
+  expect(html).toContain('–')
+  expect(html).not.toContain('≥0')
+})
+
 describe('sidebarDestinationsMatching', () => {
   const views = ['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'].map((label) => ({ id: label, label, onSelect: () => {} }))
   const resources = [{ group: 'postgresql.cnpg.io' }, { group: 'barmancloud.cnpg.io' }]
@@ -215,3 +245,22 @@ describe('sidebarDestinationsMatching', () => {
     expect(labels('  ')).toHaveLength(5)
   })
 })
+
+it('qualifies the collapsed category total as well as the individual kind', () => {
+  const widget = { name: 'widgets', kind: 'Widget', group: 'read.example.test', version: 'v1', namespaced: true, isCrd: true, verbs: ['get', 'list', 'watch'] }
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[widget]} resourceCounts={{ 'read.example.test/Widget': 3 }} resourceCoverage={{ 'read.example.test/Widget': { status: 'partial', gaps: [], scope: { type: 'all_namespaces' }, read: { type: 'namespaces', namespaces: { names: ['alpha'], count: 1 } } } }} />)
+  const start = html.indexOf('>Test Read Example</span>')
+  expect(start).toBeGreaterThan(-1)
+  expect(html.slice(start, html.indexOf('</button>', start))).toContain('≥3')
+})
+
+it('bounds a category total over kinds Radar collects in only some namespaces', () => {
+  const widget = { name: 'widgets', kind: 'Widget', group: 'read.example.test', version: 'v1', namespaced: true, isCrd: true, verbs: ['get', 'list', 'watch'] }
+  const gadget = { ...widget, name: 'gadgets', kind: 'Gadget' }
+  const collected = (ns: string) => ({ status: 'complete' as const, narrowedBy: ['namespace_collection'], gaps: [], scope: { type: 'namespaces' as const, namespaces: { names: [ns], count: 1 } }, read: { type: 'namespaces' as const, namespaces: { names: [ns], count: 1 } } })
+  const html = renderToString(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[widget, gadget]} resourceCounts={{ 'read.example.test/Widget': 3, 'read.example.test/Gadget': 2 }} resourceCoverage={{ 'read.example.test/Widget': collected('alpha'), 'read.example.test/Gadget': collected('beta') }} />)
+  const start = html.indexOf('>Test Read Example</span>')
+  expect(start).toBeGreaterThan(-1)
+  // Each kind is exact where Radar collects it; their sum is exact for no scope.
+  expect(html.slice(start, html.indexOf('</button>', start))).toContain('≥5')
+})