@skyhook-io/radar-app 1.14.4 → 1.14.6

package/src/utils/topology-selection.test.ts

@@ -37,4 +37,60 @@ describe('findSelectedTopologyNode', () => {
 
     expect(findSelectedTopologyNode(topology, selected('two.example', 'widgets'))?.id).toBe('second')
   })
+
+  it('matches a pseudo topology kind through its real Kubernetes kind', () => {
+    const knative = node('knative', 'KnativeService', 'api', 'serving.knative.dev/v1')
+    knative.data.resourceKind = 'Service'
+
+    expect(findSelectedTopologyNode(
+      { nodes: [knative], edges: [] },
+      { kind: 'services', namespace: 'default', name: 'api', group: 'serving.knative.dev' },
+    )?.id).toBe('knative')
+  })
+
+  it('keeps an omitted or explicit core Service selection on the core node', () => {
+    const core = node('core', 'Service', 'api')
+    const knative = node('knative', 'KnativeService', 'api', 'serving.knative.dev/v1')
+    knative.data.resourceKind = 'Service'
+    const topology: Topology = { nodes: [knative, core], edges: [] }
+
+    expect(findSelectedTopologyNode(topology, {
+      kind: 'services', namespace: 'default', name: 'api',
+    })?.id).toBe('core')
+    expect(findSelectedTopologyNode(topology, {
+      kind: 'services', namespace: 'default', name: 'api', group: '',
+    })?.id).toBe('core')
+  })
+
+  it('infers a typed Job group when its topology node omits apiVersion', () => {
+    const core = node('core', 'Job', 'train')
+    const volcano = node('volcano', 'Job', 'train', 'batch.volcano.sh/v1alpha1')
+    const topology: Topology = { nodes: [volcano, core], edges: [] }
+
+    expect(findSelectedTopologyNode(topology, {
+      kind: 'jobs', namespace: 'default', name: 'train', group: 'batch',
+    })?.id).toBe('core')
+    expect(findSelectedTopologyNode(topology, {
+      kind: 'jobs', namespace: 'default', name: 'train', group: 'batch.volcano.sh',
+    })?.id).toBe('volcano')
+  })
+
+  it('infers the policy group for a typed PodDisruptionBudget node', () => {
+    const pdb = node('pdb', 'PodDisruptionBudget', 'budget')
+
+    expect(findSelectedTopologyNode(
+      { nodes: [pdb], edges: [] },
+      { kind: 'poddisruptionbudgets', namespace: 'default', name: 'budget', group: 'policy' },
+    )?.id).toBe('pdb')
+  })
+
+  it('fails closed for an omitted unknown group when custom resources collide', () => {
+    const one = node('one', 'Widget', 'same', 'one.example/v1')
+    const two = node('two', 'Widget', 'same', 'two.example/v1')
+
+    expect(findSelectedTopologyNode(
+      { nodes: [one, two], edges: [] },
+      { kind: 'widgets', namespace: 'default', name: 'same' },
+    )).toBeUndefined()
+  })
 })

package/src/utils/topology-selection.ts

@@ -1,16 +1,16 @@
 import type { SelectedResource, Topology, TopologyNode } from '@skyhook-io/k8s-ui/types/core'
+import { builtinGroupForKind, canonicalResourceGroup } from '@skyhook-io/k8s-ui/utils/api-resources'
 import { apiVersionToGroup, kindToPluralWithGroup } from '@skyhook-io/k8s-ui/utils/navigation'
