@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/problems/problems.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ProblemMeta, WorkspaceProblemCallout, ProblemList, problemOriginLabel, type WorkspaceProblem } from './problems'
+
+const details = (kind: string) => ({
+  id: 'p',
+  tone: 'degraded' as const,
+  category: 'availability',
+  title: 'Something needs a look',
+  subject: { kind, group: 'example.io', namespace: 'ns', name: 'child-1' },
+})
+const problem = (kind: string): Extract<WorkspaceProblem, { source: 'issue' }> => ({ ...details(kind), source: 'issue' })
+
+describe('ProblemMeta', () => {
+  it('names the subject only when it is not the workspace root kind', () => {
+    expect(renderToStaticMarkup(<ProblemMeta problem={problem('Backup')} rootKind="Cluster" />)).toContain('Backup')
+    expect(renderToStaticMarkup(<ProblemMeta problem={problem('Cluster')} rootKind="Cluster" />)).not.toContain('child-1')
+  })
+})
+
+describe('problemOriginLabel', () => {
+  it('says who measured a measurement, and never calls an issue generic', () => {
+    expect(problemOriginLabel({ ...details('Cluster'), source: 'measurement', measuredBy: 'Prometheus' }).label).toBe('Measured by Prometheus')
+    expect(problemOriginLabel(problem('Cluster')).label).toBe('Detected by Radar')
+  })
+})
+
+it('keeps original scheduler evidence behind a closed disclosure in callouts and lists', () => {
+  const p = { ...problem('Pod'), detail: 'both nodes have reached their Pod limit', rawDetailLabel: 'Scheduler message', rawDetail: '0/2 nodes are available: 2 Too many pods.' }
+  for (const node of [<WorkspaceProblemCallout problem={p} rootKind="Cluster" />, <ProblemList problems={[p]} rootKind="Cluster" />]) {
+    const html = renderToStaticMarkup(node)
+    expect(html).toContain(p.detail)
+    expect(html).toContain(p.rawDetail)
+    expect(html).toContain('Scheduler message')
+    expect(html).toContain('aria-expanded="false"')
+  }
+  expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={problem('Pod')} rootKind="Cluster" />)).not.toContain('Scheduler message')
+})
+
+it('uses a generic label for raw evidence from another controller', () => {
+  const p = { ...problem('Deployment'), rawDetail: 'Progress deadline exceeded.' }
+  expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={p} rootKind="Application" />)).toContain('Original evidence')
+})
+
+it('keeps source-specific provenance fields exclusive in the public type', () => {
+  type Details = ReturnType<typeof details>
+  expectTypeOf<Details & { source: 'issue'; measuredBy: string }>().not.toMatchTypeOf<WorkspaceProblem>()
+  expectTypeOf<Details & { source: 'measurement'; origin: { label: string } }>().not.toMatchTypeOf<WorkspaceProblem>()
+  expectTypeOf<Details & { source: 'audit'; origin: { label: string } }>().not.toMatchTypeOf<WorkspaceProblem>()
+})
+
+it('preserves alert and unknown tones in callouts and compact lists', () => {
+  for (const tone of ['alert', 'unknown'] as const) {
+    const p = { ...problem('Pod'), tone }
+    const callout = renderToStaticMarkup(<WorkspaceProblemCallout problem={p} rootKind="Cluster" />)
+    expect(callout).toContain(`status-${tone}`)
+    const list = renderToStaticMarkup(<ProblemList problems={[p]} rootKind="Cluster" />)
+    expect(list).toContain(tone === 'alert' ? 'bg-orange-500' : 'bg-slate-400')
+    expect(list).toContain(tone === 'alert' ? 'text-orange-600' : 'text-theme-text-tertiary')
+  }
+  type HealthyProblem = Omit<ReturnType<typeof details>, 'tone'> & { source: 'issue'; tone: 'healthy' }
+  expectTypeOf<HealthyProblem>().not.toMatchTypeOf<WorkspaceProblem>()
+})

package/src/components/problems/problems.tsx

