@skyhook-io/k8s-ui 1.17.1 → 1.18.1

package/src/components/logs/useLogBuffer.ts

@@ -35,6 +35,12 @@ type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'levelSource' | 'isJson' | 'i
 
 interface UseLogBufferReturn {
   entries: LogEntry[]
+  isFollowing: boolean
+  retainedLineCount: number
+  missingLineCount: number
+  getRetainedEntries: () => LogEntry[]
+  pendingLineCount: number
+  setFollowing: (following: boolean) => void
   append: (entry: RawLogEntry) => void
   appendBatch: (entries: RawLogEntry[]) => void
   set: (entries: RawLogEntry[]) => void
@@ -42,7 +48,7 @@ interface UseLogBufferReturn {
 }
 
 export function useLogBuffer(): UseLogBufferReturn {
-  const [entries, setEntries] = useState<LogEntry[]>([])
+  const [buffer, setBuffer] = useState<{ latest: LogEntry[]; reading: LogEntry[] | null }>({ latest: [], reading: null })
   const idCounter = useRef(0)
   const pendingRef = useRef<RawLogEntry[]>([])
   const rafRef = useRef<number | null>(null)
@@ -65,30 +71,35 @@ export function useLogBuffer(): UseLogBufferReturn {
     const batch = pendingRef.current
     if (batch.length === 0) return
     pendingRef.current = []
-
-    setEntries(prev => {
-      const enriched = batch.map(enrichEntry)
-      const combined = [...prev, ...enriched]
-      if (combined.length > MAX_BUFFER_SIZE) {
-        return combined.slice(combined.length - MAX_BUFFER_SIZE)
-      }
-      return combined
+    const enriched = batch.map(enrichEntry)
+
+    setBuffer(prev => {
+      const combined = [...prev.latest, ...enriched]
+      const latest = combined.length > MAX_BUFFER_SIZE ? combined.slice(-MAX_BUFFER_SIZE) : combined
+      // Keep appending while the reader's window fits. Once eviction begins,
+      // retain that window rather than replacing the lines being read.
+      const reading = prev.reading === null ? null
+        : prev.reading === prev.latest && combined.length <= MAX_BUFFER_SIZE ? latest : prev.reading
+      return { latest, reading }
     })
   }, [enrichEntry])
 
   const append = useCallback((entry: RawLogEntry) => {
     pendingRef.current.push(entry)
+    // Hidden tabs can stop delivering animation frames while logs still arrive.
+    if (pendingRef.current.length >= MAX_BUFFER_SIZE) {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      flushPending()
+      return
+    }
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
   const appendBatch = useCallback((batch: RawLogEntry[]) => {
-    pendingRef.current.push(...batch)
-    if (rafRef.current === null) {
-      rafRef.current = requestAnimationFrame(flushPending)
-    }
-  }, [flushPending])
+    for (const entry of batch) append(entry)
+  }, [append])
 
   const set = useCallback((rawEntries: RawLogEntry[]) => {
     // Cancel any pending RAF
@@ -100,9 +111,9 @@ export function useLogBuffer(): UseLogBufferReturn {
 
     const enriched = rawEntries.map(enrichEntry)
     if (enriched.length > MAX_BUFFER_SIZE) {
-      setEntries(enriched.slice(enriched.length - MAX_BUFFER_SIZE))
+      setBuffer({ latest: enriched.slice(enriched.length - MAX_BUFFER_SIZE), reading: null })
     } else {
-      setEntries(enriched)
+      setBuffer({ latest: enriched, reading: null })
     }
   }, [enrichEntry])
 
@@ -112,8 +123,27 @@ export function useLogBuffer(): UseLogBufferReturn {
       rafRef.current = null
     }
     pendingRef.current = []
-    setEntries([])
+    setBuffer({ latest: [], reading: null })
+  }, [])
+
+  const setFollowing = useCallback((following: boolean) => {
+    setBuffer(prev => {
+      if (following) return prev.reading === null ? prev : { ...prev, reading: null }
+      return prev.reading === null ? { ...prev, reading: prev.latest } : prev
+    })
   }, [])
 
-  return { entries, append, appendBatch, set, clear }
+  const entries = buffer.reading ?? buffer.latest
+  const pendingLineCount = (buffer.latest.at(-1)?.id ?? -1) - (entries.at(-1)?.id ?? -1)
+  const readingLastId = entries.at(-1)?.id ?? -1
+  const latestFirstId = buffer.latest[0]?.id ?? 0
+  const overlap = Math.max(0, readingLastId - latestFirstId + 1)
+  const retainedLineCount = buffer.reading === null ? buffer.latest.length : entries.length + buffer.latest.length - overlap
+  const missingLineCount = buffer.reading === null ? 0 : Math.max(0, latestFirstId - readingLastId - 1)
+  const getRetainedEntries = useCallback(() => {
+    if (buffer.reading === null || buffer.reading === buffer.latest) return buffer.latest
+    const lastId = buffer.reading.at(-1)?.id ?? -1
+    return [...buffer.reading, ...buffer.latest.filter(entry => entry.id > lastId)]
+  }, [buffer])
+  return { entries, retainedLineCount, missingLineCount, getRetainedEntries, isFollowing: buffer.reading === null, pendingLineCount, setFollowing, append, appendBatch, set, clear }
 }

package/src/components/logs/useLogSearch.ts

@@ -54,6 +54,7 @@ export function useLogSearch(
   virtuosoRef: React.RefObject<VirtuosoHandle | null>,
   /** Id of the record an entry belongs to (its first line's id); defaults to the entry itself */
   recordIdOf?: (entry: LogEntry) => number,
+  onNavigate?: () => void,
 ): UseLogSearchReturn {
   const [query, setQuery] = useState('')
   const [isRegex, setIsRegex] = useState(false)
@@ -122,6 +123,7 @@ export function useLogSearch(
   const scrollToMatch = useCallback((matchIdx: number) => {
     if (matchIdx < 0 || matchIdx >= matchIndices.length) return
     if (mode === 'hide') return
+    onNavigate?.()
     if (mode === 'only') {
       // The list holds whole matching records, so find the matched line within it
       const index = filteredIndexById?.get(entries[matchIndices[matchIdx]].id)
@@ -139,7 +141,7 @@ export function useLogSearch(
         behavior: 'smooth',
       })
     }
-  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef])
+  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef, onNavigate])
 
   const goToNext = useCallback(() => {
     if (matchIndices.length === 0 || mode === 'hide') return

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

@@ -82,7 +82,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 +96,7 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
 
   const triggerRef = useRef<HTMLButtonElement>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const [restoreFocus, setRestoreFocus] = useState(false)
 
   const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
   const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
@@ -149,12 +151,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 +222,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 +288,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 +383,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/ColumnPickerList.test.tsx

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { ColumnPickerList } from './ColumnPickerList'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+describe('ColumnPickerList keyboard focus', () => {
+  it.each([
+    ['namespace', 'ArrowUp'],
+    ['age', 'ArrowDown'],
+  ])('does not restore stale focus after repeated boundary moves on %s', (key, direction) => {
+    const host = document.createElement('div')
+    document.body.append(host)
+    const root = createRoot(host)
+    const onReorder = vi.fn()
+    const columns = ['name', 'namespace', 'age'].map(key => ({ key, label: key }))
+    const render = () => act(() => root.render(<ColumnPickerList
+      columns={columns}
+      visibleColumns={new Set(['name', 'namespace', 'age'])}
+      customColumnKeys={new Set()}
+      onToggle={() => {}}
+      onRemoveCustom={() => {}}
+      onReorder={onReorder}
+    />))
+    try {
+      render()
+      const inputs = [...host.querySelectorAll<HTMLInputElement>('input')]
+      const current = inputs[columns.findIndex(column => column.key === key)]
+      const other = inputs[key === 'namespace' ? 2 : 1]
+      if (!current || !other) throw new Error('Expected both movable checkboxes')
+      current.focus()
+      for (let i = 0; i < 3; i++) {
+        act(() => current.dispatchEvent(new KeyboardEvent('keydown', { key: direction, altKey: true, bubbles: true })))
+      }
+      other.focus()
+      render()
+      expect(document.activeElement).toBe(other)
+      expect(onReorder).not.toHaveBeenCalled()
+    } finally {
+      act(() => root.unmount())
+      host.remove()
+    }
+  })
+})