@skyhook-io/k8s-ui 1.4.0 → 1.4.2

package/src/components/shared/EditableYamlView.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
 import {
   Copy,
   CopyPlus,
@@ -91,6 +91,18 @@ function formatSaveError(error: string): { summary: string; details?: string } {
   return { summary: error }
 }
 
+// Safe sessionStorage wrappers — storage can throw QuotaExceededError or be
+// blocked by browser security policies. Draft persistence is best-effort.
+function safeSessionGet(key: string): string | null {
+  try { return sessionStorage.getItem(key) } catch { return null }
+}
+function safeSessionSet(key: string, value: string): void {
+  try { sessionStorage.setItem(key, value) } catch { /* best-effort */ }
+}
+function safeSessionRemove(key: string): void {
+  try { sessionStorage.removeItem(key) } catch { /* best-effort */ }
+}
+
 interface EditableYamlViewProps {
   resource: SelectedResource
   data: any
@@ -109,11 +121,34 @@ interface EditableYamlViewProps {
 }
 
 export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate }: EditableYamlViewProps) {
-  const [isEditing, setIsEditing] = useState(false)
-  const [editedYaml, setEditedYaml] = useState('')
+  const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
+
+  // Restore draft from sessionStorage (e.g., after session-expiry redirect).
+  // All sessionStorage calls are wrapped in try-catch — storage can throw
+  // QuotaExceededError or be blocked by browser security policies.
+  const savedDraft = useRef(safeSessionGet(draftKey))
+  const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
+  const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
   const [showErrorDetails, setShowErrorDetails] = useState(false)
 
+  // Clean up restored draft flag
+  useEffect(() => {
+    if (typeof savedDraft.current === 'string') {
+      safeSessionRemove(draftKey)
+      savedDraft.current = null
+    }
+  }, [draftKey])
+
+  // Autosave draft to sessionStorage while editing (best-effort)
+  useEffect(() => {
+    if (isEditing && editedYaml) {
+      safeSessionSet(draftKey, editedYaml)
+    } else {
+      safeSessionRemove(draftKey)
+    }
+  }, [isEditing, editedYaml, draftKey])
+
   // Convert resource to YAML for editing
   const convertToYaml = useCallback((d: any) => {
     if (!d) return ''

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -353,7 +353,7 @@ export function ResourceRendererDispatch({
         {kind === 'grpcroutes' && <GRPCRouteRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'tcproutes' && <SimpleRouteRenderer data={data} kind="TCPRoute" onNavigate={onNavigate} />}
         {kind === 'tlsroutes' && <SimpleRouteRenderer data={data} kind="TLSRoute" onNavigate={onNavigate} />}
-        {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} />}
+        {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'workflowtemplates' && <WorkflowTemplateRenderer data={data} />}
         {(kind === 'networkpolicies' || kind === 'networkpolicy') && <NetworkPolicyRenderer data={data} />}
         {(kind === 'ciliumnetworkpolicies' || kind === 'ciliumnetworkpolicy' || kind === 'ciliumclusterwidenetworkpolicies' || kind === 'ciliumclusterwidenetworkpolicy') && <CiliumNetworkPolicyRenderer data={data} />}
@@ -366,8 +366,8 @@ export function ResourceRendererDispatch({
         {kind === 'gitrepositories' && <GitRepositoryRenderer data={data} />}
         {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
         {kind === 'helmrepositories' && <HelmRepositoryRenderer data={data} />}
-        {kind === 'kustomizations' && <KustomizationRenderer data={data} />}
-        {kind === 'helmreleases' && <FluxHelmReleaseRenderer data={data} />}
+        {kind === 'kustomizations' && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'helmreleases' && <FluxHelmReleaseRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'alerts' && <AlertRenderer data={data} />}
         {kind === 'applications' && <ArgoApplicationRenderer data={data} />}
         {kind === 'nodepools' && <KarpenterNodePoolRenderer data={data} onNavigate={onNavigate} />}
@@ -395,7 +395,7 @@ export function ResourceRendererDispatch({
         {kind === 'backupstoragelocations' && <VeleroBSLRenderer data={data} />}
         {kind === 'volumesnapshotlocations' && <VeleroVSLRenderer data={data} />}
         {kind === 'externalsecrets' && <ExternalSecretRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'clusterexternalsecrets' && <ClusterExternalSecretRenderer data={data} />}
+        {kind === 'clusterexternalsecrets' && <ClusterExternalSecretRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'secretstores' || kind === 'clustersecretstores') && <SecretStoreRenderer data={data} />}
         {kind === 'clusters' && <CNPGClusterRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'scheduledbackups' && <CNPGScheduledBackupRenderer data={data} onNavigate={onNavigate} />}

package/src/components/timeline/TimelineList.tsx

@@ -603,10 +603,17 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick }: ActivityCar
               {item.owner && (
                 <span className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                   <span className="text-xs text-theme-text-quaternary">←</span>
-                  <ResourceRefBadge
-                    resourceRef={{ kind: item.owner.kind, namespace: item.namespace, name: item.owner.name }}
-                    onClick={(ref) => onResourceClick?.(refToSelectedResource(ref))}
-                  />
+                  {item.owner.kind === 'ReplicaSet' ? (
+                    <ResourceRefBadge
+                      resourceRef={{ kind: 'Deployment', namespace: item.namespace, name: item.owner.name.replace(/-[a-z0-9]+$/, '') }}
+                      onClick={(ref) => onResourceClick?.(refToSelectedResource(ref))}
+                    />
+                  ) : (
+                    <ResourceRefBadge
+                      resourceRef={{ kind: item.owner.kind, namespace: item.namespace, name: item.owner.name }}
+                      onClick={(ref) => onResourceClick?.(refToSelectedResource(ref))}
+                    />
+                  )}
                 </span>
               )}
               {item.createdAt && (

package/src/components/ui/Tooltip.tsx

@@ -109,6 +109,22 @@ export function Tooltip({
     }
   }, [])
 
+  // When disabled flips true, proactively cancel any pending show timer and
+  // clear visible state. Without this, a tooltip that was visible (or armed)
+  // when disabled became true would pop back on as soon as disabled flips
+  // false — even though the cursor is elsewhere and no fresh mouseenter has
+  // fired. Also covers the case where the trigger becomes unreachable via
+  // pointer-events-none and never fires mouseleave.
+  useEffect(() => {
+    if (disabled) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+      setIsVisible(false)
+    }
+  }, [disabled])
+
   if (disabled || !content) {
     return <>{children}</>
   }

package/src/components/ui/drawer-components.tsx

@@ -28,6 +28,53 @@ export function KeyValueBadgeList({ items }: { items: Record<string, unknown> |
   )
 }
 
+/**
+ * Renders a Kubernetes label selector (matchLabels + matchExpressions).
+ * Accepts either a full selector object `{ matchLabels?, matchExpressions? }`
+ * or a flat `Record<string, string>` (e.g. Service.spec.selector).
+ * Pass `inline` for flow-inline rendering (e.g. within a sentence).
+ */
+export function LabelSelectorDisplay({
+  selector,
+  emptyText = 'All',
+  inline = false,
+}: {
+  selector: any
+  emptyText?: string
+  inline?: boolean
+}) {
+  if (!selector) {
+    return <span className="text-xs text-theme-text-tertiary">{emptyText}</span>
+  }
+
+  // Detect flat selector (e.g. Service.spec.selector has no matchLabels wrapper)
+  const isFlat = typeof selector === 'object' && !Array.isArray(selector) && !selector.matchLabels && !selector.matchExpressions
+  const matchLabels: Record<string, unknown> = isFlat ? selector : (selector.matchLabels || {})
+  const matchExpressions: Array<{ key: string; operator: string; values?: string[] }> = selector.matchExpressions || []
+
+  const hasLabels = Object.keys(matchLabels).length > 0
+  const hasExpressions = matchExpressions.length > 0
+
+  if (!hasLabels && !hasExpressions) {
+    return <span className="text-xs text-theme-text-tertiary">{emptyText}</span>
+  }
+
+  const Wrapper = inline ? 'span' : 'div'
+
+  return (
+    <Wrapper className={inline ? 'inline-flex flex-wrap gap-1 align-middle' : 'flex flex-wrap gap-1'}>
+      {Object.entries(matchLabels).map(([k, v]) => (
+        <KeyValueBadge key={`l-${k}`} k={k} v={String(v)} />
+      ))}
+      {matchExpressions.map((expr, i) => (
+        <span key={`e-${i}`} className="badge bg-theme-elevated text-theme-text-secondary">
+          {expr.key} {expr.operator}{expr.values && expr.values.length > 0 ? ` ${expr.values.join(', ')}` : ''}
+        </span>
+      ))}
+    </Wrapper>
+  )
+}
+
 interface SectionProps {
   title: string
   icon?: React.ComponentType<{ className?: string }>
@@ -234,7 +281,7 @@ export interface Problem {
   message: string
 }
 
-/** Displays a list of problem alerts (warnings and errors) for GitOps resources */
+/** Displays a list of problem alerts (warnings and errors) */
 export function ProblemAlerts({ problems }: { problems: Problem[] }) {
   if (problems.length === 0) return null
 

package/src/theme/variables.css

@@ -43,7 +43,7 @@
   /* ── Text (cool neutral) ── */
   --text-primary: light-dark(#1A1C20, #F5F6F8);
   --text-secondary: light-dark(#555860, #D8DAE0);
-  --text-tertiary: light-dark(#7E828A, #B0B5C0);
+  --text-tertiary: light-dark(#6B7080, #B0B5C0);
   --text-disabled: light-dark(#A0A4AC, #6A7080);
 
   /* ── Borders (lightly blue-tinted in light mode) ── */

package/src/types/gitops.ts

@@ -230,7 +230,9 @@ export interface ArgoAppStatus {
   operationState?: {
     phase?: ArgoOperationPhase | string // Known types + allow unknown
     message?: string
+    startedAt?: string
     finishedAt?: string
+    retryCount?: number
     syncResult?: {
       revision?: string
       source?: ArgoSyncResultSource
@@ -238,6 +240,12 @@ export interface ArgoAppStatus {
     }
   }
   reconciledAt?: string
+  history?: Array<{
+    revision?: string
+    deployedAt?: string
+    id?: number
+    source?: { repoURL?: string; path?: string }
+  }>
 }
 
 /**

package/src/utils/navigation.test.ts

@@ -1,5 +1,9 @@
-import { describe, test, expect } from 'vitest'
-import { kindToPlural, pluralToKind, refToSelectedResource } from './navigation'
+import { describe, test, expect, afterEach } from 'vitest'
+import { kindToPlural, pluralToKind, refToSelectedResource, initNavigationMap, resetNavigationMap } from './navigation'
+
+afterEach(() => {
+  resetNavigationMap()
+})
 
 describe('kindToPlural', () => {
   test('singular PascalCase to plural lowercase', () => {
@@ -110,6 +114,29 @@ describe('pluralToKind', () => {
   })
 })
 
+describe('initNavigationMap', () => {
+  test('discovered API resources override heuristic pluralization', () => {
+    // Before init, an unknown CRD would hit the heuristic fallback
+    // After init, it uses the discovered plural name
+    initNavigationMap([
+      { group: 'external-secrets.io', version: 'v1', kind: 'SecretStore', name: 'secretstores', namespaced: true, isCrd: true, verbs: ['get'] },
+      { group: 'external-secrets.io', version: 'v1', kind: 'ClusterSecretStore', name: 'clustersecretstores', namespaced: false, isCrd: true, verbs: ['get'] },
+    ])
+    expect(kindToPlural('SecretStore')).toBe('secretstores')
+    expect(kindToPlural('ClusterSecretStore')).toBe('clustersecretstores')
+    expect(pluralToKind('secretstores')).toBe('SecretStore')
+    expect(pluralToKind('clustersecretstores')).toBe('ClusterSecretStore')
+  })
+
+  test('prevents double-pluralization of discovered plurals', () => {
+    initNavigationMap([
+      { group: 'external-secrets.io', version: 'v1', kind: 'SecretStore', name: 'secretstores', namespaced: true, isCrd: true, verbs: ['get'] },
+    ])
+    // Passing an already-plural kind should be idempotent
+    expect(kindToPlural('secretstores')).toBe('secretstores')
+  })
+})
+
 describe('refToSelectedResource', () => {
   test('converts singular kind to plural for navigation', () => {
     const result = refToSelectedResource({

package/src/utils/navigation.ts

@@ -1,4 +1,4 @@
-import type { SelectedResource, ResourceRef } from '../types/core'
+import type { SelectedResource, ResourceRef, APIResource } from '../types/core'
 
 /**
  * Canonical callback type for navigating to a resource.
@@ -6,9 +6,8 @@ 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> = {
+// Fallback map for core K8s resources — used before API discovery completes.
+const BUILTIN_PLURAL_TO_KIND: Record<string, string> = {
   pods: 'Pod',
   services: 'Service',
   deployments: 'Deployment',
@@ -16,11 +15,6 @@ const PLURAL_TO_KIND: Record<string, string> = {
   statefulsets: 'StatefulSet',
   replicasets: 'ReplicaSet',
   ingresses: 'Ingress',
-  gateways: 'Gateway',
-  httproutes: 'HTTPRoute',
-  grpcroutes: 'GRPCRoute',
-  tcproutes: 'TCPRoute',
-  tlsroutes: 'TLSRoute',
   configmaps: 'ConfigMap',
   secrets: 'Secret',
   namespaces: 'Namespace',
@@ -33,24 +27,44 @@ const PLURAL_TO_KIND: Record<string, string> = {
   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',
+}
+
+// Dynamic map built from API discovery — populated by initNavigationMap().
+// Once populated, this is the source of truth for all kind↔plural lookups.
+let discoveredPluralToKind: Record<string, string> | null = null
+let discoveredKindToPlural: Record<string, string> | null = null
+
+/**
+ * Initialize navigation maps from discovered API resources.
+ * Call once when API resources are fetched. After this, kindToPlural/pluralToKind
+ * use the real cluster data instead of heuristics.
+ */
+export function initNavigationMap(resources: APIResource[]) {
+  const p2k: Record<string, string> = { ...BUILTIN_PLURAL_TO_KIND }
+  const k2p: Record<string, string> = {}
+  for (const r of resources) {
+    const plural = r.name.toLowerCase()
+    p2k[plural] = r.kind
+    k2p[r.kind.toLowerCase()] = plural
+  }
+  discoveredPluralToKind = p2k
+  discoveredKindToPlural = k2p
+}
+
+/** Reset navigation maps to builtin-only state. For testing. */
+export function resetNavigationMap() {
+  discoveredPluralToKind = null
+  discoveredKindToPlural = null
+}
+
+function getPluralToKind(): Record<string, string> {
+  return discoveredPluralToKind || BUILTIN_PLURAL_TO_KIND
 }
 
 /**
@@ -61,9 +75,15 @@ const PLURAL_TO_KIND: Record<string, string> = {
  */
 export function kindToPlural(kind: string): string {
   const kindLower = kind.toLowerCase()
+  const pluralToKindMap = getPluralToKind()
 
   // Already a known plural — return as-is to prevent double-pluralization
-  if (kindLower in PLURAL_TO_KIND) return kindLower
+  if (kindLower in pluralToKindMap) return kindLower
+
+  // Lookup from discovered API resources (singular kind → plural name)
+  if (discoveredKindToPlural && kindLower in discoveredKindToPlural) {
+    return discoveredKindToPlural[kindLower]
+  }
 
   // Aliases: abbreviations or mappings to a different resource name
   const aliases: Record<string, string> = {
@@ -73,7 +93,7 @@ export function kindToPlural(kind: string): string {
   }
   if (aliases[kindLower]) return aliases[kindLower]
 
-  // English pluralization rules (covers *Class→*classes, *Policy→*policies, *Repository→*repositories, etc.)
+  // Fallback: English pluralization rules (covers *Class→*classes, *Policy→*policies, *Repository→*repositories, etc.)
   if (kindLower.endsWith('s') || kindLower.endsWith('x') || kindLower.endsWith('ch') || kindLower.endsWith('sh')) {
     return kindLower + 'es'
   }
@@ -90,8 +110,9 @@ export function kindToPlural(kind: string): string {
  */
 export function pluralToKind(plural: string): string {
   const lower = plural.toLowerCase()
+  const pluralToKindMap = getPluralToKind()
 
-  if (PLURAL_TO_KIND[lower]) return PLURAL_TO_KIND[lower]
+  if (pluralToKindMap[lower]) return pluralToKindMap[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()) {