@skyhook-io/k8s-ui 1.0.0 → 1.1.1

package/src/components/ui/DialogPortal.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+
+interface DialogPortalProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  /** Extra classes on the panel container (width, max-height, etc.) */
+  className?: string
+  /** Prevent closing via Escape / backdrop click (e.g. during async operation) */
+  closable?: boolean
+}
+
+/**
+ * Minimal dialog primitive — handles portal, backdrop, escape, focus, animation.
+ * Renders children inside a centered panel portaled to document.body, so it works
+ * correctly even inside CSS-transformed containers (drawers, slide panels).
+ *
+ * Usage:
+ *   <DialogPortal open={showDialog} onClose={() => setShowDialog(false)} className="w-80">
+ *     <h3>Title</h3>
+ *     <p>Content</p>
+ *   </DialogPortal>
+ */
+export function DialogPortal({ open, onClose, children, className, closable = true }: DialogPortalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+
+  // Capture-phase ESC handler — stops event before it reaches document listeners (e.g. drawer shortcuts)
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && closable) {
+        e.stopPropagation()
+        e.preventDefault()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [open, onClose, closable])
+
+  // Move focus into the dialog for accessibility and tab navigation
+  useEffect(() => {
+    if (open && dialogRef.current) {
+      dialogRef.current.focus()
+    }
+  }, [open])
+
+  if (!shouldRender) return null
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className={clsx(
+          'absolute inset-0 bg-black/60 backdrop-blur-sm',
+          TRANSITION_BACKDROP,
+          isOpen ? 'opacity-100' : 'opacity-0',
+        )}
+        onClick={closable ? onClose : undefined}
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        className={clsx(
+          'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl mx-4 outline-none',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export { Tooltip } from './Tooltip'
+export { DialogPortal } from './DialogPortal'
 export { ConfirmDialog } from './ConfirmDialog'
 export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'

package/src/components/workload/WorkloadView.tsx

@@ -38,7 +38,7 @@ import {
 } from '../timeline/shared'
 import { ResourceActionsBar } from '../shared/ResourceActionsBar'
 import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlView'
-import { ResourceRendererDispatch, getResourceStatus } from '../shared/ResourceRendererDispatch'
+import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
 import { getKindColor, formatKindName } from '../ui/drawer-components'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -94,6 +94,8 @@ interface WorkloadViewProps {
   onUpdateResource?: (params: { kind: string; namespace: string; name: string; yaml: string }) => Promise<void>
   /** Whether the resource is being updated */
   isUpdatingResource?: boolean
+  /** Error message from the last update attempt */
+  updateResourceError?: string | null
 
   // ── Tab state (optional URL sync) ────────────────────────────────────────
   /** Controlled active tab. If not provided, managed internally. */
@@ -123,6 +125,10 @@ interface WorkloadViewProps {
   // ── ResourceActionsBar props (passed through) ────────────────────────────
   /** All props for the actions bar (forwarded as-is) */
   actionsBarProps?: Record<string, any>
+
+  // ── Renderer overrides ──────────────────────────────────────────────────
+  /** Platform-specific renderer overrides (e.g. with hooks for metrics, exec, port-forward) */
+  rendererOverrides?: RendererOverrides
 }
 
 export function WorkloadView({
@@ -152,6 +158,7 @@ export function WorkloadView({
   // Mutations
   onUpdateResource,
   isUpdatingResource,
+  updateResourceError,
   // Tab state
   activeTab: controlledTab,
   onTabChange,
@@ -161,6 +168,8 @@ export function WorkloadView({
   isMetricsAvailable,
   // Actions bar
   actionsBarProps,
+  // Renderer overrides
+  rendererOverrides,
 }: WorkloadViewProps) {
   // Normalize kind: URL has plural lowercase, internal logic uses singular PascalCase
   const kind = pluralToKind(kindProp)
@@ -416,6 +425,9 @@ export function WorkloadView({
               onCopy={(text) => copyToClipboard(text, 'yaml')}
               copied={copied === 'yaml'}
               onSaved={handleSaved}
+              onSave={onUpdateResource}
+              isSaving={isUpdatingResource}
+              saveError={updateResourceError}
             />
           ) : (
             <ResourceRendererDispatch
@@ -428,6 +440,7 @@ export function WorkloadView({
               onNavigate={onNavigateToResource ? (ref) => onNavigateToResource(refToSelectedResource(ref)) : undefined}
               onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
               isSavingSecret={isUpdatingResource}
+              rendererOverrides={rendererOverrides}
             />
           )}
         </div>
@@ -566,6 +579,7 @@ export function WorkloadView({
             isSavingSecret={isUpdatingResource}
             onOpenLogs={handleOpenLogs}
             onSwitchToTimeline={() => handleSetTab('timeline')}
+            rendererOverrides={rendererOverrides}
           />
         )}
         {activeTab === 'timeline' && (
@@ -613,6 +627,9 @@ export function WorkloadView({
                 onCopy={(text) => copyToClipboard(text, 'yaml')}
                 copied={copied === 'yaml'}
                 onSaved={handleSaved}
+                onSave={onUpdateResource}
+                isSaving={isUpdatingResource}
+                saveError={updateResourceError}
               />
             )}
           </div>
@@ -1044,6 +1061,7 @@ function InfoTab({
   isSavingSecret,
   onOpenLogs,
   onSwitchToTimeline,
+  rendererOverrides,
 }: {
   resource: any
   selectedResource: SelectedResource
@@ -1056,6 +1074,7 @@ function InfoTab({
   isSavingSecret?: boolean
   onOpenLogs?: (podName: string, containerName: string) => void
   onSwitchToTimeline?: () => void
+  rendererOverrides?: RendererOverrides
 }) {
   if (isLoading) {
     return (
@@ -1088,6 +1107,7 @@ function InfoTab({
         showCommonSections={true}
         showMetrics={false}
         onOpenLogs={onOpenLogs}
+        rendererOverrides={rendererOverrides}
         eventsHint={onSwitchToTimeline && (
           <button
             onClick={onSwitchToTimeline}

package/src/types/core.ts

@@ -146,10 +146,9 @@ export interface Topology {
   nodes: TopologyNode[]
   edges: TopologyEdge[]
   warnings?: string[] // Warnings about resources that failed to load
-  truncated?: boolean // True if topology was truncated due to size limit
-  totalNodes?: number // Total nodes before truncation (only set if truncated)
   largeCluster?: boolean // True if cluster exceeds large cluster threshold
   hiddenKinds?: string[] // Resource kinds auto-hidden for performance
+  requiresNamespaceFilter?: boolean // True if cluster is too large for all-namespace topology
   crdDiscoveryStatus?: 'idle' | 'discovering' | 'ready' // CRD discovery status
 }
 

package/src/utils/navigation.test.ts

@@ -0,0 +1,142 @@
+import { describe, test, expect } from 'vitest'
+import { kindToPlural, pluralToKind, refToSelectedResource } from './navigation'
+
+describe('kindToPlural', () => {
+  test('singular PascalCase to plural lowercase', () => {
+    expect(kindToPlural('Secret')).toBe('secrets')
+    expect(kindToPlural('Deployment')).toBe('deployments')
+    expect(kindToPlural('Pod')).toBe('pods')
+    expect(kindToPlural('Service')).toBe('services')
+    expect(kindToPlural('ConfigMap')).toBe('configmaps')
+    expect(kindToPlural('Node')).toBe('nodes')
+    expect(kindToPlural('Job')).toBe('jobs')
+    expect(kindToPlural('CronJob')).toBe('cronjobs')
+  })
+
+  test('handles kinds ending in s/x/ch/sh (adds -es)', () => {
+    expect(kindToPlural('Ingress')).toBe('ingresses')
+  })
+
+  test('handles kinds ending in consonant+y (changes to -ies)', () => {
+    expect(kindToPlural('NetworkPolicy')).toBe('networkpolicies')
+  })
+
+  test('handles kinds ending in ss (Class-suffix)', () => {
+    expect(kindToPlural('StorageClass')).toBe('storageclasses')
+    expect(kindToPlural('IngressClass')).toBe('ingressclasses')
+    expect(kindToPlural('PriorityClass')).toBe('priorityclasses')
+    expect(kindToPlural('RuntimeClass')).toBe('runtimeclasses')
+    expect(kindToPlural('GatewayClass')).toBe('gatewayclasses')
+    expect(kindToPlural('EC2NodeClass')).toBe('ec2nodeclasses')
+  })
+
+  test('idempotent on known plurals (prevents double-pluralization)', () => {
+    // This was the original bug: "secrets" → "secretses"
+    expect(kindToPlural('secrets')).toBe('secrets')
+    expect(kindToPlural('services')).toBe('services')
+    expect(kindToPlural('ingresses')).toBe('ingresses')
+    expect(kindToPlural('deployments')).toBe('deployments')
+    expect(kindToPlural('pods')).toBe('pods')
+    expect(kindToPlural('configmaps')).toBe('configmaps')
+    expect(kindToPlural('nodes')).toBe('nodes')
+    expect(kindToPlural('storageclasses')).toBe('storageclasses')
+    expect(kindToPlural('networkpolicies')).toBe('networkpolicies')
+    expect(kindToPlural('horizontalpodautoscalers')).toBe('horizontalpodautoscalers')
+  })
+
+  test('handles aliases', () => {
+    expect(kindToPlural('HorizontalPodAutoscaler')).toBe('horizontalpodautoscalers')
+    expect(kindToPlural('pvc')).toBe('persistentvolumeclaims')
+    expect(kindToPlural('PodGroup')).toBe('pods')
+  })
+})
+
+// Demonstrate that the naive .toLowerCase() + 's' pattern used by renderers is broken.
+// These tests prove WHY renderers must use kindToPlural() instead of ad-hoc pluralization.
+describe('naive pluralization (renderer bug demonstration)', () => {
+  const naivePlural = (kind: string) => kind.toLowerCase() + 's'
+
+  test('breaks for Class-suffix kinds (triple-s)', () => {
+    // What HPARenderer, KarpenterNodePoolRenderer, etc. actually produce
+    expect(naivePlural('EC2NodeClass')).toBe('ec2nodeclasss')   // WRONG
+    expect(kindToPlural('EC2NodeClass')).toBe('ec2nodeclasses')  // CORRECT
+  })
+
+  test('breaks for Policy-suffix kinds', () => {
+    expect(naivePlural('NetworkPolicy')).toBe('networkpolicys')  // WRONG
+    expect(kindToPlural('NetworkPolicy')).toBe('networkpolicies') // CORRECT
+  })
+
+  test('breaks for Ingress-like kinds (ending in s)', () => {
+    expect(naivePlural('Ingress')).toBe('ingresss')   // WRONG
+    expect(kindToPlural('Ingress')).toBe('ingresses')  // CORRECT
+  })
+
+  test('breaks for Repository-suffix kinds', () => {
+    expect(naivePlural('GitRepository')).toBe('gitrepositorys')    // WRONG
+    expect(kindToPlural('GitRepository')).toBe('gitrepositories')  // CORRECT
+  })
+})
+
+describe('pluralToKind', () => {
+  test('reverse mapping for known plurals', () => {
+    expect(pluralToKind('secrets')).toBe('Secret')
+    expect(pluralToKind('deployments')).toBe('Deployment')
+    expect(pluralToKind('horizontalpodautoscalers')).toBe('HorizontalPodAutoscaler')
+    expect(pluralToKind('ingresses')).toBe('Ingress')
+    expect(pluralToKind('configmaps')).toBe('ConfigMap')
+    expect(pluralToKind('networkpolicies')).toBe('NetworkPolicy')
+    expect(pluralToKind('storageclasses')).toBe('StorageClass')
+  })
+
+  test('PascalCase input returned as-is', () => {
+    expect(pluralToKind('Deployment')).toBe('Deployment')
+    expect(pluralToKind('Secret')).toBe('Secret')
+  })
+
+  test('fallback de-pluralization for unknown kinds', () => {
+    expect(pluralToKind('widgets')).toBe('Widget')
+  })
+
+  test('fallback handles -ies suffix', () => {
+    // Unknown kind not in the map
+    expect(pluralToKind('batteries')).toBe('Battery')
+  })
+
+  test('fallback handles -ses suffix', () => {
+    // "databases" triggers the -ses rule (strips 2 chars) — a known limitation
+    // of the heuristic fallback. Known kinds use the PLURAL_TO_KIND map instead.
+    expect(pluralToKind('databases')).toBe('Databas')
+  })
+})
+
+describe('refToSelectedResource', () => {
+  test('converts singular kind to plural for navigation', () => {
+    const result = refToSelectedResource({
+      kind: 'Secret',
+      name: 'test-tls',
+      namespace: 'platform',
+    })
+    expect(result).toEqual({
+      kind: 'secrets',
+      name: 'test-tls',
+      namespace: 'platform',
+      group: undefined,
+    })
+  })
+
+  test('preserves group field', () => {
+    const result = refToSelectedResource({
+      kind: 'Certificate',
+      name: 'my-cert',
+      namespace: 'default',
+      group: 'cert-manager.io',
+    })
+    expect(result).toEqual({
+      kind: 'certificates',
+      name: 'my-cert',
+      namespace: 'default',
+      group: 'cert-manager.io',
+    })
+  })
+})

package/src/utils/navigation.ts

@@ -6,14 +6,65 @@ import type { SelectedResource, ResourceRef } from '../types/core'
  */
 export type NavigateToResource = (resource: SelectedResource) => void
 
+// Known plural API resource names → singular PascalCase kind.
+// Shared between kindToPlural (idempotency guard) and pluralToKind (reverse lookup).
+const PLURAL_TO_KIND: Record<string, string> = {
+  pods: 'Pod',
+  services: 'Service',
+  deployments: 'Deployment',
+  daemonsets: 'DaemonSet',
+  statefulsets: 'StatefulSet',
+  replicasets: 'ReplicaSet',
+  ingresses: 'Ingress',
+  gateways: 'Gateway',
+  httproutes: 'HTTPRoute',
+  grpcroutes: 'GRPCRoute',
+  tcproutes: 'TCPRoute',
+  tlsroutes: 'TLSRoute',
+  configmaps: 'ConfigMap',
+  secrets: 'Secret',
+  namespaces: 'Namespace',
+  events: 'Event',
+  nodes: 'Node',
+  jobs: 'Job',
+  cronjobs: 'CronJob',
+  horizontalpodautoscalers: 'HorizontalPodAutoscaler',
+  persistentvolumeclaims: 'PersistentVolumeClaim',
+  persistentvolumes: 'PersistentVolume',
+  storageclasses: 'StorageClass',
+  poddisruptionbudgets: 'PodDisruptionBudget',
+  rollouts: 'Rollout',
+  applications: 'Application',
+  kustomizations: 'Kustomization',
+  helmreleases: 'HelmRelease',
+  gitrepositories: 'GitRepository',
+  certificates: 'Certificate',
+  roles: 'Role',
+  clusterroles: 'ClusterRole',
+  rolebindings: 'RoleBinding',
+  clusterrolebindings: 'ClusterRoleBinding',
+  serviceaccounts: 'ServiceAccount',
+  networkpolicies: 'NetworkPolicy',
+  verticalpodautoscalers: 'VerticalPodAutoscaler',
+  virtualservices: 'VirtualService',
+  destinationrules: 'DestinationRule',
+  serviceentries: 'ServiceEntry',
+  peerauthentications: 'PeerAuthentication',
+  authorizationpolicies: 'AuthorizationPolicy',
+}
+
 /**
  * Convert a singular kind (e.g., "Deployment") to plural API resource name (e.g., "deployments").
  * Single source of truth — uses English pluralization rules with a small alias map for
  * abbreviations and special mappings that aren't simple plurals.
+ * Idempotent: already-plural inputs (e.g., "secrets") are returned as-is.
  */
 export function kindToPlural(kind: string): string {
   const kindLower = kind.toLowerCase()
 
+  // Already a known plural — return as-is to prevent double-pluralization
+  if (kindLower in PLURAL_TO_KIND) return kindLower
+
   // Aliases: abbreviations or mappings to a different resource name
   const aliases: Record<string, string> = {
     horizontalpodautoscaler: 'horizontalpodautoscalers',
@@ -40,53 +91,7 @@ export function kindToPlural(kind: string): string {
 export function pluralToKind(plural: string): string {
   const lower = plural.toLowerCase()
 
-  // Explicit reverse mappings for irregular/aliased plurals
-  const reverseMap: Record<string, string> = {
-    pods: 'Pod',
-    services: 'Service',
-    deployments: 'Deployment',
-    daemonsets: 'DaemonSet',
-    statefulsets: 'StatefulSet',
-    replicasets: 'ReplicaSet',
-    ingresses: 'Ingress',
-    gateways: 'Gateway',
-    httproutes: 'HTTPRoute',
-    grpcroutes: 'GRPCRoute',
-    tcproutes: 'TCPRoute',
-    tlsroutes: 'TLSRoute',
-    configmaps: 'ConfigMap',
-    secrets: 'Secret',
-    namespaces: 'Namespace',
-    events: 'Event',
-    nodes: 'Node',
-    jobs: 'Job',
-    cronjobs: 'CronJob',
-    horizontalpodautoscalers: 'HorizontalPodAutoscaler',
-    persistentvolumeclaims: 'PersistentVolumeClaim',
-    persistentvolumes: 'PersistentVolume',
-    storageclasses: 'StorageClass',
-    poddisruptionbudgets: 'PodDisruptionBudget',
-    rollouts: 'Rollout',
-    applications: 'Application',
-    kustomizations: 'Kustomization',
-    helmreleases: 'HelmRelease',
-    gitrepositories: 'GitRepository',
-    certificates: 'Certificate',
-    roles: 'Role',
-    clusterroles: 'ClusterRole',
-    rolebindings: 'RoleBinding',
-    clusterrolebindings: 'ClusterRoleBinding',
-    serviceaccounts: 'ServiceAccount',
-    networkpolicies: 'NetworkPolicy',
-    verticalpodautoscalers: 'VerticalPodAutoscaler',
-    virtualservices: 'VirtualService',
-    destinationrules: 'DestinationRule',
-    serviceentries: 'ServiceEntry',
-    peerauthentications: 'PeerAuthentication',
-    authorizationpolicies: 'AuthorizationPolicy',
-  }
-
-  if (reverseMap[lower]) return reverseMap[lower]
+  if (PLURAL_TO_KIND[lower]) return PLURAL_TO_KIND[lower]
 
   // If it already looks like a singular PascalCase kind (starts with uppercase), return as-is
   if (plural[0] === plural[0].toUpperCase() && plural[0] !== plural[0].toLowerCase()) {