@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/ui/monacoEditorFeatures.ts

@@ -0,0 +1,77 @@
+// Every editor feature monaco-editor's editor.main entry registers (context menu,
+// comments, multi-cursor, line operations, bracket matching, sticky scroll, quick
+// access, ...), without its language definitions and the TS/JSON/CSS/HTML language
+// services, whose workers this runtime does not ship. editor.api alone registers none
+// of these, so dropping this import silently strips them from every editor.
+import 'monaco-editor/editor/contrib/anchorSelect/browser/anchorSelect.js'
+import 'monaco-editor/editor/contrib/bracketMatching/browser/bracketMatching.js'
+import 'monaco-editor/editor/contrib/caretOperations/browser/transpose.js'
+import 'monaco-editor/editor/contrib/clipboard/browser/clipboard.js'
+import 'monaco-editor/editor/contrib/codeAction/browser/codeActionContributions.js'
+import 'monaco-editor/editor/browser/widget/codeEditor/codeEditorWidget.js'
+import 'monaco-editor/editor/contrib/codelens/browser/codelensController.js'
+import 'monaco-editor/editor/contrib/colorPicker/browser/colorPickerContribution.js'
+import 'monaco-editor/editor/contrib/comment/browser/comment.js'
+import 'monaco-editor/editor/contrib/contextmenu/browser/contextmenu.js'
+import 'monaco-editor/editor/contrib/cursorUndo/browser/cursorUndo.js'
+import 'monaco-editor/editor/browser/widget/diffEditor/diffEditor.contribution.js'
+import 'monaco-editor/editor/contrib/diffEditorBreadcrumbs/browser/contribution.js'
+import 'monaco-editor/editor/contrib/dnd/browser/dnd.js'
+import 'monaco-editor/editor/contrib/documentSymbols/browser/documentSymbols.js'
+import 'monaco-editor/editor/contrib/dropOrPasteInto/browser/dropIntoEditorContribution.js'
+import 'monaco-editor/features/find/register.js'
+import 'monaco-editor/editor/contrib/floatingMenu/browser/floatingMenu.contribution.js'
+import 'monaco-editor/editor/contrib/folding/browser/folding.js'
+import 'monaco-editor/editor/contrib/fontZoom/browser/fontZoom.js'
+import 'monaco-editor/editor/contrib/format/browser/formatActions.js'
+import 'monaco-editor/editor/contrib/gotoError/browser/gotoError.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js'
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition.js'
+import 'monaco-editor/editor/contrib/gpu/browser/gpuActions.js'
+import 'monaco-editor/editor/contrib/hover/browser/hoverContribution.js'
+import 'monaco-editor/editor/contrib/indentation/browser/indentation.js'
+import 'monaco-editor/editor/contrib/inlayHints/browser/inlayHintsContribution.js'
+import 'monaco-editor/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution.js'
+import 'monaco-editor/editor/contrib/inlineProgress/browser/inlineProgress.js'
+import 'monaco-editor/editor/contrib/inPlaceReplace/browser/inPlaceReplace.js'
+import 'monaco-editor/editor/contrib/insertFinalNewLine/browser/insertFinalNewLine.js'
+import 'monaco-editor/editor/standalone/browser/inspectTokens/inspectTokens.js'
+import 'monaco-editor/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js'
+import 'monaco-editor/editor/contrib/lineSelection/browser/lineSelection.js'
+import 'monaco-editor/editor/contrib/linesOperations/browser/linesOperations.js'
+import 'monaco-editor/editor/contrib/linkedEditing/browser/linkedEditing.js'
+import 'monaco-editor/editor/contrib/links/browser/links.js'
+import 'monaco-editor/editor/contrib/longLinesHelper/browser/longLinesHelper.js'
+import 'monaco-editor/editor/contrib/middleScroll/browser/middleScroll.contribution.js'
+import 'monaco-editor/editor/contrib/multicursor/browser/multicursor.js'
+import 'monaco-editor/editor/contrib/parameterHints/browser/parameterHints.js'
+import 'monaco-editor/editor/contrib/placeholderText/browser/placeholderText.contribution.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js'
+import 'monaco-editor/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js'
+import 'monaco-editor/editor/contrib/readOnlyMessage/browser/contribution.js'
+import 'monaco-editor/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js'
+import 'monaco-editor/editor/contrib/rename/browser/rename.js'
+import 'monaco-editor/editor/contrib/sectionHeaders/browser/sectionHeaders.js'
+import 'monaco-editor/editor/contrib/semanticTokens/browser/viewportSemanticTokens.js'
+import 'monaco-editor/editor/contrib/smartSelect/browser/smartSelect.js'
+import 'monaco-editor/editor/contrib/snippet/browser/snippetController2.js'
+import 'monaco-editor/editor/contrib/stickyScroll/browser/stickyScrollContribution.js'
+import 'monaco-editor/editor/contrib/suggest/browser/suggestInlineCompletions.js'
+import 'monaco-editor/editor/standalone/browser/toggleHighContrast/toggleHighContrast.js'
+import 'monaco-editor/editor/contrib/toggleTabFocusMode/browser/toggleTabFocusMode.js'
+import 'monaco-editor/editor/contrib/tokenization/browser/tokenization.js'
+import 'monaco-editor/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.js'
+import 'monaco-editor/editor/contrib/unusualLineTerminators/browser/unusualLineTerminators.js'
+import 'monaco-editor/editor/contrib/wordHighlighter/browser/wordHighlighter.js'
+import 'monaco-editor/editor/contrib/wordOperations/browser/wordOperations.js'
+import 'monaco-editor/editor/contrib/wordPartOperations/browser/wordPartOperations.js'
+import 'monaco-editor/editor/browser/coreCommands.js'
+import 'monaco-editor/editor/contrib/caretOperations/browser/caretOperations.js'
+import 'monaco-editor/editor/contrib/dropOrPasteInto/browser/copyPasteContribution.js'
+import 'monaco-editor/editor/contrib/find/browser/findController.js'
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/goToCommands.js'
+import 'monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus.js'
+import 'monaco-editor/editor/contrib/semanticTokens/browser/documentSemanticTokens.js'
+import 'monaco-editor/editor/contrib/suggest/browser/suggestController.js'
+import 'monaco-editor/editor/common/standaloneStrings.js'

