@skyhook-io/k8s-ui 1.8.10 → 1.8.12

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

@@ -1,7 +1,8 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { ChevronDown, Globe, Search, AlertTriangle } from 'lucide-react'
 import { Tooltip } from '../ui/Tooltip'
+import { MultiSelectPicker } from '../ui/MultiSelectPicker'
 
 /**
  * Backend-reported namespace scope. Mirrors Radar's `/cluster/namespace-scope`
@@ -192,18 +193,6 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
     applySelection(new Set())
   }
 
-  const selectAllVisible = () => {
-    const next = new Set(draft)
-    for (const ns of filteredItems) next.add(ns)
-    setDraft(next)
-  }
-
-  const clearVisible = () => {
-    const next = new Set(draft)
-    for (const ns of filteredItems) next.delete(ns)
-    setDraft(next)
-  }
-
   const activeCount = scopeActives.length
   const triggerLabel =
     activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
@@ -226,11 +215,6 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
           ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
           : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
 
-  // Counts used to label the bulk-action buttons; computed against the visible
-  // (filtered) set so the labels match what the action will affect.
-  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
-  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
-
   return (
     <>
       <Tooltip
@@ -271,100 +255,95 @@ export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePicker
             style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
             className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
           >
-            {items.length > 6 && (
-              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
-                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
-                <input
-                  autoFocus
-                  value={search}
-                  onChange={e => setSearch(e.target.value)}
-                  placeholder="Filter namespaces"
-                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
-                />
-              </div>
-            )}
-
             {scope.cacheScoped ? (
-              <div className="px-3 py-1.5 border-b border-theme-border text-[11px] leading-snug text-theme-text-secondary">
-                Radar is watching one namespace to stay fast on large clusters.
-                {scope.namespaceRescope
-                  ? ' Pick another to re-point it — takes a moment and closes open terminals.'
-                  : ' This instance is locked to its startup namespace.'}
-              </div>
-            ) : (
-              <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
-                <button
-                  onClick={canClearAll ? clearAll : undefined}
-                  disabled={!canClearAll || activeCount === 0}
-                  className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
-                  aria-label="Clear namespace selection"
-                >
-                  <X className="w-3 h-3" />
-                  Clear all
-                </button>
-                <button
-                  onClick={allVisibleSelected ? clearVisible : selectAllVisible}
-                  disabled={filteredItems.length === 0}
-                  className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
-                >
-                  {allVisibleSelected
-                    ? `Clear ${filteredItems.length} visible`
-                    : search.trim()
-                      ? `Select ${filteredItems.length} visible`
-                      : 'Select all'}
-                </button>
-              </div>
-            )}
+              <>
+                {items.length > 6 && (
+                  <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
+                    <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
+                    <input
+                      autoFocus
+                      value={search}
+                      onChange={e => setSearch(e.target.value)}
+                      placeholder="Filter namespaces"
+                      className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
+                    />
+                  </div>
+                )}
+
+                <div className="px-3 py-1.5 border-b border-theme-border text-[11px] leading-snug text-theme-text-secondary">
+                  Radar is watching one namespace to stay fast on large clusters.
+                  {scope.namespaceRescope
+                    ? ' Pick another to re-point it — takes a moment and closes open terminals.'
+                    : ' This instance is locked to its startup namespace.'}
+                </div>
 
-            <ul className="max-h-80 overflow-y-auto py-1">
-              {filteredItems.length === 0 && (
-                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
-                  {search ? 'No matches.' : 'No namespaces available.'}
-                </li>
-              )}
+                <ul className="max-h-80 overflow-y-auto py-1">
+                  {filteredItems.length === 0 && (
+                    <li className="px-3 py-2 text-xs text-theme-text-tertiary">
+                      {search ? 'No matches.' : 'No namespaces available.'}
+                    </li>
+                  )}
 
-              {filteredItems.map(ns => {
-                const isChecked = draft.has(ns)
-                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
-                return (
-                  <li key={ns}>
-                    <label
-                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
-                    >
-                      <span className="flex items-center gap-2 min-w-0">
-                        <input
-                          type={scope.cacheScoped ? 'radio' : 'checkbox'}
-                          name={scope.cacheScoped ? 'namespace-cache-scope' : undefined}
-                          checked={isChecked}
-                          onChange={() => toggle(ns)}
-                          className="shrink-0 accent-current"
-                        />
-                        <span className="truncate">{ns}</span>
-                        {isContextDefault && (
-                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
-                            kubeconfig
+                  {filteredItems.map(ns => {
+                    const isChecked = draft.has(ns)
+                    const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
+                    return (
+                      <li key={ns}>
+                        <label className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer">
+                          <span className="flex items-center gap-2 min-w-0">
+                            <input
+                              type="radio"
+                              name="namespace-cache-scope"
+                              checked={isChecked}
+                              onChange={() => toggle(ns)}
+                              className="shrink-0 accent-current"
+                            />
+                            <span className="truncate">{ns}</span>
+                            {isContextDefault && (
+                              <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                                kubeconfig
+                              </span>
+                            )}
                           </span>
-                        )}
-                      </span>
-                    </label>
-                  </li>
-                )
-              })}
-            </ul>
+                        </label>
+                      </li>
+                    )
+                  })}
+                </ul>
 
-            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
-              <span>
-                {scope.cacheScoped
-                  ? (draft.size === 1 ? Array.from(draft)[0] : 'Select a namespace')
-                  : draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
-              </span>
-              <button
-                onClick={closeAndApply}
-                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
-              >
-                Done
-              </button>
-            </div>
+                <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
+                  <span>{draft.size === 1 ? Array.from(draft)[0] : 'Select a namespace'}</span>
+                  <button
+                    onClick={closeAndApply}
+                    className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
+                  >
+                    Done
+                  </button>
+                </div>
+              </>
+            ) : (
+              <MultiSelectPicker
+                items={items}
+                selected={draft}
+                onSelectionChange={setDraft}
+                onClearAll={clearAll}
+                onDone={closeAndApply}
+                search={search}
+                onSearchChange={setSearch}
+                searchPlaceholder="Filter namespaces"
+                summaryEmptyLabel="All namespaces"
+                noItemsLabel="No namespaces available."
+                clearAllDisabled={!canClearAll || activeCount === 0}
+                clearAllAriaLabel="Clear namespace selection"
+                renderItemMeta={ns =>
+                  ns === scope.kubeconfigNamespace && ns !== '' ? (
+                    <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                      kubeconfig
+                    </span>
+                  ) : null
+                }
+              />
+            )}
 
             {!scope.authoritative && (
               <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">

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

@@ -13,6 +13,16 @@ const sqlInstance: APIResource = {
   verbs: ['list'],
 }
 
+const horizontalPodAutoscaler: APIResource = {
+  group: 'autoscaling',
+  version: 'v2',
+  kind: 'HorizontalPodAutoscaler',
+  name: 'horizontalpodautoscalers',
+  namespaced: true,
+  isCrd: false,
+  verbs: ['list'],
+}
+
 describe('ResourcesSidebar CRD group labels', () => {
   it('keeps raw API groups available for filtering and hover recovery', () => {
     expect(resourceMatchesSidebarFilter(sqlInstance, 'cnrm')).toBe(true)
@@ -34,3 +44,64 @@ describe('ResourcesSidebar CRD group labels', () => {
     expect(html).toContain('title="API group: sql.cnrm.cloud.google.com"')
   })
 })
+
+describe('ResourcesSidebar count visibility', () => {
+  it('keeps resources visible when their count is unknown', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{}}
+      />
+    )
+
+    expect(html).toContain('HorizontalPodAutoscaler')
+    expect(html).toContain('–')
+    expect(html).toContain('aria-label="Count unavailable. Open to view resources."')
+  })
+
+  it('hides confirmed-empty resources by default', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+      />
+    )
+
+    expect(html).not.toContain('HorizontalPodAutoscaler')
+    expect(html).toContain('Show')
+  })
+
+  it('keeps the selected confirmed-empty resource visible', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={{ name: 'horizontalpodautoscalers', kind: 'HorizontalPodAutoscaler', group: 'autoscaling' }}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+      />
+    )
+
+    expect(html).toContain('HorizontalPodAutoscaler')
+    expect(html).toContain('>0</')
+  })
+
+  it('keeps pinned confirmed-empty resources visible in Favorites', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[horizontalPodAutoscaler]}
+        resourceCounts={{ 'autoscaling/HorizontalPodAutoscaler': 0 }}
+        pinned={[{ name: 'horizontalpodautoscalers', kind: 'HorizontalPodAutoscaler', group: 'autoscaling' }]}
+        isPinned={(name, group) => name === 'horizontalpodautoscalers' && group === 'autoscaling'}
+      />
+    )
+
+    expect(html).toContain('Favorites')
+    expect(html).toContain('HorizontalPodAutoscaler')
+  })
+})

package/src/components/resources/ResourcesSidebar.tsx

@@ -14,6 +14,7 @@ import type { APIResource } from '../../types'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import { getResourceIcon } from '../../utils/resource-icons'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '../ui/Input'
 
 // Selected resource type info (need both name for API and kind for display)
 export interface SelectedKindInfo {
@@ -52,29 +53,7 @@ export interface ResourcesSidebarProps {
 
 // Persisted across remounts so collapsed categories survive tab switches
 let persistedExpandedCategories: Set<string> | null = null
-
-// Core kinds that are always shown even with 0 instances
-// These are the most commonly used Kubernetes resources (using Kind names, not plural names)
-const ALWAYS_SHOWN_KINDS = new Set([
-  'Pod',
-  'Deployment',
-  'DaemonSet',
-  'StatefulSet',
-  'ReplicaSet',
-  'Service',
-  'Ingress',
-  'ConfigMap',
-  'Secret',
-  'Job',
-  'CronJob',
-  'HorizontalPodAutoscaler',
-  'PersistentVolumeClaim',
-  'Node',
-  'Namespace',
-  'ServiceAccount',
-  'NetworkPolicy',
-  'Event',
-])
+const COUNT_UNAVAILABLE_MESSAGE = 'Count unavailable. Open to view resources.'
 
 // Fallback resource types when API resources aren't loaded yet
 const CORE_RESOURCE_TYPES = [
@@ -173,15 +152,25 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
             <Tooltip content="Insufficient permissions" position="left">
               <Shield className="w-3.5 h-3.5 text-amber-400/60" />
             </Tooltip>
+          ) : count === null ? (
+            <Tooltip content={COUNT_UNAVAILABLE_MESSAGE} position="left">
+              <span
+                className={clsx(
+                  'text-xs py-0.5 rounded text-center font-mono w-8 text-theme-text-disabled',
+                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                )}
+                aria-label={COUNT_UNAVAILABLE_MESSAGE}
+              >
+                –
+              </span>
+            </Tooltip>
           ) : (
             <span className={clsx(
               'text-xs py-0.5 rounded text-center font-mono',
               isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-              count === null
-                ? 'w-8 text-theme-text-disabled'
-                : count < 1000 ? 'w-8' : 'w-9',
+              count < 1000 ? 'w-8' : 'w-9',
             )}>
-              {count === null ? '–' : count}
+              {count}
             </span>
           )}
         </div>
@@ -299,7 +288,7 @@ export function ResourcesSidebar({
       } else if (key in resourceCounts) {
         results[key] = resourceCounts[key] ?? null
       } else {
-        results[key] = 0
+        results[key] = null
       }
     }
     return results
@@ -326,14 +315,14 @@ export function ResourcesSidebar({
         0
       )
 
-      // Filter resources: show if has instances, is core kind, has an
-      // unknown count (loading — don't pre-emptively hide), or
-      // showEmptyKinds is true.
+      // Filter resources: hide only confirmed-empty kinds. Unknown counts stay
+      // visible as a dash so count coverage gaps do not masquerade as emptiness.
       const visibleResources = category.resources.filter(resource => {
         const count = counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind]
-        const isCore = ALWAYS_SHOWN_KINDS.has(resource.kind)
-        const isLoading = count === null
-        const shouldShow = (count ?? 0) > 0 || isCore || isLoading || showEmptyKinds
+        const isSelectedResource =
+          (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
+          (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
+        const shouldShow = isSelectedResource || count === null || (count ?? 0) > 0 || showEmptyKinds
         if (!shouldShow) totalHiddenKinds++
         return shouldShow
       })
@@ -348,16 +337,15 @@ export function ResourcesSidebar({
       return 0
     })
 
-    // Filter out empty groups unless they have visible resources (core kinds) or showEmptyKinds is true
+    // Filter out empty groups unless they have visible resources or showEmptyKinds is true.
     const visibleCategories = sorted.filter(category => {
-      // Show if: has resources with instances, OR has visible resources (core kinds), OR showEmptyKinds
       const shouldShow = category.total > 0 || category.visibleResources.length > 0 || showEmptyKinds
       if (!shouldShow) totalHiddenGroups++
       return shouldShow
     })
 
     return { sortedCategories: visibleCategories, hiddenKindsCount: totalHiddenKinds, hiddenGroupsCount: totalHiddenGroups }
-  }, [categories, counts, showEmptyKinds])
+  }, [categories, counts, showEmptyKinds, effectiveSelectedKind.name, effectiveSelectedKind.kind, effectiveSelectedKind.group])
 
   // Filter sidebar categories/kinds by the kind search term
   const filteredCategories = useMemo(() => {
@@ -489,9 +477,8 @@ export function ResourcesSidebar({
       <div className="px-2 py-3 border-b border-theme-border">
         <div className="relative">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
-          <input
+          <Input
             ref={kindSearchRef}
-            type="text"
             placeholder="Filter resources..."
             value={kindFilter}
             onChange={(e) => setKindFilter(e.target.value)}
@@ -647,13 +634,26 @@ export function ResourcesSidebar({
               >
                 <Icon className="w-4 h-4 shrink-0" />
                 <span className="flex-1 text-left">{type.label}</span>
-                <span className={clsx(
-                  'badge font-mono',
-                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-                  count === null && 'text-theme-text-disabled',
-                )}>
-                  {count === null ? '–' : count}
-                </span>
+                {count === null ? (
+                  <Tooltip content={COUNT_UNAVAILABLE_MESSAGE} position="left">
+                    <span
+                      className={clsx(
+                        'badge font-mono text-theme-text-disabled',
+                        isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                      )}
+                      aria-label={COUNT_UNAVAILABLE_MESSAGE}
+                    >
+                      –
+                    </span>
+                  </Tooltip>
+                ) : (
+                  <span className={clsx(
+                    'badge font-mono',
+                    isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                  )}>
+                    {count}
+                  </span>
+                )}
               </button>
             )
           })

package/src/components/resources/ResourcesView.selected-kind.test.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it } from 'vitest'
+import type { APIResource } from '../../types'
+import {
+  canonicalizeSelectedKind,
+  deriveSidebarResourceCounts,
+  LOADED_RESOURCE_COUNT_TTL_MS,
+  resourceQueryMatchesSelectedKind,
+} from './ResourcesView'
+
+const endpoints: APIResource = {
+  group: '',
+  version: 'v1',
+  kind: 'Endpoints',
+  name: 'endpoints',
+  namespaced: true,
+  isCrd: false,
+  verbs: ['list', 'get', 'watch'],
+}
+
+const httpRoute: APIResource = {
+  group: 'gateway.networking.k8s.io',
+  version: 'v1',
+  kind: 'HTTPRoute',
+  name: 'httproutes',
+  namespaced: true,
+  isCrd: true,
+  verbs: ['list', 'get', 'watch'],
+}
+
+describe('canonicalizeSelectedKind', () => {
+  it('restores the canonical Kind when URL hydration only has the plural resource name', () => {
+    expect(
+      canonicalizeSelectedKind(
+        { name: 'endpoints', kind: 'endpoints', group: '' },
+        [endpoints],
+        [endpoints]
+      )
+    ).toEqual({ name: 'endpoints', kind: 'Endpoints', group: '' })
+  })
+
+  it('leaves an already canonical selection alone', () => {
+    expect(
+      canonicalizeSelectedKind(
+        { name: 'endpoints', kind: 'Endpoints', group: '' },
+        [endpoints],
+        [endpoints]
+      )
+    ).toBeNull()
+  })
+
+  it('resolves CRD deep links from Kind to plural resource name', () => {
+    expect(
+      canonicalizeSelectedKind(
+        { name: 'HTTPRoute', kind: 'HTTPRoute', group: 'gateway.networking.k8s.io' },
+        [],
+        [httpRoute]
+      )
+    ).toEqual({ name: 'httproutes', kind: 'HTTPRoute', group: 'gateway.networking.k8s.io' })
+  })
+})
+
+describe('deriveSidebarResourceCounts', () => {
+  it('keeps recently loaded counts for resources omitted from resource-counts', () => {
+    const now = 10_000
+
+    expect(
+      deriveSidebarResourceCounts(
+        [endpoints],
+        {},
+        undefined,
+        { Endpoints: { count: 132, expiresAt: now + LOADED_RESOURCE_COUNT_TTL_MS } },
+        now
+      )
+    ).toEqual({ Endpoints: 132 })
+  })
+
+  it('expires loaded counts after the TTL', () => {
+    const now = 10_000
+
+    expect(
+      deriveSidebarResourceCounts(
+        [endpoints],
+        {},
+        undefined,
+        { Endpoints: { count: 132, expiresAt: now } },
+        now
+      )
+    ).toEqual({ Endpoints: null })
+  })
+
+  it('prefers authoritative resource-counts over cached loaded counts', () => {
+    const now = 10_000
+
+    expect(
+      deriveSidebarResourceCounts(
+        [endpoints],
+        { Endpoints: 7 },
+        undefined,
+        { Endpoints: { count: 132, expiresAt: now + LOADED_RESOURCE_COUNT_TTL_MS } },
+        now
+      )
+    ).toEqual({ Endpoints: 7 })
+  })
+
+  it('lets a fresh loaded count override an unavailable count marker', () => {
+    const now = 10_000
+
+    expect(
+      deriveSidebarResourceCounts(
+        [endpoints],
+        {},
+        ['Endpoints'],
+        { Endpoints: { count: 132, expiresAt: now + LOADED_RESOURCE_COUNT_TTL_MS } },
+        now
+      )
+    ).toEqual({ Endpoints: 132 })
+  })
+})
+
+describe('resourceQueryMatchesSelectedKind', () => {
+  it('accepts untagged legacy query results', () => {
+    expect(resourceQueryMatchesSelectedKind(undefined, { name: 'endpoints', kind: 'Endpoints', group: '' })).toBe(true)
+    expect(resourceQueryMatchesSelectedKind({}, { name: 'endpoints', kind: 'Endpoints', group: '' })).toBe(true)
+  })
+
+  it('rejects stale selected-kind query results from the previous kind', () => {
+    expect(
+      resourceQueryMatchesSelectedKind(
+        { resourceName: 'pods', group: '' },
+        { name: 'endpoints', kind: 'Endpoints', group: '' }
+      )
+    ).toBe(false)
+  })
+
+  it('matches grouped built-in resources by plural name and group', () => {
+    expect(
+      resourceQueryMatchesSelectedKind(
+        { resourceName: 'endpointslices', group: 'discovery.k8s.io' },
+        { name: 'endpointslices', kind: 'EndpointSlice', group: 'discovery.k8s.io' }
+      )
+    ).toBe(true)
+  })
+})