@skyhook-io/k8s-ui 1.14.7 → 1.14.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.7",
+  "version": "1.14.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/tree/GitOpsTreeGraph.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSubtitle } from './GitOpsTreeGraph'
+import type { GitOpsTreeNode } from '../../../types'
+
+function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
+  return {
+    id: 'node-1',
+    ref: { kind: 'Service', name: 'podinfo', namespace: 'demo-flux' },
+    role: 'declared',
+    tool: 'fluxcd',
+    ...extras,
+  }
+}
+
+describe('getSubtitle', () => {
+  it('shows what a healthy resource exposes, not that it is healthy', () => {
+    // The status dot and the left border stripe already paint a healthy node
+    // green, so the word adds nothing and the ports are the only thing here the
+    // rest of the card can't say.
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Service', value: 'ClusterIP :9898 +1 more' }],
+    }))).toBe('Synced • ClusterIP :9898 +1 more')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Pod', name: 'podinfo-6b4f8c9d7-xk2mv', namespace: 'demo-flux' },
+      role: 'generated',
+      health: 'Healthy',
+      info: [{ name: 'Phase', value: 'Running' }],
+    }))).toBe('Running')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Ingress', name: 'podinfo', namespace: 'demo-flux' },
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Host', value: 'podinfo.example.com' }],
+    }))).toBe('Synced • podinfo.example.com')
+  })
+
+  it('keeps every health value the stripe colour cannot identify on its own', () => {
+    // Progressing and Suspended are both yellow, Degraded and Missing both red.
+    // Drop the word and the two become indistinguishable.
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Progressing',
+      info: [{ name: 'Service', value: 'LoadBalancer :80' }],
+    }))).toBe('Synced • Progressing • LoadBalancer :80')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Deployment', name: 'podinfo', namespace: 'demo-flux' },
+      sync: 'OutOfSync',
+      health: 'Degraded',
+      info: [{ name: 'Ready', value: '2/3' }],
+    }))).toBe('OutOfSync • Degraded • 2/3')
+
+    expect(getSubtitle(node({
+      health: 'Unknown',
+      info: [{ name: 'Service', value: 'ClusterIP :80' }],
+    }))).toBe('Unknown • ClusterIP :80')
+  })
+
+  it('still reads as Healthy when there is nothing to say instead', () => {
+    // Kinds infoFromTopology doesn't cover, and remote Argo destinations, reach
+    // the tree with no info line at all. Those must not lose their status line.
+    expect(getSubtitle(node({ sync: 'Synced', health: 'Healthy' }))).toBe('Synced • Healthy')
+    expect(getSubtitle(node({ health: 'Healthy' }))).toBe('Healthy')
+    expect(getSubtitle(node({ sync: 'OutOfSync', health: 'Missing' }))).toBe('OutOfSync • Missing')
+  })
+
+  it('lets lifecycle and grouping own the line outright', () => {
+    expect(getSubtitle(node({
+      role: 'group',
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Phase', value: 'Running' }],
+    }))).toBe('Click to expand')
+
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Service', value: 'ClusterIP :9898 +1 more' }],
+      data: { deletionTimestamp: '2026-09-11T13:09:43Z' },
+    }))).toBe('Pending deletion')
+  })
+
+  it('falls back to the namespace only when the node states nothing else', () => {
+    expect(getSubtitle(node())).toBe('demo-flux')
+    expect(getSubtitle(node({ ref: { kind: 'ClusterRole', name: 'podinfo', namespace: '' } }))).toBe('')
+  })
+})

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -25,6 +25,7 @@ import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
 import { radarHealthNote } from '../health-provenance'
+import { servicePortsTooltip, type ServicePortEntry } from '../../topology/K8sResourceNode'
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
@@ -592,6 +593,15 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   // (ReplicaSets, Pods) are always Radar's read; marking each would be
   // noise.
   const radarNote = node.role === 'declared' ? radarHealthNote(node) : ''
+  // A Service's subtitle names its first port and counts the rest, so without a
+  // hover the ones behind "+1 more" can't be reached from the graph at all. Same
+  // affordance the topology graph's Service node carries, same renderer. Stood
+  // down when the card already explains an unhealthy verdict: that reason is
+  // what the hover should say, and only one tooltip is ever visible anyway.
+  const portsTooltip = kind === 'Service' && !cause
+    ? servicePortsTooltip((node.data?.ports as ServicePortEntry[] | undefined) ?? [])
+    : null
+  const subtitle = getSubtitle(node)
 
   const card = (
       <div
@@ -654,7 +664,13 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
               own page". The subtitle text alone wasn't enough — users were
               treating the count as an immutable fact rather than a button. */}
           <div className="mt-0.5 flex items-center gap-1 text-xs text-theme-text-secondary">