+import { topologyNodeResourceKind } from '@skyhook-io/k8s-ui/utils/topology-neighborhood'
 
 function topologyNodeGroup(node: TopologyNode): string | undefined {
-  const apiVersionGroup = apiVersionToGroup(node.data.apiVersion as string | undefined)
-  if (apiVersionGroup) return apiVersionGroup
+  const apiVersion = node.data.apiVersion
+  if (typeof apiVersion === 'string' && apiVersion) return apiVersionToGroup(apiVersion)
 
   const sourceGroup = node.data.sourceGroup
-  if (typeof sourceGroup === 'string' && sourceGroup) return sourceGroup
+  if (typeof sourceGroup === 'string') return sourceGroup
 
-  // Native NetworkPolicy nodes predate apiVersion in the topology payload.
-  if (node.kind === 'NetworkPolicy') return 'networking.k8s.io'
-  return undefined
+  return builtinGroupForKind(topologyNodeResourceKind(node))
 }
 
 export function findSelectedTopologyNode(
@@ -22,13 +22,13 @@ export function findSelectedTopologyNode(
   const candidates = topology?.nodes.filter(node =>
     ((node.data.namespace as string) || '') === namespace &&
     node.name === selectedResource.name &&
-    (kindToPluralWithGroup(node.kind, topologyNodeGroup(node) ?? '') === selectedKind || node.kind === selectedResource.kind),
+    (kindToPluralWithGroup(topologyNodeResourceKind(node), topologyNodeGroup(node) ?? '') === selectedKind || topologyNodeResourceKind(node) === selectedResource.kind),
   ) ?? []
 
   if (candidates.length === 0) return undefined
 
-  const selectedGroup = selectedResource.group || undefined
-  if (!selectedGroup) return candidates[0]
+  const selectedGroup = canonicalResourceGroup(selectedResource.kind, selectedResource.group)
+  if (selectedGroup === undefined) return candidates.length === 1 ? candidates[0] : undefined
 
   const groupMatch = candidates.find(node => topologyNodeGroup(node) === selectedGroup)
   if (groupMatch) return groupMatch

package/src/components/ui/CommandPalette.tsx

@@ -1,261 +0,0 @@
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
-import { Search, X, ChevronRight } from 'lucide-react'
-import { clsx } from 'clsx'
-import { useCommandItems, bestScore, type CommandItem, type CommandItemCallbacks } from './command-items'
-import { Input } from '@skyhook-io/k8s-ui'
-
-interface CommandPaletteProps extends CommandItemCallbacks {
-  onClose: () => void
-  /** Controls fade-in/out animation (driven by useAnimatedUnmount) */
-  isOpen?: boolean
-}
-
-
-export function CommandPalette({ onClose, isOpen = true, ...callbacks }: CommandPaletteProps) {
-  const [query, setQuery] = useState('')
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const resultsRef = useRef<HTMLDivElement>(null)
-  const isKeyboardNav = useRef(false)
-
-  // The static command items (Views / Kinds / Namespaces / Actions) — shared
-  // with the standalone omnibar via useCommandItems so the two never drift.
-  const items = useCommandItems(callbacks)
-
-  // Focus the input once logically open. Not on mount: the presence hook
-  // mounts the palette two frames before `isOpen` flips, and the root is
-  // `inert` until then, so a mount-time focus would be refused.
-  useEffect(() => {
-    if (isOpen) inputRef.current?.focus()
-  }, [isOpen])
-
-  // Close on Escape (capture phase to beat the shortcut system) — only while
-  // logically open: the palette stays mounted through its exit.
-  useEffect(() => {
-    if (!isOpen) return
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    document.addEventListener('keydown', handler, true)
-    return () => document.removeEventListener('keydown', handler, true)
-  }, [isOpen, onClose])
-
-  // Filter and rank results
-  const filteredItems = useMemo(() => {
-    if (!query.trim()) {
-      // Show views and actions when no query
-      return items.filter(i => i.category === 'Views' || i.category === 'Actions')
-    }
-
-    return items
-      .map(item => {
-        let score = bestScore(item, query)
-        // Boost core K8s resources over CRDs at the same match quality
-        if (score > 0 && item.category === 'Resource Kinds' && item.sublabel === 'core') {
-          score += 10
-        }
-        return { item, score }
-      })
-      .filter(({ score }) => score > 0)
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 20)
-      .map(({ item }) => item)
-  }, [items, query])
-
-  // Group filtered items by category
-  const grouped = useMemo(() => {
-    const groups = new Map<string, CommandItem[]>()
-    for (const item of filteredItems) {
-      const list = groups.get(item.category) || []
-      list.push(item)
-      groups.set(item.category, list)
-    }
-    return groups
-  }, [filteredItems])
-
-  // Single source of truth for flat ordering — derived from grouped to match render order
-  const flatItems = useMemo(() => {
-    const result: CommandItem[] = []
-    for (const [, categoryItems] of grouped) {
-      result.push(...categoryItems)
-    }
-    return result
-  }, [grouped])
-
-  // Reset selection when results change
-  useEffect(() => {
-    setSelectedIndex(0)
-  }, [flatItems.length, query])
-
-  // Scroll selected into view
-  useEffect(() => {
-    if (resultsRef.current && selectedIndex >= 0) {
-      const el = resultsRef.current.querySelector('[data-selected="true"]') as HTMLElement
-      el?.scrollIntoView({ block: 'nearest' })
-    }
-  }, [selectedIndex])
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault()
-        isKeyboardNav.current = true
-        setSelectedIndex(i => Math.min(i + 1, flatItems.length - 1))
-        break
-      case 'ArrowUp':
-        e.preventDefault()
-        isKeyboardNav.current = true
-        setSelectedIndex(i => Math.max(i - 1, 0))
-        break
-      case 'Enter':
-        e.preventDefault()
-        if (flatItems[selectedIndex]) {
-          flatItems[selectedIndex].action()
-          onClose()
-        }
-        break
-    }
-  }, [flatItems, selectedIndex, onClose])
-
-  // Flatten for index tracking
-  let flatIndex = 0
-
-  return (
-    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]" inert={!isOpen || undefined}>
-      {/* Backdrop */}
-      <div
-        className={clsx(
-          'absolute inset-0 bg-theme-base/60 backdrop-blur-sm',
-          TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        )}
-        style={overlayTransitionStyle(isOpen, 'dialog')}
-        onClick={isOpen ? onClose : undefined}
-      />
-
-      {/* Panel */}
-      <div
-        className={clsx(
-          'relative w-full max-w-lg mx-4 dialog overflow-hidden',
-          TRANSITION_PANEL,
-          isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
-        )}
-        style={overlayTransitionStyle(isOpen, 'dialog')}
-      >
-        {/* Search input */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
-          <Search className="w-5 h-5 text-theme-text-secondary shrink-0" />
-          <Input
-            ref={inputRef}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Type a command or search..."
-            className="flex-1 bg-transparent text-theme-text-primary placeholder-theme-text-disabled outline-none text-sm"
-            autoFocus
-          />
-          {query && (
-            <button
-              onClick={() => setQuery('')}
-              className="p-1 text-theme-text-secondary hover:text-theme-text-primary"
-            >
-              <X className="w-4 h-4" />
-            </button>
-          )}
-          <kbd className="px-1.5 py-0.5 text-xs text-theme-text-tertiary bg-theme-elevated rounded border border-theme-border-light">
-            ESC
-          </kbd>
-        </div>
-
-        {/* Results */}
-        <div ref={resultsRef} className="max-h-[50vh] overflow-y-auto">
-          {query && filteredItems.length === 0 && (
-            <div className="px-4 py-8 text-center text-theme-text-tertiary">
-              <Search className="w-8 h-8 mx-auto mb-2 opacity-50" />
-              <p>No results for "{query}"</p>
-            </div>
-          )}
-
-          {Array.from(grouped.entries()).map(([category, categoryItems]) => (
-            <div key={category}>
-              <div className="px-4 py-1.5 text-[10px] font-semibold text-theme-text-tertiary uppercase tracking-wider bg-theme-surface/50 sticky top-0">
-                {category}
-              </div>
-              {categoryItems.map((item) => {
-                const thisIndex = flatIndex++
-                const isSelected = thisIndex === selectedIndex
-                const Icon = item.icon
-
-                return (
-                  <button
-                    key={item.id}
-                    data-selected={isSelected}
-                    onClick={() => { item.action(); onClose() }}
-                    onMouseMove={() => {
-                      if (isKeyboardNav.current) { isKeyboardNav.current = false; return }
-                      setSelectedIndex(thisIndex)
-                    }}
-                    className={clsx(
-                      'w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors',
-                      isSelected ? 'selection' : 'hover:bg-theme-elevated/30'
-                    )}
-                  >
-                    {Icon && (
-                      <div className={clsx(
-                        'flex items-center justify-center w-7 h-7 rounded-md shrink-0',
-                        isSelected ? 'selection-strong' : 'bg-theme-elevated/50'
-                      )}>
-                        <Icon className="w-3.5 h-3.5 text-theme-text-secondary" />
-                      </div>
-                    )}
-                    {!Icon && <div className="w-7 h-7 shrink-0" />}
-
-                    <div className="flex-1 min-w-0">
-                      <span className="text-sm text-theme-text-primary truncate block">{item.label}</span>
-                      {item.sublabel && (
-                        <span className="text-xs text-theme-text-tertiary truncate block">{item.sublabel}</span>
-                      )}
-                    </div>
-
-                    {item.shortcut && (
-                      <kbd className="px-1.5 py-0.5 text-xs text-theme-text-tertiary bg-theme-elevated rounded border border-theme-border-light shrink-0">
-                        {item.shortcut}
-                      </kbd>
-                    )}
-
-                    <ChevronRight className={clsx(
-                      'w-3.5 h-3.5 shrink-0 transition-opacity',
-                      isSelected ? 'text-theme-text-secondary opacity-100' : 'opacity-0'
-                    )} />
-                  </button>
-                )
-              })}
-            </div>
-          ))}
-        </div>
-
-        {/* Footer hints */}
-        {filteredItems.length > 0 && (
-          <div className="px-4 py-2 border-t border-theme-border bg-theme-surface/50">
-            <div className="flex items-center gap-4 text-xs text-theme-text-tertiary">
-              <span className="flex items-center gap-1">
-                <kbd className="px-1 py-0.5 bg-theme-elevated rounded">↑</kbd>
-                <kbd className="px-1 py-0.5 bg-theme-elevated rounded">↓</kbd>
-                Navigate
-              </span>
-              <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-theme-elevated rounded">↵</kbd>
-                Select
-              </span>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}