@skyhook-io/k8s-ui 1.14.0 → 1.14.1

package/src/components/resources/column-header-width.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { getColumnMinWidth, type Column } from './ResourcesView'
+
+// The header row is px-4 with a `truncate` label, under table-layout:fixed with
+// explicit <col> widths. A column narrower than its own heading clips to
+// "ADDRESS T…" and — because only the Name column flexes — stays clipped at
+// 1280, 1920 and 2560 alike. These pin the floor that stops that.
+//
+// Reference measurements taken in the browser against the real header font
+// (DM Sans 500, 12px, uppercase, tracking-wide), on kind-radar-kyverno-demo:
+//   RECLAIM       52.7px  ADDRESSES     69.6px
+//   EXPANSION     67.5px  ADDRESS TYPE  87.7px
+const MEASURED = {
+  Reclaim: 52.7,
+  Expansion: 67.5,
+  Addresses: 69.6,
+  'Address Type': 87.7,
+}
+
+const col = (over: Partial<Column> & Pick<Column, 'key' | 'label'>): Column => over
+
+describe('getColumnMinWidth header floor', () => {
+  it.each(Object.entries(MEASURED))(
+    'reserves at least the measured width of %s plus padding',
+    (label, measuredPx) => {
+      const got = getColumnMinWidth(col({ key: 'x', label, width: 'w-16' }))
+      // 32px is the px-4 on both sides; the estimate must never land under the
+      // width the browser actually renders, or the label clips again.
+      expect(got).toBeGreaterThanOrEqual(Math.ceil(measuredPx + 32))
+    },
+  )
+
+  it('leaves a column that already fits its label untouched', () => {
+    // "Age" needs ~25px + 32 padding + 20 for its sort icon = well under w-24.
+    expect(getColumnMinWidth(col({ key: 'age', label: 'Age', width: 'w-24' }))).toBe(96)
+  })
+
+  it('raises a column that is narrower than its label', () => {
+    // w-20 is 80px; "Address Type" cannot fit in 80 - 32 = 48px.
+    expect(getColumnMinWidth(col({ key: 'addressType', label: 'Address Type', width: 'w-20' })))
+      .toBeGreaterThan(80)
+  })
+
+  it('reserves extra room for the sort icon on sortable columns', () => {
+    const sortable = getColumnMinWidth(col({ key: 'status', label: 'Wide Label Here', width: 'w-16' }))
+    const plain = getColumnMinWidth(col({ key: 'notSortable', label: 'Wide Label Here', width: 'w-16' }))
+    expect(sortable).toBeGreaterThan(plain)
+  })
+
+  it('still honours an explicit minWidth override', () => {
+    expect(getColumnMinWidth(col({ key: 'x', label: 'Address Type', width: 'w-20', minWidth: 300 }))).toBe(300)
+  })
+
+  it('keeps the flexible Name column at its wider default', () => {
+    expect(getColumnMinWidth(col({ key: 'name', label: 'Name' }))).toBe(200)
+  })
+
+  // Printer columns (uncurated CRDs) and host-injected custom columns are
+  // sortable via their own getSortValue, not by being in the built-in key list —
+  // the header renders a sort icon for them, so the floor has to reserve it.
+  it('reserves the sort icon for a printer/custom column that carries getSortValue', () => {
+    const c = col({ key: 'printer:Phase', label: 'Reconcile Phase', width: 'w-24' })
+    const extras = new Map([[c.key, { ...c, render: () => null, getSortValue: () => '' }]]) as any
+    expect(getColumnMinWidth(c, extras)).toBeGreaterThan(getColumnMinWidth(c))
+  })
+
+  it('caps the floor so one long vendor label cannot size a column off screen', () => {
+    const monstrous = 'A'.repeat(200)
+    expect(getColumnMinWidth(col({ key: 'printer:x', label: monstrous, width: 'w-24' }))).toBe(320)
+  })
+
+  it('never returns less than the declared width, even past the cap', () => {
+    expect(getColumnMinWidth(col({ key: 'printer:x', label: 'A'.repeat(200), width: 'w-96' }))).toBe(384)
+  })
+})