-            <span className="truncate">{getSubtitle(node)}</span>
+            {portsTooltip ? (
+              <Tooltip content={portsTooltip} position="bottom" wrapperClassName="min-w-0">
+                <span className="cursor-help truncate">{subtitle}</span>
+              </Tooltip>
+            ) : (
+              <span className="truncate">{subtitle}</span>
+            )}
             {(node.role === 'group' || gitopsTool) && <ChevronRight className="ml-auto h-3 w-3 shrink-0 text-theme-text-tertiary" />}
           </div>
           {chips.length > 0 && (
@@ -755,7 +771,21 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   return chips
 }
 
-function getSubtitle(node: GitOpsTreeNode): string {
+// The subtitle is the node's one line of prose, and sync, health and the
+// backend's info line all want it. It can't be won on precedence: the backend
+// derives a health for every node it can build an info line for, so a rule that
+// only reaches info when health is absent never reaches it at all, and a
+// Service's ports, a Pod's phase and an Ingress's host stay invisible.
+//
+// So all three share the line, and "Healthy" is the part that yields when the
+// space is contested. It is the one health value the node already states without
+// words — healthToTopology maps it onto the green status dot and the green left
+// stripe, one value to one colour. Progressing and Suspended are both yellow and
+// Degraded and Missing are both red, so for those the word is the only thing
+// that tells them apart and it keeps its place. "Healthy" gives up the line only
+// when there is a concrete info line to spend it on, so a node with nothing to
+// say instead still reads as Healthy.
+export function getSubtitle(node: GitOpsTreeNode): string {
   if (node.role === 'group') {
     // Action-oriented copy invites the click; "collapsed" alone reads as
     // a state description, not an affordance.
@@ -764,10 +794,10 @@ function getSubtitle(node: GitOpsTreeNode): string {
   if (isNodeTerminating(node)) {
     return 'Pending deletion'
   }
-  if (node.sync || node.health) {
-    return [node.sync, node.health].filter(Boolean).join(' • ')
-  }
-  if (node.info?.[0]?.value) return node.info[0].value
+  const info = node.info?.[0]?.value
+  const health = node.health === 'Healthy' && info ? undefined : node.health
+  const parts = [node.sync, health, info].filter(Boolean)
+  if (parts.length > 0) return parts.join(' • ')
   return node.ref.namespace || ''
 }
 

package/src/components/topology/K8sResourceNode.tsx

@@ -173,8 +173,10 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
 // a multi-port Service's other ports are visible without opening the detail
 // page. Formatting (hide targetPort when it matches port) mirrors
 // ServicePortCards in ServiceRenderer.tsx so a Service's ports read the same
-// whether glanced at in the graph or opened in the full resource view.
-function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode | null {
+// whether glanced at in the graph or opened in the full resource view. Exported
+// because the GitOps resource tree's Service node summarises ports the same way
+// and needs the same hover to reach the ones the summary drops.
+export function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode | null {
   if (ports.length < 2) return null;
   return (
     <div className="max-w-xs space-y-0.5">

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

@@ -1,10 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { readFileSync } from 'fs'
-import { join } from 'path'
 import { Collapse, CollapseChevron, disclosurePanelId } from './Collapse'
 import {
-  CSS_EASE,
   DURATION_DISCLOSURE,
   TRANSITION_CHEVRON,
   TRANSITION_DISCLOSURE,
@@ -62,13 +59,3 @@ describe('CollapseChevron', () => {
     expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
   })
 })
-
-describe('motion tokens stay in step with the stylesheet', () => {
-  it('.issue-details-motion mirrors DURATION_DISCLOSURE and CSS_EASE', () => {
-    const css = readFileSync(join(__dirname, '../../theme/components.css'), 'utf8')
-    const m = css.match(/\.issue-details-motion \{[^}]*transition: grid-template-rows (\d+)ms ([^;]+);/)
-    expect(m, 'legacy class present').not.toBeNull()
-    expect(Number(m![1])).toBe(DURATION_DISCLOSURE)
-    expect(m![2].replace(/\s+/g, '')).toBe(CSS_EASE.replace(/\s+/g, ''))
-  })
-})

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

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { Disclosure } from './Disclosure'
+
+describe('Disclosure', () => {
+  it('wires the header to the panel and keeps closed content mounted', () => {
+    const html = renderToString(<Disclosure summary="More">hidden-copy</Disclosure>)
+    expect(html).toContain('aria-expanded="false"')
+    const id = html.match(/aria-controls="([^"]+)"/)?.[1]
+    expect(id).toBeTruthy()
+    expect(html).toContain(`id="${id}"`)
+    expect(html).toContain('hidden-copy')
+    expect(html).toMatch(/inert=""|inert>/)
+  })
+
+  it('honours defaultOpen and a controlled open', () => {
+    expect(renderToString(<Disclosure summary="s" defaultOpen>x</Disclosure>)).toContain('aria-expanded="true"')
+    expect(renderToString(<Disclosure summary="s" open onOpenChange={() => {}}>x</Disclosure>)).toContain('aria-expanded="true"')
+    expect(renderToString(<Disclosure summary="s" open={false} defaultOpen>x</Disclosure>)).toContain('aria-expanded="false"')
+  })
+
+  it('caret follows the header color unless pinned', () => {
+    expect(renderToString(<Disclosure summary="s">x</Disclosure>)).not.toContain('text-theme-text-tertiary')
+    expect(renderToString(<Disclosure summary="s" inheritColor={false}>x</Disclosure>)).toContain('text-theme-text-tertiary')
+  })
+})

package/src/components/ui/Disclosure.tsx

@@ -0,0 +1,69 @@
+import { useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
+
+// Disclosure — in-flow expand/collapse with the app-standard motion; the
+// replacement for native <details>/<summary> on primary paths. Native details
+// snaps open with no transition and its marker ignores the caret language;
+// this pairs a button header (aria-expanded / aria-controls via useDisclosure)
+// with CollapseChevron and an animated Collapse panel. Shared by Radar and
+// Radar Cloud so both open alike.
+//
+// Content stays mounted while closed (Collapse's default), exactly like native
+// details — server-rendered markup and in-page search still see the collapsed
+// copy. Sites whose panel polls or holds an editor should use
+// <Collapse unmountOnExit> directly instead.
+//
+// Uncontrolled by default (`defaultOpen`); pass `open` + `onOpenChange` to
+// control it from above (a form that keys other state on the disclosure).
+// The chevron takes currentColor from the header by default: a summary's
+// caret should read as part of its text, including on hover.
+export function Disclosure({
+  summary,
+  children,
+  className,
+  summaryClassName,
+  chevronClassName = 'h-3.5 w-3.5',
+  inheritColor = true,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+}: {
+  summary: ReactNode
+  children: ReactNode
+  /** Classes for the wrapper around header and panel. */
+  className?: string
+  /** Classes for the header button (layout, size and color of the summary). */
+  summaryClassName?: string
+  chevronClassName?: string
+  /** False pins the caret to the tertiary grey regardless of the header's color. */
+  inheritColor?: boolean
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
+  const open = controlledOpen ?? uncontrolledOpen
+  const disclosure = useDisclosure(open)
+  const toggle = () => {
+    const next = !open
+    if (controlledOpen === undefined) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        {...disclosure.buttonProps}
+        onClick={toggle}
+        className={clsx('flex w-full cursor-pointer select-none items-center gap-1.5 text-left', summaryClassName)}
+      >
+        <CollapseChevron open={open} inheritColor={inheritColor} className={chevronClassName} />
+        {summary}
+      </button>
+      <Collapse open={open} id={disclosure.panelId}>
+        {children}
+      </Collapse>
+    </div>
+  )
+}

package/src/components/ui/index.ts

@@ -27,6 +27,7 @@ export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'
 export * from './drawer-components'
 export { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from './Collapse'
+export { Disclosure } from './Disclosure'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { InClusterConsentDialog } from './InClusterConsentDialog'

package/src/theme/components.css

@@ -142,28 +142,6 @@
     padding: 0.75rem;
   }
 
-  /* ── ISSUE ROW DETAILS ── */
-
-  /* Legacy: prefer <Collapse unmountOnExit> (ui/Collapse.tsx). Kept for any
-     straggler; timing mirrors DURATION_DISCLOSURE / CSS_EASE in
-     utils/animation.ts — the source-hygiene test keeps them equal. */
-  .issue-details-motion {
-    display: grid;
-    grid-template-rows: 0fr;
-    overflow: hidden;
-    transition: grid-template-rows 300ms cubic-bezier(0.32, 0.72, 0, 1);
-  }
-
-  .issue-details-motion-open {
-    grid-template-rows: 1fr;
-  }
-
-  @starting-style {
-    .issue-details-motion-open {
-      grid-template-rows: 0fr;
-    }
-  }
-
   /* ── SUBTLE BORDERS ── */
 
   .table-divide-subtle > * + * {