@@ -0,0 +1,165 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { HealthLevel } from '../resources/resource-utils'
+import type { ResourceRef } from '../../types/core'
+import { healthToSeverity } from '../../utils/badge-colors'
+import { StatusDot, toneTextClass } from '../ui/status-tone'
+import { Tooltip } from '../ui/Tooltip'
+import { AlertBanner } from '../ui/drawer-components'
+import { FoldSection } from '../ui/FoldSection'
+import { RefLink, type NavigateToRef } from '../ui/RefLink'
+
+/** Where a problem's evidence comes from, in user terms. */
+export interface ProblemOrigin {
+  label: string
+  /** The exact field or condition, shown on hover. */
+  detail?: string
+}
+
+/**
+ * Something about a workspace object that needs a look. `C` is the
+ * integration's own category set.
+ */
+export interface ProblemDetails<C extends string = string> {
+  /** Stable identity for keys. */
+  id: string
+  category: C
+  title: string
+  detail?: string
+  rawDetail?: string
+  rawDetailLabel?: string
+  /** The object the evidence is about: the workspace's root object or one of its children. */
+  subject: ResourceRef & { group: string }
+  /** A shorter headline for tight places (a fleet cell); `title` stays the precise one. */
+  shortTitle?: string
+  /** Other objects the same problem is about, e.g. earlier runs that failed the same way. */
+  alsoAbout?: Pick<ResourceRef, 'kind' | 'name'>[]
+}
+
+export type ProblemProvenance =
+  | { source: 'issue'; origin?: ProblemOrigin; measuredBy?: never; sourceDetail?: never }
+  | { source: 'audit'; sourceDetail?: string; origin?: never; measuredBy?: never }
+  | { source: 'measurement'; measuredBy?: string; sourceDetail?: string; origin?: never }
+
+export type WorkspaceProblem<C extends string = string> = ProblemDetails<C> & ProblemProvenance & { tone: Exclude<HealthLevel, 'healthy'> }
+
+/** A problem's provenance label: where its evidence comes from, never a generic "Radar issue". */
+export function problemOriginLabel(problem: WorkspaceProblem): ProblemOrigin {
+  switch (problem.source) {
+    case 'audit':
+      return { label: 'Best-practice check', detail: problem.sourceDetail }
+    case 'measurement':
+      return { label: problem.measuredBy ? `Measured by ${problem.measuredBy}` : 'Measured', detail: problem.sourceDetail }
+  }
+  return problem.origin ?? { label: 'Detected by Radar' }
+}
+
+/**
+ * How a host opens a problem on its Issues page. Supplied by context so every
+ * summary and drawer gets the link without threading a prop through each.
+ */
+export const OpenIssueContext = createContext<((problem: WorkspaceProblem) => void) | undefined>(undefined)
+
+export function ProblemMeta({
+  problem,
+  rootKind,
+  onNavigate,
+  subjectIsSelf,
+  children,
+}: {
+  problem: WorkspaceProblem
+  /** The workspace's root kind: a problem about another kind names its subject. */
+  rootKind: string
+  onNavigate?: NavigateToRef
+  subjectIsSelf?: boolean
+  children?: ReactNode
+}) {
+  const openIssue = useContext(OpenIssueContext)
+  const origin = problemOriginLabel(problem)
+  const aboutChild = !subjectIsSelf && problem.subject.kind !== rootKind
+  return (
+    <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-theme-text-tertiary">
+      {aboutChild && (
+        <span>
+          {problem.subject.kind}{' '}
+          <RefLink refTo={problem.subject} onNavigate={onNavigate} mono />
+          {problem.alsoAbout && problem.alsoAbout.length > 0 && ' '}
+          {problem.alsoAbout && problem.alsoAbout.length > 0 && (
+            <Tooltip
+              content={
+                <ul>
+                  {problem.alsoAbout.map((o) => (
+                    <li key={`${o.kind}/${o.name}`} className="font-mono">
+                      {o.kind} {o.name}
+                    </li>
+                  ))}
+                </ul>
+              }
+            >
+              <span>and {problem.alsoAbout.length} more</span>
+            </Tooltip>
+          )}
+        </span>
+      )}
+      <Tooltip content={origin.detail} disabled={!origin.detail}>
+        <span>{origin.label}</span>
+      </Tooltip>
+      {openIssue && problem.source === 'issue' && (
+        <button type="button" onClick={() => openIssue(problem)} className="whitespace-nowrap text-accent-text hover:underline">
+          See in Issues →
+        </button>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function WorkspaceProblemCallout({
+  problem,
+  rootKind,
+  more,
+  onNavigate,
+  action,
+  subjectIsSelf,
+}: {
+  problem: WorkspaceProblem
+  rootKind: string
+  more?: ReactNode
+  onNavigate?: NavigateToRef
+  action?: ReactNode
+  /** The callout sits on the subject's own page, so linking to it would loop. */
+  subjectIsSelf?: boolean
+}) {
+  const severity = healthToSeverity(problem.tone)
+  const variant = severity === 'neutral' ? 'unknown' : severity
+  return (
+    <AlertBanner variant={variant} title={problem.title} message={problem.detail}>
+      {problem.rawDetail && <FoldSection title={problem.rawDetailLabel ?? "Original evidence"} summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{problem.rawDetail}</div></FoldSection>}
+      <ProblemMeta problem={problem} rootKind={rootKind} onNavigate={onNavigate} subjectIsSelf={subjectIsSelf}>
+        {action}
+        {more}
+      </ProblemMeta>
+    </AlertBanner>
+  )
+}
+
+/** The problems a callout does not show, as a compact list with the callout's tone, title and source. */
+export function ProblemList({ problems, rootKind, onNavigate }: { problems: WorkspaceProblem[]; rootKind: string; onNavigate?: NavigateToRef }) {
+  return (
+    <ul className="space-y-2">
+      {problems.map((p) => (
+        <li key={p.id} className="flex items-start gap-2 text-sm">
+          <span className="mt-1.5 shrink-0">
+            <StatusDot tone={p.tone} size="sm" />
+          </span>
+          <div className="min-w-0">
+            <div className={clsx('font-medium break-words', toneTextClass(p.tone))}>{p.title}</div>
+            {p.detail && <div className="text-xs text-theme-text-secondary break-words">{p.detail}</div>}
+            {p.rawDetail && <FoldSection title={p.rawDetailLabel ?? "Original evidence"} summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{p.rawDetail}</div></FoldSection>}
+            <ProblemMeta problem={p} rootKind={rootKind} onNavigate={onNavigate} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/components/resources/ActiveFilterBar.test.tsx

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ActiveFilterBar, type ActiveFilterBarProps } from './ActiveFilterBar'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+let root: Root | null = null
+let element: HTMLDivElement
+
+async function render(overrides: Partial<ActiveFilterBarProps> = {}) {
+  const props: ActiveFilterBarProps = {
+    columnFilters: {},
+    columnFilterExcludes: {},
+    problemFilters: [],
+    labelSelector: '',
+    onClearColumn: vi.fn(),
+    onClearProblems: vi.fn(),
+    onClearLabels: vi.fn(),
+    ...overrides,
+  }
+  element = document.createElement('div')
+  root = createRoot(element)
+  await act(async () => root!.render(<ActiveFilterBar {...props} />))
+  return props
+}
+
+function buttonWithText(text: string): HTMLButtonElement {
+  const button = [...element.querySelectorAll('button')].find((b) => b.textContent?.includes(text))
+  if (!button) throw new Error(`no button containing "${text}"`)
+  return button
+}
+
+afterEach(async () => {
+  await act(async () => root?.unmount())
+  root = null
+})
+
+describe('ActiveFilterBar', () => {
+  it('renders nothing without active filters or a restore', async () => {
+    await render({ columnFilters: { status: [] } })
+    expect(element.innerHTML).toBe('')
+  })
+
+  it('renders one chip per active filter, marking excluded columns', async () => {
+    await render({
+      columnFilters: { status: ['Running', 'Pending'], node: ['n1'], empty: [] },
+      columnFilterExcludes: { node: true },
+      problemFilters: ['crashloop'],
+      labelSelector: 'app=nginx',
+    })
+    expect(element.querySelectorAll('button')).toHaveLength(4)
+    expect(element.textContent).toContain('status: Running, Pending')
+    expect(element.textContent).toContain('node: not n1')
+    expect(element.textContent).toContain('Problems: crashloop')
+    expect(element.textContent).toContain('app=nginx')
+    expect(element.textContent).not.toContain('restored')
+  })
+
+  it('calls the matching clear handler when a chip is clicked', async () => {
+    const props = await render({ columnFilters: { status: ['Running'] }, problemFilters: ['oom'], labelSelector: 'tier=web' })
+    await act(async () => buttonWithText('status:').click())
+    await act(async () => buttonWithText('Problems:').click())
+    await act(async () => buttonWithText('tier=web').click())
+    expect(props.onClearColumn).toHaveBeenCalledWith('status')
+    expect(props.onClearProblems).toHaveBeenCalledOnce()
+    expect(props.onClearLabels).toHaveBeenCalledOnce()
+  })
+
+  it('shows the restored line only when restored, with Clear calling onClearAll', async () => {
+    const onClearAll = vi.fn()
+    await render({ restored: true, onClearAll, columnFilters: { status: ['Running'] } })
+    expect(element.textContent).toContain('Filters restored from your last visit')
+    await act(async () => buttonWithText('Clear').click())
+    expect(onClearAll).toHaveBeenCalledOnce()
+  })
+})

package/src/components/resources/ActiveFilterBar.tsx

@@ -0,0 +1,86 @@
+import { clsx } from 'clsx'
+import { AlertTriangle, History, ListFilter, Tag, X } from 'lucide-react'
+
+export interface ActiveFilterBarProps {
+  columnFilters: Record<string, string[]>
+  columnFilterExcludes: Record<string, boolean>
+  problemFilters: string[]
+  labelSelector: string
+  onClearColumn: (key: string) => void
+  onClearProblems: () => void
+  onClearLabels: () => void
+  restored?: boolean
+  onClearAll?: () => void
+  className?: string
+}
+
+export function ActiveFilterBar({
+  columnFilters,
+  columnFilterExcludes,
+  problemFilters,
+  labelSelector,
+  onClearColumn,
+  onClearProblems,
+  onClearLabels,
+  restored = false,
+  onClearAll,
+  className,
+}: ActiveFilterBarProps) {
+  const activeColEntries = Object.entries(columnFilters).filter(([, vals]) => vals.length > 0)
+  const hasChips = activeColEntries.length > 0 || problemFilters.length > 0 || !!labelSelector
+  if (!hasChips && !restored) return null
+
+  return (
+    <div className={clsx('flex flex-wrap items-center gap-1.5', className)}>
+      {restored && (
+        <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+          <History className="w-3 h-3" />
+          <span>Filters restored from your last visit.</span>
+          {onClearAll && (
+            <button
+              type="button"
+              onClick={onClearAll}
+              className="text-theme-text-secondary hover:text-theme-text-primary underline underline-offset-2"
+            >
+              Clear
+            </button>
+          )}
+        </span>
+      )}
+      {activeColEntries.map(([key, vals]) => (
+        <button
+          type="button"
+          key={key}
+          onClick={() => onClearColumn(key)}
+          className="flex items-center gap-1 px-2 py-1 text-xs selection selection-text rounded-md hover:selection-strong transition-colors"
+        >
+          <ListFilter className="w-3 h-3" />
+          <span>{key}: {columnFilterExcludes[key] ? 'not ' : ''}{vals.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      ))}
+      {problemFilters.length > 0 && (
+        <button
+          type="button"
+          onClick={onClearProblems}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-red-500/15 text-red-700 dark:text-red-300 rounded-md hover:bg-red-500/25 transition-colors"
+        >
+          <AlertTriangle className="w-3 h-3" />
+          <span>Problems: {problemFilters.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+      {labelSelector && (
+        <button
+          type="button"
+          onClick={onClearLabels}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-green-500/15 text-green-700 dark:text-green-300 rounded-md hover:bg-green-500/25 transition-colors"
+        >
+          <Tag className="w-3 h-3" />
+          <span>{labelSelector}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/resources/ResourcesSidebar.keyboard.test.tsx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ResourcesSidebar } from './ResourcesSidebar'
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+window.matchMedia = vi.fn().mockReturnValue({ matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove() })
+it('navigates Favorites, Views and grouped kinds in their visible order', () => {
+  Element.prototype.scrollIntoView = vi.fn()
+  const view = vi.fn(), kind = vi.fn()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  const cluster = { group: 'postgresql.cnpg.io', version: 'v1', kind: 'Cluster', name: 'clusters', namespaced: true, isCrd: true, verbs: ['list'] }
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={kind} apiResources={[cluster]} resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }} pinned={[{ name: 'pods', kind: 'Pod', group: '' }]} categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Clusters view', onSelect: view }], defaultKindsCollapsed: true } }} />))
+  const category = [...host.querySelectorAll('button')].find((b) => b.textContent?.includes('CloudNativePG'))!
+  if (category.getAttribute('aria-expanded') !== 'true') act(() => category.click())
+  const input = host.querySelector('input')!
+  const key = (name: string) => act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: name, bubbles: true })))
+  key('ArrowDown'); key('ArrowDown'); key('Enter')
+  expect(view).toHaveBeenCalledTimes(1)
+  expect(kind).not.toHaveBeenCalled()
+  act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Resource kinds')!.click())
+  key('ArrowDown'); key('ArrowDown'); key('ArrowDown'); key('Enter')
+  expect(kind).toHaveBeenCalledWith(expect.objectContaining({ name: 'clusters', group: 'postgresql.cnpg.io' }))
+})
+it('opens a matching View with Enter when search finds no kind', () => {
+  Element.prototype.scrollIntoView = vi.fn()
+  const view = vi.fn()
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={[{ group: 'postgresql.cnpg.io', version: 'v1', kind: 'Cluster', name: 'clusters', namespaced: true, isCrd: true, verbs: ['list'] }]} resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }} categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'operator', label: 'Operator', onSelect: view }], defaultKindsCollapsed: true } }} />))
+  const input = host.querySelector('input')!
+  act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'operator')
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  expect(host.textContent).toContain('Operator')
+  expect(host.textContent).not.toContain('>Cluster<')
+  act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+  expect(view).toHaveBeenCalledTimes(1)
+})