package/src/components/ui/monacoRuntime.ts

@@ -1,28 +1,23 @@
 /// <reference path="../../monaco-deep.d.ts" />
 
 import { loader } from '@monaco-editor/react'
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import * as monaco from 'monaco-editor/editor/editor.api'
 // Tokenizers only — the set the YAML editor and the pod file viewer hand to
 // Monaco. JSON deliberately absent: its language lives in vs/language/json and
 // spawns a validation worker this runtime does not ship; viewers highlight
 // JSON with the YAML tokenizer, which covers it.
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
-import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
-import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
-import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
-import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution'
-import 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution'
-import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution'
-import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'
-import 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js'
-import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js'
-import 'monaco-editor/esm/vs/editor/contrib/gotoError/browser/gotoError.js'
-import 'monaco-editor/esm/vs/editor/contrib/hover/browser/hoverContribution.js'
-import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js'
+import 'monaco-editor/languages/definitions/yaml/register'
+import 'monaco-editor/languages/definitions/xml/register'
+import 'monaco-editor/languages/definitions/html/register'
+import 'monaco-editor/languages/definitions/css/register'
+import 'monaco-editor/languages/definitions/javascript/register'
+import 'monaco-editor/languages/definitions/typescript/register'
+import 'monaco-editor/languages/definitions/python/register'
+import 'monaco-editor/languages/definitions/shell/register'
+import 'monaco-editor/languages/definitions/markdown/register'
+import 'monaco-editor/languages/definitions/ini/register'
+import 'monaco-editor/languages/definitions/dockerfile/register'
+import './monacoEditorFeatures'
 
 type MonacoGlobal = typeof globalThis & {
   MonacoEnvironment?: {
@@ -37,7 +32,7 @@ export async function ensureMonaco() {
     ;(globalThis as MonacoGlobal).MonacoEnvironment = {
       getWorker() {
         return new Worker(
-          new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
+          new URL('monaco-editor/editor/editor.worker.js', import.meta.url),
           {
             name: 'radar-monaco-editor',
             type: 'module',

package/src/components/ui/status-tone.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { mapHealthToTone } from './status-tone'
+import { mapHealthToTone, worseTone } from './status-tone'
 
 // Inputs flow in from heterogeneous sources (Problems API, Audit findings,
 // multi-cluster aggregation). A regression here is a silent visual
@@ -51,3 +51,12 @@ describe('mapHealthToTone', () => {
     expect(mapHealthToTone('HIGH')).toBe('alert')
   })
 })
+
+describe('worseTone', () => {
+  it('never reads calmer than a part that could not be read', () => {
+    expect(worseTone('healthy', 'unknown')).toBe('unknown')
+    expect(worseTone('unknown', 'degraded')).toBe('degraded')
+    expect(worseTone('alert', 'unhealthy')).toBe('unhealthy')
+    expect(worseTone('neutral', 'healthy')).toBe('neutral')
+  })
+})

package/src/components/ui/status-tone.tsx

@@ -1,4 +1,5 @@
 import { type HealthLevel } from '../resources/resource-utils';
+import { TONE_TEXT_CLASS } from './severity-tone';
 
 // StatusDot + mapHealthToTone are typed helpers over the canonical OSS
 // status vocabulary defined in `packages/k8s-ui/src/theme/components.css`.
@@ -48,6 +49,34 @@ const DOT_CLASS: Record<StatusTone, string> = {
   unknown: 'bg-slate-400',
 };
 
+/** Solid fill for a tone, e.g. a bar or meter segment. */
+export function toneFillClass(tone: StatusTone): string {
+  return DOT_CLASS[tone]
+}
+
+// Text for a value read in a tone. Healthy reads as plain primary text: only
+// what needs a look is coloured.
+const TEXT_CLASS: Record<StatusTone, string> = {
+  healthy: 'text-theme-text-primary',
+  degraded: TONE_TEXT_CLASS.amber,
+  alert: TONE_TEXT_CLASS.orange,
+  unhealthy: TONE_TEXT_CLASS.red,
+  unknown: 'text-theme-text-tertiary',
+  neutral: 'text-theme-text-secondary',
+}
+
+export function toneTextClass(tone: StatusTone): string {
+  return TEXT_CLASS[tone]
+}
+
+// Unknown ranks above healthy: a combined reading never looks calmer than a
+// part that could not be read.
+const TONE_RANK: Record<StatusTone, number> = { healthy: 0, neutral: 1, unknown: 2, degraded: 3, alert: 4, unhealthy: 5 }
+
+export function worseTone(a: StatusTone, b: StatusTone): StatusTone {
+  return TONE_RANK[b] > TONE_RANK[a] ? b : a
+}
+
 // Normalize the variety of severity / health vocabularies that flow in
 // from APIs (Problems, Audit, multi-cluster aggregation endpoints) onto
 // a single tone. Inputs are case-insensitive. Returns 'unknown' for

package/src/components/workload/WorkloadView.deleted.test.tsx

@@ -56,3 +56,46 @@ describe('WorkloadView for an object deleted while open', () => {
     expect(html).toContain('Reachability')
   })
 })
+
+function renderHosted(resourceError: unknown, activeTab: string) {
+  return renderToStaticMarkup(
+    <WorkloadView
+      kind="clusters"
+      group="postgresql.cnpg.io"
+      namespace="db"
+      name="pg"
+      expanded
+      activeTab={activeTab as never}
+      onBack={vi.fn()}
+      resource={{ apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'pg', namespace: 'db' }, spec: {} }}
+      resourceError={resourceError}
+      renderSummary={() => 'Host summary action'}
+      extraTabs={[{ id: 'backups', label: 'Host backups', render: () => 'Host backups action' }]}
+      subheader="Host subheader action"
+      renderHeaderActions={() => 'Host header action'}
+      renderStatusBadge={() => 'Host phase'}
+      statusNote="Host verdict"
+      specTab={{ render: () => 'Host spec action' }}
+    />,
+  )
+}
+
+describe('a host page for an object deleted while open', () => {
+  it('drops the host summary, tabs, subheader and actions, which act on the live object', () => {
+    const gone = Object.assign(new Error('clusters "pg" not found'), { status: 404 })
+    for (const tab of ['overview', 'backups', 'spec']) {
+      const html = renderHosted(gone, tab)
+      expect(html).toContain('>Deleted<')
+      for (const host of ['Host summary action', 'Host backups', 'Host subheader action', 'Host header action', 'Host phase', 'Host verdict', 'Host spec action']) {
+        expect(html, `${tab}: ${host}`).not.toContain(host)
+      }
+    }
+  })
+
+  it('keeps them while the object exists', () => {
+    const html = renderHosted(Object.assign(new Error('boom'), { status: 500 }), 'overview')
+    for (const host of ['Host summary action', 'Host backups', 'Host subheader action', 'Host header action', 'Host phase', 'Host verdict']) {
+      expect(html).toContain(host)
+    }
+  })
+})

package/src/components/workload/WorkloadView.relationships.test.tsx

@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { WorkloadView } from './WorkloadView'
+
+const workload = {
+  apiVersion: 'apps/v1', kind: 'Deployment', metadata: { name: 'web', namespace: 'demo' },
+  spec: { replicas: 1, selector: { matchLabels: { app: 'web' } }, template: { metadata: { labels: { app: 'web' } }, spec: { containers: [{ name: 'app', image: 'nginx' }] } } },
+  status: { replicas: 1, availableReplicas: 1, readyReplicas: 1, updatedReplicas: 1 },
+}
+
+
+describe('workload monitoring projection', () => {
+  it('renders monitors in the related dependency card', () => {
+    const html = renderToStaticMarkup(<WorkloadView kind="deployments" namespace="demo" name="web" onBack={() => {}} resource={workload} relationships={{ monitors: [{ kind: 'PodMonitor', group: 'monitoring.coreos.com', namespace: 'demo', name: 'scraper' }] }} />)
+    expect(html).toContain('Monitored By')
+    expect(html).toContain('scraper')
+  })
+})
+
+
+describe('workload upstream projection', () => {
+  it('keeps other routing sources visible as entrypoints', () => {
+    const html = renderToStaticMarkup(<WorkloadView kind="deployments" namespace="demo" name="web" onBack={() => {}} resource={workload} relationships={{ routedFrom: [{ kind: 'Broker', group: 'eventing.knative.dev', namespace: 'demo', name: 'messages' }] }} />)
+    expect(html).toContain('Entry point resources')
+    expect(html).toContain('messages')
+  })
+})
+
+
+describe('workload staged-policy projection', () => {
+  it('shows staging without calling it an enforcing network policy', () => {
+    const html = renderToStaticMarkup(<WorkloadView kind="deployments" namespace="demo" name="web" onBack={() => {}} resource={workload} relationships={{ stagedPolicies: [{ kind: 'StagedNetworkPolicy', group: 'projectcalico.org', namespace: 'demo', name: 'preview' }] }} />)
+    expect(html).toContain('Staged Policies')
+    expect(html).toContain('preview')
+    expect(html).not.toContain('Network policies')
+  })
+})

package/src/components/workload/WorkloadView.spec.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { ReactNode } from 'react'
+import { expect, it, vi } from 'vitest'
+import { WorkloadView } from './WorkloadView'
+
+const renderer = vi.hoisted(() => vi.fn(({ mainFooter }: { mainFooter?: ReactNode }) => <div>Generic renderer and Conditions{mainFooter}</div>))
+vi.mock('../shared/ResourceRendererDispatch', async (original) => ({ ...await original<typeof import('../shared/ResourceRendererDispatch')>(), ResourceRendererDispatch: renderer }))
+
+const resource = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'pg', namespace: 'db', labels: { app: 'postgres' } }, spec: { instances: 2 }, status: {} }
+const props = { kind: 'clusters', namespace: 'db', name: 'pg', group: 'postgresql.cnpg.io', resource, onBack: () => {}, activeTab: 'spec' as const, renderSummary: () => <div>Composed Overview</div>, renderOverviewExtra: () => <div>Audit Findings</div> }
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+it('replaces the entire expanded spec body, including its generic sections and lead', () => {
+  renderer.mockClear()
+  const html = renderToStaticMarkup(<WorkloadView {...props} specTab={{ label: 'Configuration', lead: <div>Old lead</div>, render: () => <div>Purpose-built configuration</div> }} />)
+  expect(html).toContain('Purpose-built configuration')
+  expect(html).toContain('Configuration')
+  for (const text of ['Generic renderer', 'Conditions', 'Audit Findings', 'Labels (1)', 'Metadata', 'Recent Events', 'Old lead']) expect(html).not.toContain(text)
+  expect(renderer).not.toHaveBeenCalled()
+})
+
+it('preserves the generic spec body and lead when no replacement is supplied', () => {
+  const html = renderToStaticMarkup(<WorkloadView {...props} specTab={{ label: 'Settings', lead: <div>Existing lead</div> }} />)
+  for (const text of ['Settings', 'Existing lead', 'Generic renderer and Conditions', 'Audit Findings']) expect(html).toContain(text)
+})
+
+it('does not use the spec replacement in a drawer or on Overview', () => {
+  const replacement = vi.fn(() => <div>Purpose-built configuration</div>)
+  let html = renderToStaticMarkup(<WorkloadView {...props} expanded={false} specTab={{ render: replacement }} />)
+  expect(html).toContain('Composed Overview')
+  html = renderToStaticMarkup(<WorkloadView {...props} activeTab="overview" specTab={{ render: replacement }} />)
+  expect(html).toContain('Composed Overview')
+  expect(replacement).not.toHaveBeenCalled()
+})
+
+it('still opens the original Spec & status in a drawer when a page replacement is provided', () => {
+  const replacement = vi.fn(() => <div>Purpose-built configuration</div>)
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  act(() => root.render(<WorkloadView {...props} expanded={false} specTab={{ label: 'Configuration', render: replacement }} />))
+  const tab = [...host.querySelectorAll<HTMLButtonElement>('[role="tab"]')].find((b) => b.textContent === 'Spec & status')!
+  act(() => tab.click())
+  expect(tab.getAttribute('aria-selected')).toBe('true')
+  expect(host.textContent).toContain('Generic renderer and Conditions')
+  expect(host.textContent).toContain('Audit Findings')
+  expect(replacement).not.toHaveBeenCalled()
+  act(() => root.unmount())
+})
+
+it('lets a host render the reported phase while preserving the default derived badge', () => {
+  const instance = { ...resource, status: { phase: 'Cluster in healthy state', readyInstances: 1 } }
+  for (const expanded of [true, false]) {
+    const html = renderToStaticMarkup(<WorkloadView {...props} expanded={expanded} resource={instance} renderStatusBadge={(r) => <span>Phase: {r.status.phase}</span>} />)
+    expect(html).toContain('Phase: Cluster in healthy state')
+    expect(html).not.toMatch(/badge[^>]*>Degraded/)
+    expect(renderToStaticMarkup(<WorkloadView {...props} expanded={expanded} resource={instance} />)).toMatch(/badge[^>]*>Degraded/)
+  }
+})
+
+it('waits for the resource before asking a host for its status badge', () => {
+  const badge = vi.fn((r: any) => <span>Phase: {r.status.phase}</span>)
+  for (const expanded of [true, false]) {
+    expect(() => renderToStaticMarkup(<WorkloadView {...props} expanded={expanded} resource={undefined} renderStatusBadge={badge} />)).not.toThrow()
+  }
+  expect(badge).not.toHaveBeenCalled()
+})
+
+it.each(['ScheduledBackup', 'Database', 'Publication', 'ClusterImageCatalog', 'Deployment', 'Pod', 'Pooler'])('keeps %s drawer utilities apart from identity and object actions', (kind) => {
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  const name = 'a-long-object-name-that-needs-the-full-drawer-width'
+  act(() => root.render(<WorkloadView {...props} name={name} resource={{ ...resource, kind }} expanded={false} onExpand={() => {}} onClose={() => {}} renderStatusBadge={() => <span>Reported status</span>} renderHeaderActions={() => <button>Object action</button>} />))
+  const expand = host.querySelector('[aria-label="Open full view"]')!
+  const utilityRow = expand.parentElement!.parentElement!
+  expect(utilityRow.classList.contains('shrink-0')).toBe(true)
+  expect(utilityRow.classList.contains('flex-nowrap')).toBe(true)
+  expect(utilityRow.querySelector('[aria-label="Refresh"]')).not.toBeNull()
+  expect(utilityRow.querySelector('[aria-label="Close"]')).not.toBeNull()
+  expect(utilityRow.textContent).not.toContain('Object action')
+  // The name has its own line under the badges and controls, so a long one gets the drawer's full width.
+  const title = host.querySelector('h2')!
+  expect(title.textContent).toBe(name)
+  const topRow = utilityRow.parentElement!
+  expect(topRow.contains(title)).toBe(false)
+  expect(topRow.textContent).toContain('Reported status')
+  const action = [...host.querySelectorAll('button')].find((b) => b.textContent === 'Object action')!
+  expect(topRow.contains(action)).toBe(false)
+  expect(title.parentElement!.contains(action)).toBe(false)
+  act(() => root.unmount())
+})
+
+it('preserves Diagnose before the resource loads while deferring resource-dependent actions', () => {
+  const header = vi.fn(() => <button>Resource action</button>)
+  const html = renderToStaticMarkup(<WorkloadView {...props} resource={undefined} expanded={false} renderHeaderActions={header} actionsBarProps={{ renderDiagnose: () => <button>Diagnose this object</button> }} />)
+  expect(html).toContain('Diagnose this object')
+  expect(header).not.toHaveBeenCalled()
+})
+
+it.each(['Deployment', 'Pod', 'ScheduledBackup', 'Database', 'Pooler'])('groups Diagnose with %s drawer utilities and omits empty object actions', (kind) => {
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  const header = vi.fn(() => null)
+  const group = kind === 'Deployment' ? 'apps' : kind === 'Pod' ? '' : 'postgresql.cnpg.io'
+  const data = { ...resource, kind, apiVersion: group ? `${group}/v1` : 'v1' }
+  act(() => root.render(<WorkloadView {...props} kind={`${kind.toLowerCase()}s`} group={group} resource={data} expanded={false} onExpand={() => {}} onClose={() => {}} renderHeaderActions={header} actionsBarProps={{ renderDiagnose: () => <button>Diagnose</button> }} />))
+  const utility = host.querySelector('[aria-label="Open full view"]')!.parentElement!.parentElement!
+  expect(utility.textContent).toContain('Diagnose')
+  expect(host.querySelector('[data-action-group=object]')!.matches(':empty')).toBe(true)
+  expect(header).toHaveBeenCalledTimes(1)
+  act(() => root.render(<WorkloadView {...props} kind={`${kind.toLowerCase()}s`} group={group} resource={data} expanded renderHeaderActions={header} actionsBarProps={{ renderDiagnose: () => <button>Diagnose</button> }} />))
+  const refresh = host.querySelector('[aria-label="Refresh"]')!
+  expect(refresh.parentElement!.parentElement!.textContent).toContain('Diagnose')
+  act(() => root.unmount())
+})
+
+it('hides the object action band when a host action component has no content yet', () => {
+  const EmptyAction = () => null
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(<WorkloadView {...props} expanded={false} renderHeaderActions={() => <EmptyAction />} />))
+  const row = host.querySelector('[data-action-group=object]')!
+  expect(row.matches(':empty')).toBe(true)
+  expect(row.classList.contains('empty:hidden')).toBe(true)
+  act(() => root.render(<WorkloadView {...props} expanded={false} renderHeaderActions={() => <button>Run now</button>} />))
+  expect(row.matches(':empty')).toBe(false)
+  act(() => root.unmount())
+})
+
+it.each(['Deployment', 'Pod', 'Pooler', 'ScheduledBackup'])('groups %s drawer actions with utilities in one toolbar', (kind) => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const apiKind = kind === 'Deployment' ? 'deployments' : kind === 'Pod' ? 'pods' : kind === 'Pooler' ? 'poolers' : 'scheduledbackups'
+  const group = kind === 'Deployment' ? 'apps' : kind === 'Pod' ? '' : 'postgresql.cnpg.io'
+  const data = { ...resource, kind, apiVersion: group ? `${group}/v1` : 'v1', spec: { containers: [{ name: 'postgres', image: 'postgres' }] }, status: { phase: 'Running' } }
+  act(() => root.render(<WorkloadView {...props} kind={apiKind} group={group} expanded={false} resource={data} actionsBarProps={{ canExec: true, onOpenTerminal: () => {}, onRestart: () => {} }} renderHeaderActions={() => kind === 'ScheduledBackup' ? <><div><button>Suspend</button><button>Run now</button><button>Edit schedule</button></div><div>Run blocked: no backup destination</div></> : <button>{kind === 'Pooler' ? 'Pause' : 'Object action'}</button>} />))
+  const object = host.querySelector('[data-action-group=object]')!
+  const utility = host.querySelector('[data-action-group=utility]')!
+  expect(object.parentElement).toBe(utility.parentElement)
+  expect(object.parentElement!.classList.contains('flex-wrap')).toBe(true)
+  expect(utility.classList.contains('ml-auto')).toBe(true)
+  expect(object.querySelector('button')).not.toBeNull()
+  expect(utility.textContent).toContain('YAML')
+  if (kind === 'Pod') expect(object.textContent).toContain('Terminal')
+  if (kind === 'Deployment') expect(object.textContent).toContain('Restart')
+  if (kind === 'ScheduledBackup') { expect(object.querySelectorAll('button')).toHaveLength(3); expect(object.textContent).toContain('Run blocked: no backup destination') }
+  act(() => root.unmount())
+})