package/src/components/resources/rules-column-width.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+// Parsed from the source rather than exported, matching
+// curated-column-ownership.test.ts: this asserts a property of the data as it
+// is written, and an export would let the two drift.
+const SRC = readFileSync(join(__dirname, 'ResourcesView.tsx'), 'utf8')
+
+function columnSetBody(key: string): string {
+  const start = SRC.match(new RegExp(`^  ${key}: \\[`, 'm'))
+  if (!start || start.index === undefined) throw new Error(`${key} not found in KNOWN_COLUMNS`)
+  const open = SRC.indexOf('[', start.index)
+  let depth = 1
+  let i = open + 1
+  while (depth > 0) {
+    if (SRC[i] === '[') depth++
+    else if (SRC[i] === ']') depth--
+    i++
+  }
+  return SRC.slice(open + 1, i)
+}
+
+// The header cell is px-4, so w-16 (64px) leaves 31px for the label while
+// uppercase "RULES" needs ~37px — it clips to "RUL…" unconditionally, with no
+// sort or filter button involved: 'rules' is in SKIP_FILTER_COLUMNS and is not
+// in the sortable-key list, so neither affordance ever renders on it. w-20
+// (80px) leaves 47px.
+describe('Rules column width', () => {
+  const kinds = ['kyvernopolicies', 'clusterpolicies', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes']
+
+  it.each(kinds)('%s Rules column is at least w-20', (kind) => {
+    const rules = columnSetBody(kind).match(/\{ key: 'rules'.*\}/)
+    expect(rules, `${kind} has no rules column`).not.toBeNull()
+    const width = rules![0].match(/width: 'w-(\d+)'/)
+    expect(width, `${kind} rules column has no fixed w-* width`).not.toBeNull()
+    // Compared numerically, not pinned to w-20, so the wider table-width pass
+    // tracked in #1583 can widen these without tripping a test that only
+    // claims a floor.
+    expect(Number(width![1])).toBeGreaterThanOrEqual(20)
+  })
+})

package/src/components/shared/ResourceRendererDispatch.test.tsx

@@ -651,6 +651,81 @@ describe('colliding plurals — near-match API groups', () => {
   })
 })
 
+describe('CAPI Machine kind collisions', () => {
+  const foreignApiVersion = 'extension.cluster.x-k8s.io/v1'
+
+  it.each([
+    ['machines', 'Machine', 'Role'],
+    ['machinesets', 'MachineSet', 'Delete Policy'],
+  ])('routes a foreign %s CRD through the generic renderer only', (plural, kind, capiMarker) => {
+    const html = renderKind(plural, {
+      apiVersion: foreignApiVersion,
+      kind,
+      metadata: {
+        name: 'foreign',
+        namespace: 'default',
+        labels: { 'topology.cluster.x-k8s.io/owned': '' },
+      },
+      spec: { collisionProbe: COLLISION_PROBE },
+      status: { phase: 'provisioned' },
+    }, 'default')
+
+    expect(html).toContain(COLLISION_PROBE)
+    expect(html).not.toContain(capiMarker)
+    expect(html).not.toContain('Topology-controlled')
+    expect(getResourceStatus(plural, {
+      apiVersion: foreignApiVersion,
+      status: { phase: 'provisioned' },
+    })?.text).toBe('provisioned')
+  })
+
+  it.each([
+    ['machines', 'Machine', 'Role'],
+    ['machinesets', 'MachineSet', 'Delete Policy'],
+  ])('keeps exact-group CAPI %s resources on the dedicated path', (plural, kind, capiMarker) => {
+    const html = renderKind(plural, {
+      apiVersion: 'cluster.x-k8s.io/v1beta1',
+      kind,
+      metadata: {
+        name: 'capi',
+        namespace: 'default',
+        labels: { 'topology.cluster.x-k8s.io/owned': '' },
+      },
+      spec: { collisionProbe: COLLISION_PROBE },
+      status: { phase: 'provisioned' },
+    }, 'default')
+
+    expect(html).toContain(capiMarker)
+    expect(html).toContain('Topology-controlled')
+    expect(html).not.toContain(COLLISION_PROBE)
+    expect(getResourceStatus(plural, {
+      apiVersion: 'cluster.x-k8s.io/v1beta1',
+      status: { phase: 'provisioned' },
+    })?.text).toBe('Provisioned')
+  })
+
+  it.each([
+    ['kubeadmcontrolplanes', 'KubeadmControlPlane', 'controlplane.cluster.x-k8s.io/v1beta1'],
+    ['awsmanagedcontrolplanes', 'AWSManagedControlPlane', 'controlplane.cluster.x-k8s.io/v1beta2'],
+    ['awsmanagedmachinepools', 'AWSManagedMachinePool', 'infrastructure.cluster.x-k8s.io/v1beta2'],
+    ['awsmachines', 'AWSMachine', 'infrastructure.cluster.x-k8s.io/v1beta2'],
+  ])('keeps the topology-owned warning for %s', (plural, kind, apiVersion) => {
+    const html = renderKind(plural, {
+      apiVersion,
+      kind,
+      metadata: {
+        name: 'topology-owned',
+        namespace: 'default',
+        labels: { 'topology.cluster.x-k8s.io/owned': '' },
+      },
+      spec: {},
+      status: {},
+    }, 'default')
+
+    expect(html).toContain('Topology-controlled')
+  })
+})
+
 describe('shared plurals — the status path collides too', () => {
   // The renderer and the status badge are two separate switches over the same
   // plural, and fixing one leaves the other reading a foreign CRD's conditions

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