@skyhook-io/k8s-ui 1.14.0 → 1.14.2

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -503,6 +503,20 @@ const KNOWN_KINDS = new Set([
   'functions', 'configurations',
 ])
 
+// Cluster topology owns resources across the core, bootstrap, control-plane,
+// and infrastructure contracts. Keep this explicit: a suffix/substring match
+// would also accept unrelated groups such as extension.cluster.x-k8s.io.
+const CAPI_TOPOLOGY_GROUPS = [
+  'cluster.x-k8s.io',
+  'bootstrap.cluster.x-k8s.io',
+  'controlplane.cluster.x-k8s.io',
+  'infrastructure.cluster.x-k8s.io',
+] as const
+
+function isCAPITopologyGroup(apiVersion?: string): boolean {
+  return CAPI_TOPOLOGY_GROUPS.some(group => isApiGroup(apiVersion, group))
+}
+
 // ============================================================================
 // RESOURCE CONTENT - Delegates to specific renderers
 // ============================================================================
@@ -658,11 +672,13 @@ export function ResourceRendererDispatch({
   // them, and `subscriptions` is Knative's as well. Adding a kind to KNOWN_KINDS
   // with a positively-gated render line and forgetting this list is what makes a
   // foreign CRD render a BLANK drawer rather than the generic one.
+  // CAPI's `machines` and `machinesets` need the same protection because another
+  // API group can publish either plural without inheriting CAPI presentation.
   const isGroupGatedKind =
     kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
     || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs'
-    || kind === 'policies' || kind === 'rollouts'
+    || kind === 'policies' || kind === 'rollouts' || kind === 'machines' || kind === 'machinesets'
   const isCNPGApiVersion = isApiGroup(data?.apiVersion, CNPG_GROUP)
   const groupGatedMatched =
     (kind === 'clusters' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'cluster.x-k8s.io')))
@@ -675,6 +691,8 @@ export function ResourceRendererDispatch({
       && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'messaging.knative.dev')))
     || (kind === 'policies' && isApiGroup(data?.apiVersion, 'kyverno.io'))
     || (kind === 'rollouts' && isArgoRolloutResource(data))
+    || ((kind === 'machines' || kind === 'machinesets')
+      && isApiGroup(data?.apiVersion, 'cluster.x-k8s.io'))
   const groupGatedFallthrough = isGroupGatedKind && !groupGatedMatched
 
   const calicoApiVersionMatched = isCalicoApiVersion(data?.apiVersion)
