@skyhook-io/k8s-ui 1.8.10 → 1.8.11

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)
+  })
+})