@skyhook-io/k8s-ui 1.1.0 → 1.1.1

package/src/components/ui/ConfirmDialog.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useRef, ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { ReactNode } from 'react'
 import { AlertTriangle, X } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
-import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { DialogPortal } from './DialogPortal'
 
 
 interface ConfirmDialogProps {
@@ -18,6 +16,7 @@ interface ConfirmDialogProps {
   cancelLabel?: string
   variant?: 'danger' | 'warning'
   isLoading?: boolean
+  isClosable?: boolean // Allow closing even when isLoading (e.g., for long-running ops the user can dismiss)
   children?: ReactNode // Optional custom content (e.g., checkboxes)
 }
 
@@ -32,99 +31,56 @@ export function ConfirmDialog({
   cancelLabel = 'Cancel',
   variant = 'danger',
   isLoading = false,
+  isClosable = false,
   children,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
-
-  // Handle ESC key
-  useEffect(() => {
-    if (!open) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !isLoading) {
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [open, onClose, isLoading])
-
-  // Focus trap
-  useEffect(() => {
-    if (open && dialogRef.current) {
-      dialogRef.current.focus()
-    }
-  }, [open])
-
-  if (!shouldRender) return null
-
+  const canClose = !isLoading || isClosable
   const isDanger = variant === 'danger'
   const severity = isDanger ? 'error' : 'warning'
 
-  return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className={clsx(
-          'absolute inset-0 bg-black/60 backdrop-blur-sm',
-          TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0'
-        )}
-        onClick={isLoading ? undefined : onClose}
-      />
-
-      {/* Dialog */}
-      <div
-        ref={dialogRef}
-        tabIndex={-1}
-        className={clsx(
-          'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl max-w-md w-full mx-4 outline-none',
-          TRANSITION_PANEL,
-          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-        )}
-      >
-        {/* Header */}
-        <div className="flex items-start gap-3 p-4 border-b border-theme-border">
-          <div
-            className={clsx(
-              'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
-              isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
-            )}
-          >
-            <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
-          </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
-            <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
-          </div>
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
-          >
-            <X className="w-5 h-5" />
-          </button>
+  return (
+    <DialogPortal open={open} onClose={onClose} closable={canClose} className="max-w-md w-full">
+      {/* Header */}
+      <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+        <div
+          className={clsx(
+            'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
+            isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
+          )}
+        >
+          <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
         </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+          <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
+        </div>
+        <button
+          onClick={onClose}
+          disabled={!canClose}
+          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
 
-        {/* Details */}
-        {details && (
-          <div className="p-4 border-b border-theme-border">
-            <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
-              {details}
-            </pre>
-          </div>
-        )}
+      {/* Details */}
+      {details && (
+        <div className="p-4 border-b border-theme-border">
+          <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
+            {details}
+          </pre>
+        </div>
+      )}
 
-        {/* Custom content */}
-        {children && (
-          <div className="px-4 pt-4">
-            {children}
-          </div>
-        )}
+      {/* Custom content */}
+      {children && (
+        <div className="px-4 pt-4">
+          {children}
+        </div>
+      )}
 
-        {/* Warning message */}
+      {/* Warning message — hidden once the action is in progress */}
+      {!isLoading && !children && (
         <div className="p-4">
           <div
             className={clsx(
@@ -140,49 +96,48 @@ export function ConfirmDialog({
             </span>
           </div>
         </div>
+      )}
 
-        {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
-          >
-            {cancelLabel}
-          </button>
-          <button
-            onClick={onConfirm}
-            disabled={isLoading}
-            className={clsx(
-              'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
-              isDanger
-                ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
-                : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
-            )}
-          >
-            {isLoading && (
-              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                  fill="none"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-            )}
-            {confirmLabel}
-          </button>
-        </div>
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
+        <button
+          onClick={onClose}
+          disabled={!canClose}
+          className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          onClick={onConfirm}
+          disabled={isLoading}
+          className={clsx(
+            'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
+            isDanger
+              ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
+              : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
+          )}
+        >
+          {isLoading && (
+            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          )}
+          {confirmLabel}
+        </button>
       </div>
-    </div>,
-    document.body
+    </DialogPortal>
   )
 }

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