@skyhook-io/k8s-ui 1.13.4 → 1.14.1

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/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/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

@@ -40,7 +40,15 @@ export function Collapse({
       className={clsx('grid transition-[grid-template-rows] duration-200 ease-out', 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>
   )
 }

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/SelectMenu.tsx

@@ -12,15 +12,21 @@ export function SelectMenu({
   options,
   onChange,
   ariaLabel,
+  ariaDescribedBy,
   className,
   searchPlaceholder,
+  disabled = false,
+  id,
 }: {
   value: string
   options: SelectMenuOption[]
   onChange: (value: string) => void
   ariaLabel: string
+  ariaDescribedBy?: string
   className?: string
   searchPlaceholder?: string
+  disabled?: boolean
+  id?: string
 }) {
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
@@ -109,8 +115,10 @@ export function SelectMenu({
     >
       <button
         ref={triggerRef}
+        id={id}
         type="button"
         aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
         aria-haspopup="listbox"
         aria-expanded={open}
         aria-controls={open ? listboxId : undefined}
@@ -125,7 +133,8 @@ export function SelectMenu({
           }
           setOpen(!open)
         }}
-        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover"
+        disabled={disabled}
+        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-theme-elevated"
       >
         <span className="truncate">{selected?.label}</span>
         <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />

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>

package/src/components/workload/WorkloadView.tsx

@@ -880,8 +880,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
 // ============================================================================