@@ -862,15 +880,15 @@ export function ResourceRendererDispatch({
         {kind === 'scheduledbackups' && isApiGroup(data?.apiVersion, CNPG_GROUP) && <CNPGScheduledBackupRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'poolers' && isApiGroup(data?.apiVersion, CNPG_GROUP) && <CNPGPoolerRenderer data={data} onNavigate={onNavigate} />}
         {/* Cluster API (CAPI) */}
-        {'topology.cluster.x-k8s.io/owned' in (data?.metadata?.labels ?? {}) && data?.apiVersion?.includes('cluster.x-k8s.io') && (
+        {'topology.cluster.x-k8s.io/owned' in (data?.metadata?.labels ?? {}) && isCAPITopologyGroup(data?.apiVersion) && (
           <AlertBanner
             variant="warning"
             title="Topology-controlled — this resource is managed by ClusterClass. Manual changes will be reconciled back."
           />
         )}
-        {kind === 'machines' && data?.apiVersion?.includes('cluster.x-k8s.io') && <CAPIMachineRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'machines' && isApiGroup(data?.apiVersion, 'cluster.x-k8s.io') && <CAPIMachineRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'machinedeployments' && <CAPIMachineDeploymentRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'machinesets' && data?.apiVersion?.includes('cluster.x-k8s.io') && <CAPIMachineSetRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'machinesets' && isApiGroup(data?.apiVersion, 'cluster.x-k8s.io') && <CAPIMachineSetRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'machinepools' && <CAPIMachinePoolRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'kubeadmcontrolplanes' && <CAPIKubeadmControlPlaneRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'clusterclasses' && <CAPIClusterClassRenderer data={data} />}
@@ -1187,9 +1205,9 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
     // Third-party `clusters` CRDs (KubeBlocks, Redis/Valkey) fall through to the
     // generic handling below instead of getting a fabricated PostgreSQL status.
   }
-  if (k === 'machines' && data.apiVersion?.includes('cluster.x-k8s.io')) return getMachineStatus(data)
+  if (k === 'machines' && isApiGroup(data.apiVersion, 'cluster.x-k8s.io')) return getMachineStatus(data)
   if (k === 'machinedeployments') return getMachineDeploymentStatus(data)
-  if (k === 'machinesets') return getMachineSetStatus(data)
+  if (k === 'machinesets' && isApiGroup(data.apiVersion, 'cluster.x-k8s.io')) return getMachineSetStatus(data)
   if (k === 'machinepools') return getMachinePoolStatus(data)
   if (k === 'kubeadmcontrolplanes') return getKCPStatus(data)
   if (k === 'clusterclasses') return getClusterClassStatus(data)

package/src/components/timeline/DiffViewer.test.tsx

@@ -0,0 +1,26 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { DiffViewer } from "./DiffViewer";
+
+describe("DiffViewer", () => {
+  it("labels added, removed, and changed values without relying on color", () => {
+    const html = renderToStaticMarkup(
+      <DiffViewer
+        diff={{
+          summary: "Three fields changed",
+          fields: [
+            { path: "spec.added", oldValue: null, newValue: "on" },
+            { path: "spec.removed", oldValue: "on", newValue: null },
+            { path: "spec.changed", oldValue: "v1", newValue: "v2" },
+          ],
+        }}
+      />,
+    );
+
+    expect(html).toContain("Added value:");
+    expect(html).toContain("Removed value:");
+    expect(html).toContain("Old value:");
+    expect(html).toContain("New value:");
+  });
+});

package/src/components/timeline/DiffViewer.tsx

@@ -16,7 +16,7 @@ export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: Di
   if (compact) {
     return (
       <div className="text-xs text-theme-text-secondary flex items-center gap-1">
-        <RefreshCw className="w-3 h-3" />
+        <RefreshCw className="w-3 h-3" aria-hidden />
         <span>{diff.summary || `${diff.fields.length} field(s) changed`}</span>
       </div>
     )
@@ -27,7 +27,7 @@ export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: Di
       {/* Summary */}
       {diff.summary && (
         <div className="text-sm font-medium text-theme-text-secondary flex items-center gap-2">
-          <RefreshCw className="w-4 h-4 text-blue-400" />
+          <RefreshCw className="w-4 h-4 text-blue-400" aria-hidden />
           {diff.summary}
         </div>
       )}
@@ -54,31 +54,35 @@ function FieldChangeRow({ field }: FieldChangeRowProps) {
   return (
     <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
       {/* Field path */}
-      <div className="text-xs font-mono text-theme-text-tertiary mb-1">{field.path}</div>
+      <div className="text-xs font-mono text-theme-text-tertiary mb-1 break-words [overflow-wrap:anywhere]">{field.path}</div>
 
       {/* Values */}
-      <div className="flex items-center gap-2 text-sm">
+      <div className="flex min-w-0 flex-wrap items-center gap-2 text-sm">
         {isAdded ? (
           <>
-            <Plus className="w-3.5 h-3.5 text-green-400 shrink-0" />
-            <span className="text-green-400">
+            <Plus className="w-3.5 h-3.5 text-green-400 shrink-0" aria-hidden />
+            <span className="sr-only">Added value: </span>
+            <span className="min-w-0 break-words text-green-400 [overflow-wrap:anywhere]">
               {formatValue(field.newValue)}
             </span>
           </>
         ) : isRemoved ? (
           <>
-            <Minus className="w-3.5 h-3.5 text-red-400 shrink-0" />
-            <span className="text-red-400 line-through">
+            <Minus className="w-3.5 h-3.5 text-red-400 shrink-0" aria-hidden />
+            <span className="sr-only">Removed value: </span>
+            <span className="min-w-0 break-words text-red-400 line-through [overflow-wrap:anywhere]">
               {formatValue(field.oldValue)}
             </span>
           </>
         ) : isModified ? (
           <>
-            <span className="text-red-400 line-through">
+            <span className="sr-only">Old value: </span>
+            <span className="min-w-0 break-words text-red-400 line-through [overflow-wrap:anywhere]">
               {formatValue(field.oldValue)}
             </span>
-            <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
-            <span className="text-green-400">
+            <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" aria-hidden />
+            <span className="sr-only">New value: </span>
+            <span className="min-w-0 break-words text-green-400 [overflow-wrap:anywhere]">
               {formatValue(field.newValue)}
             </span>
           </>
@@ -124,7 +128,7 @@ export const DiffBadge = memo(function DiffBadge({ diff }: DiffBadgeProps) {
         'bg-skyhook-500/10 text-skyhook-400 border border-skyhook-500/20'
       )}
     >
-      <RefreshCw className="w-3 h-3" />
+      <RefreshCw className="w-3 h-3" aria-hidden />
       {diff.summary}
     </span>
   )

package/src/components/topology/GroupNode.tsx

@@ -159,6 +159,10 @@ export const GroupNode = memo(function GroupNode({
     </div>
   )
 
+  // Chip and cardGrid roots must NOT counter-scale with zoom (group-header-scaled):
+  // the transform shrinks the visuals but the React Flow wrapper — the hitbox,
+  // drag target, and edge-attachment box — keeps the full ELK-computed size, so
+  // past zoom 0.7 the interactive area extends well outside the drawn box.
   // ── Level 1: Chip (compact collapsed card) ──
   if (displayLevel === 'chip') {
     // Size tier: 0-9 → 0, 10-99 → 1, 100-999 → 2, 1000+ → 3
@@ -178,7 +182,7 @@ export const GroupNode = memo(function GroupNode({
       <>
         {handles}
         <div
-          className="rounded-xl group-header-scaled overflow-hidden"
+          className="rounded-xl overflow-hidden"
           style={{ ...getBorderStyle(), ...getHeaderBgStyle(), padding: chipPadding, width: width || '100%', height: height || '100%' }}
         >
           {/* Header row: icon + name + count + status + controls */}
@@ -220,7 +224,7 @@ export const GroupNode = memo(function GroupNode({
       <>
         {handles}
         <div
-          className="rounded-xl overflow-hidden group-header-scaled"
+          className="rounded-xl overflow-hidden"
           style={{ ...getBorderStyle(), width: width || '100%', height: height || '100%' }}
         >
           {/* Header bar with level controls */}

package/src/components/topology/TopologyGraph.tsx

@@ -34,7 +34,7 @@ import { GroupNode } from './GroupNode'
 import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, isGroupEffectivelyCollapsed, type GroupDisplayLevel } from './layout'
-import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
+import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode, HealthStatus } from '../../types'
 import { pluralize } from '../../utils/pluralize'
 import { foldHash } from '../../utils/structure-hash'
 import { recordLayoutDuration, recordLayoutSkipped, recordStructureKeyDuration } from '../../perf'
@@ -408,6 +408,7 @@ export function TopologyGraph({
       phase: string
       restarts: number
       containers: number
+      status?: HealthStatus
     }>
 
     // Find edges pointing to this pod group
@@ -425,7 +426,11 @@ export function TopologyGraph({
         id: podId,
         kind: 'Pod',
         name: pod.name,
-        status: pod.phase === 'Running' ? 'healthy' : pod.phase === 'Pending' ? 'degraded' : 'unhealthy',
+        // The server computes pod health; pkg/health tracks a crash loop across
+        // the kubelet's Waiting->Running oscillation, which the phase alone
+        // hides — a crash-looping pod sits at Phase=Running. Deriving it here
+        // again would rebuild that logic in a second place and get it wrong.
+        status: pod.status ?? 'unknown',
         data: {
           ...podGroupNode.data,
           namespace: pod.namespace,

package/src/components/topology/topology.css

@@ -65,7 +65,10 @@
   box-shadow: none !important;
 }
 
-/* Group header scaling using CSS variable set by ViewportController */
+/* Group header scaling using CSS variable set by ViewportController.
+   Only safe on children INSIDE a group container (the expanded-group header row):
+   on a node's root content it desyncs the visible box from the React Flow
+   wrapper, whose full-size hitbox and edge anchors don't follow the transform. */
 .group-header-scaled {
   transform: scale(var(--group-header-scale, 1));
   transform-origin: top left;

package/src/components/ui/Collapse.tsx

@@ -37,10 +37,21 @@ export function Collapse({
   const render = !mountLazily || hasOpened
   return (
     <div
-      className={clsx('grid transition-[grid-template-rows] duration-200 ease-out', className)}
+      className={clsx(
+        'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
+        className,
+      )}
       style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
     >
-      <div className="overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
+      {/* `relative` is load-bearing. Collapsed content is still laid out at full
+          height and only clipped by `overflow-hidden` — but an absolutely-positioned
+          descendant (Tailwind's `sr-only` is position:absolute) resolves its
+          containing block ABOVE this wrapper, so the clip doesn't apply to it. It
+          then sits at its static position, hundreds of px below a collapsed section,
+          and extends the enclosing scroll container's scrollable overflow: the drawer
+          scrolls past its own content into blank space. Anchoring here puts those
+          boxes back inside the clip, so a collapsed section contributes nothing. */}
+      <div className="relative overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
     </div>
   )
 }
@@ -53,7 +64,11 @@ export function CollapseChevron({ open, className }: { open: boolean; className?
   return (
     <ChevronRight
       aria-hidden="true"
-      className={clsx('shrink-0 text-theme-text-tertiary transition-transform duration-200', open && 'rotate-90', className)}
+      className={clsx(
+        'shrink-0 text-theme-text-tertiary transition-transform duration-200 motion-reduce:transition-none',
+        open && 'rotate-90',
+        className,
+      )}
     />
   )
 }

package/src/components/ui/ConfirmDialog.test.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { ConfirmDialog } from './ConfirmDialog'
+
+vi.mock('./DialogPortal', () => ({
+  DialogPortal: ({ children }: { children: ReactNode }) => <>{children}</>,
+}))
+
+const props = {
+  open: true,
+  onClose: () => {},
+  onConfirm: () => {},
+  title: 'Share this investigation?',
+  message: 'Organization members can read and continue this investigation.',
+  confirmLabel: 'Share with organization',
+}
+
+describe('ConfirmDialog warning disclosure', () => {
+  it('can omit redundant boilerplate without removing the actual disclosure or actions', () => {
+    const html = renderToStaticMarkup(<ConfirmDialog {...props} variant="warning" showWarning={false} />)
+    expect(html).toContain(props.message)
+    expect(html).toContain(props.confirmLabel)
+    expect(html).toContain('Cancel')
+    expect(html).not.toContain('Please confirm you want to proceed')
+  })
+
+  it('preserves warning boilerplate by default for existing callers', () => {
+    expect(renderToStaticMarkup(<ConfirmDialog {...props} variant="warning" />))
+      .toContain('Please confirm you want to proceed with this action.')
+  })
+
+  it('preserves the irreversible-action warning for destructive callers', () => {
+    expect(renderToStaticMarkup(<ConfirmDialog {...props} />))
+      .toContain('This action cannot be undone.')
+  })
+})

package/src/components/ui/ConfirmDialog.tsx

@@ -18,6 +18,7 @@ interface ConfirmDialogProps {
   isLoading?: boolean
   isClosable?: boolean // Allow closing even when isLoading (e.g., for long-running ops the user can dismiss)
   confirmDisabled?: boolean // Block the confirm action while custom content is invalid (e.g., bad YAML)
+  showWarning?: boolean
   className?: string
   children?: ReactNode // Optional custom content (e.g., checkboxes)
 }
@@ -35,6 +36,7 @@ export function ConfirmDialog({
   isLoading = false,
   isClosable = false,
   confirmDisabled = false,
+  showWarning = true,
   className,
   children,
 }: ConfirmDialogProps) {
@@ -84,7 +86,7 @@ export function ConfirmDialog({
       )}
 
       {/* Warning message — hidden once the action is in progress */}
-      {!isLoading && !children && (
+      {showWarning && !isLoading && !children && (
         <div className="p-4">
           <div
             className={clsx(

package/src/components/ui/RowActionMenu.tsx

@@ -67,6 +67,10 @@ export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true
   const triggerSize = compact ? 'p-1' : 'p-1.5'
   const iconSize = compact ? 'h-4 w-4' : 'h-5 w-5'
 
+  // A trigger that opens an empty menu is a dead end - render nothing and let
+  // the cell collapse instead.
+  if (items.length === 0) return null
+
   return (
     <div ref={ref} className="relative inline-block">
       <button

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

@@ -101,7 +101,8 @@ export function Section({ title, icon: Icon, children, defaultExpanded = true, c
         className="grid transition-[grid-template-rows] duration-200 ease-out"
         style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
       >
-        <div className="overflow-hidden">
+        {/* `relative` is load-bearing — see the note in ui/Collapse.tsx. */}
+        <div className="relative overflow-hidden">
           <div className={contentClassName ?? 'pl-6'}>{children}</div>
         </div>
       </div>
@@ -131,7 +132,8 @@ export function ExpandableSection({ title, children, defaultExpanded = true }: E
         className="grid transition-[grid-template-rows] duration-200 ease-out"
         style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
       >
-        <div className="overflow-hidden">
+        {/* `relative` is load-bearing — see the note in ui/Collapse.tsx. */}
+        <div className="relative overflow-hidden">
           <div className="ml-5">{children}</div>
         </div>
       </div>
@@ -289,7 +291,7 @@ function isConditionHealthy(cond: { type?: string; status?: string }): boolean {
 
 export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown'
 
-function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
+export function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
   if (cond.status !== 'True' && cond.status !== 'False') return 'unknown'
   return isConditionHealthy(cond) ? 'ok' : 'fail'
 }

package/src/components/workload/WorkloadView.tsx

@@ -728,10 +728,11 @@ export function WorkloadView({
   // prominent "Diagnose" on a problem, a quiet icon when fine. Rendered via the host
   // slot (DiagnoseCustomization); standalone Radar injects it, Hub overrides it.
   const renderDiagnose = actionsBarProps?.renderDiagnose as
-    | ((ctx: { kind: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
+    | ((ctx: { kind: string; group?: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
     | undefined
   const diagnoseAction = renderDiagnose?.({
     kind: apiKind,
+    group,
     namespace,
     name,
     health: diagnoseHealthHint(apiKind, resource),
@@ -880,8 +881,15 @@ export function WorkloadView({
         {/* Success animation overlay */}
         {saveSuccess && <SaveSuccessAnimation />}
 
-        {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
-        <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
+        {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element.
+            `relative` is the backstop for absolutely-positioned descendants (Tailwind's
+            `sr-only` is position:absolute). The drawer frame keeps overflow visible at idle so
+            popovers aren't clipped, and the app's content column clips only horizontally, so one
+            that resolves its containing block above this scroller escapes into the DOCUMENT's
+            scrollable overflow — a second, page-level scrollbar. Anchoring here confines the
+            damage to this scroll body; ui/Collapse.tsx keeps them from escaping in the first
+            place. */}
+        <div className="relative flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
           {!resource ? (
             // Fill the drawer body so the loading logo centers in it, not in a
             // 128px box pinned to the top (matches the splash/PaneLoader centering).

package/src/types/gitops.ts

@@ -359,6 +359,57 @@ export function argoStatusToGitOpsStatus(status: ArgoAppStatus): GitOpsStatus {
   }
 }
 
+/**
+ * Maps an Argo CD ApplicationSet's conditions to a GitOpsStatus.
+ *
+ * An ApplicationSet generates Applications; it does not apply declared state
+ * to a cluster itself. Sync answers "is the declared state applied", so there
+ * is no honest sync value here and it stays Unknown - the generated
+ * Applications each carry their own.
+ *
+ * Health answers whether the generator is doing its job, which its conditions
+ * do report, in a vocabulary of their own (ErrorOccurred / ParametersGenerated
+ * / ResourcesUpToDate - never Ready):
+ * - ErrorOccurred=True      → Degraded, carrying the controller's message
+ * - ResourcesUpToDate=True  → Healthy
+ * - neither                 → Unknown (status not populated yet)
+ *
+ * The Resources view renders the same three conditions through
+ * getArgoApplicationSetStatus for its own badge vocabulary. The two read the
+ * same signals and must agree on which condition wins.
+ */
+export function argoApplicationSetConditionsToGitOpsStatus(
+  conditions: FluxCondition[]
+): GitOpsStatus {
+  const error = conditions.find(c => c.type === 'ErrorOccurred' && c.status === 'True')
+  if (error) {
+    return {
+      sync: 'Unknown',
+      health: 'Degraded',
+      message: error.message || 'Generation failed',
+      lastSyncTime: error.lastTransitionTime,
+      suspended: false,
+    }
+  }
+
+  const upToDate = conditions.find(c => c.type === 'ResourcesUpToDate')
+  if (upToDate?.status === 'True') {
+    return {
+      sync: 'Unknown',
+      health: 'Healthy',
+      lastSyncTime: upToDate.lastTransitionTime,
+      suspended: false,
+    }
+  }
+
+  return {
+    sync: 'Unknown',
+    health: 'Unknown',
+    message: 'Status cannot be determined',
+    suspended: false,
+  }
+}
+
 // ============================================================================
 // INVENTORY PARSERS
 // ============================================================================