package/src/components/resources/ResourcesSidebar.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import type { APIResource } from '../../types'
-import { rawCRDGroupTitle, resourceMatchesSidebarFilter, ResourcesSidebar } from './ResourcesSidebar'
+import { rawCRDGroupTitle, resourceMatchesSidebarFilter, ResourcesSidebar, sidebarDestinationsMatching } from './ResourcesSidebar'
 
 const sqlInstance: APIResource = {
   group: 'sql.cnrm.cloud.google.com',
@@ -144,7 +144,7 @@ describe('ResourcesSidebar category workspaces', () => {
         }}
       />
     )
-    expect(html).toContain('Workspace')
+    expect(html).toContain('Views')
     expect(html).toContain('Overview')
     expect(html).toContain('pg-orders')
     expect(html).toContain('Counts for namespace payments')
@@ -153,6 +153,21 @@ describe('ResourcesSidebar category workspaces', () => {
     expect(html).not.toContain('selection-strong selection-text">Pod')
   })
 
+  it('marks a count taken over partly readable data as a lower bound, and never shows its zero as none', () => {
+    const render = (count: number) =>
+      renderToString(
+        <ResourcesSidebar
+          selectedKind={null}
+          onSelectedKindChange={() => {}}
+          apiResources={[cnpgCluster]}
+          resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }}
+          categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Overview', count, countLowerBound: true, onSelect: () => {} }] } }}
+        />,
+      )
+    expect(render(2)).toMatch(/≥(<!-- -->)?2/)
+    expect(render(0)).toContain('–')
+  })
+
   it('keeps a workspace category visible when it has no resources', () => {
     const html = renderToString(
       <ResourcesSidebar
@@ -181,3 +196,22 @@ describe('ResourcesSidebar category workspaces', () => {
     expect(html).toContain('barmancloud.cnpg.io')
   })
 })
+
+describe('sidebarDestinationsMatching', () => {
+  const views = ['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'].map((label) => ({ id: label, label, onSelect: () => {} }))
+  const resources = [{ group: 'postgresql.cnpg.io' }, { group: 'barmancloud.cnpg.io' }]
+  const labels = (term: string) => sidebarDestinationsMatching('CloudNativePG', resources, views, term).map((d) => d.label)
+
+  it('keeps every view when the term names the category or one of its API groups', () => {
+    expect(labels('cloud')).toEqual(['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'])
+    expect(labels('cnpg')).toEqual(['Clusters', 'Backups', 'Declarations', 'Pooling', 'Operator'])
+  })
+  it('keeps the views whose label matches otherwise', () => {
+    expect(labels('backup')).toEqual(['Backups'])
+    expect(labels('declar')).toEqual(['Declarations'])
+    expect(labels('deployment')).toEqual([])
+  })
+  it('keeps every view without a term', () => {
+    expect(labels('  ')).toHaveLength(5)
+  })
+})