@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/CNPGView.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
-import { ResourcesSidebar, type SelectedKindInfo } from '@skyhook-io/k8s-ui'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useLocation, useSearchParams } from 'react-router-dom'
+import { DialogPortal, ResourcesSidebar, type SelectedKindInfo } from '@skyhook-io/k8s-ui'
+import { PanelLeft, X } from 'lucide-react'
 import type { SelectedResource } from '../../types'
 import { useAPIResources } from '../../api/apiResources'
 import { usePinnedKinds } from '../../hooks/useFavorites'
@@ -11,9 +12,14 @@ import { CNPGDeclarations } from './CNPGDeclarations'
 import { CNPGPooling } from './CNPGPooling'
 import { CNPGOperator } from './CNPGOperator'
 import { CNPGScreenGate } from './shared'
+import { CNPGCreateClusterDialog } from './CNPGCreateClusterDialog'
 import { CNPGDetailPage } from './CNPGDetailPage'
-import { decodeDrawerTrail, encodeDrawerTrail, parseCNPGRoute, sameResource } from './routes'
+import { parseCNPGRoute } from './routes'
 import { useCNPGFleet, useCNPGSidebarWorkspace } from './useCNPGSidebarWorkspace'
+import { decodeDrawerTrail, encodeDrawerTrail, sameSelectedResource } from '../../utils/drawer-trail'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { useCNPGScreenParams } from './useCNPGScreenParams'
+import { useMediaQuery } from '../../hooks/useMediaQuery'
 
 interface CNPGViewProps {
   namespaces: string[]
@@ -33,9 +39,14 @@ interface CNPGViewProps {
  */
 export function CNPGView({ namespaces, selectedResource, onOpenResource, onCloseResource, onClearNamespaces }: CNPGViewProps) {
   const location = useLocation()
-  const navigate = useNavigate()
+  const navigate = useCNPGNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
   const route = parseCNPGRoute(location.pathname)
+  const laptop = useMediaQuery('(max-width: 1300px)')
+  const narrow = useMediaQuery('(max-width: 1100px)')
+  const compactNavigation = narrow || (laptop && !!route.detail)
+  const [navigationOpen, setNavigationOpen] = useState(false)
+  useEffect(() => setNavigationOpen(false), [location.pathname, location.search, compactNavigation])
   const { data: apiResources } = useAPIResources()
   const { data: counts } = useResourceCounts(namespaces)
   const { pinned, togglePin, isPinned } = usePinnedKinds()
@@ -59,7 +70,7 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
   useEffect(() => {
     if (targetKey !== (lastSynced.current ?? '')) {
       lastSynced.current = targetKey
-      if (drawerTarget && !sameResource(drawerTarget, selectedResource)) onOpenResource(drawerTarget)
+      if (drawerTarget && !sameSelectedResource(drawerTarget, selectedResource)) onOpenResource(drawerTarget)
       else if (!drawerTarget && selectedResource) onCloseResource()
       return
     }
@@ -69,7 +80,7 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
       if (!selectedResource) {
         params.delete('drawer')
       } else {
-        const idx = trail.findIndex((r) => sameResource(r, selectedResource))
+        const idx = trail.findIndex((r) => sameSelectedResource(r, selectedResource))
         const next = idx >= 0 ? trail.slice(0, idx + 1) : [...trail, selectedResource]
         params.set('drawer', encodeDrawerTrail(next))
       }
@@ -86,17 +97,8 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
     [searchParams, setSearchParams, location.state],
   )
 
-  const setParams = useCallback(
-    (update: Record<string, string | null>) => {
-      const params = new URLSearchParams(searchParams)
-      for (const [k, v] of Object.entries(update)) {
-        if (v === null || v === '') params.delete(k)
-        else params.set(k, v)
-      }
-      setSearchParams(params, { replace: true, state: location.state })
-    },
-    [searchParams, setSearchParams, location.state],
-  )
+  const [, setParams] = useCNPGScreenParams()
+  const [creating, setCreating] = useState(false)
 
   const selectKind = useCallback(
     (kind: SelectedKindInfo) => {
@@ -105,9 +107,7 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
     [navigate],
   )
 
-  return (
-    <div className="flex h-full min-h-0 w-full">
-      <ResourcesSidebar
+  const sidebar = <ResourcesSidebar
         selectedKind={null}
         onSelectedKindChange={selectKind}
         apiResources={apiResources}
@@ -118,8 +118,17 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
         togglePin={togglePin}
         isPinned={(kind: string, group?: string) => isPinned(kind, group ?? '')}
         categoryWorkspaces={sidebarWorkspace}
+        className={compactNavigation ? '!w-full !border-r-0' : undefined}
       />
+  return (
+    <div className="flex h-full min-h-0 w-full">
+      {!compactNavigation && sidebar}
+      <DialogPortal open={navigationOpen && compactNavigation} onClose={() => setNavigationOpen(false)} ariaLabel="Resource navigation" className="flex h-[min(80vh,44rem)] w-full max-w-md flex-col overflow-hidden">
+        <div className="flex items-center justify-between border-b border-theme-border px-4 py-3"><h2 className="font-medium text-theme-text-primary">Resources</h2><button type="button" aria-label="Close resource navigation" onClick={() => setNavigationOpen(false)} className="rounded p-1 text-theme-text-secondary hover:bg-theme-hover"><X className="h-4 w-4" /></button></div>
+        <div className="flex min-h-0 flex-1">{sidebar}</div>
+      </DialogPortal>
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-theme-base">
+        {compactNavigation && <div className="border-b border-theme-border px-5 py-2"><button type="button" aria-haspopup="dialog" aria-expanded={navigationOpen} onClick={() => setNavigationOpen(true)} className="btn-secondary inline-flex items-center gap-1.5 px-2.5 py-1 text-xs"><PanelLeft className="h-3.5 w-3.5" />Resources</button></div>}
         {route.detail ? (
           <CNPGDetailPage target={route.detail} namespaces={namespaces} onOpenResource={onOpenResource} />
         ) : (
@@ -134,6 +143,7 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
               onInspect: inspect,
               inspected: drawerTarget,
               onClearNamespaces,
+              onCreate: () => setCreating(true),
             }
             switch (route.screen) {
               case 'protection':
@@ -151,6 +161,9 @@ export function CNPGView({ namespaces, selectedResource, onOpenResource, onClose
         </CNPGScreenGate>
         )}
       </div>
+      {creating && (
+        <CNPGCreateClusterDialog namespaces={namespaces} onClose={() => setCreating(false)} onCreated={inspect} />
+      )}
     </div>
   )
 }

package/src/components/cnpg/CNPGWorkspace.compatibility.test.tsx

@@ -0,0 +1,90 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { CNPG_WORKSPACE_KEYS, ResourcesSidebar } from '@skyhook-io/k8s-ui'
+import { useCNPGFleet, useCNPGSidebarWorkspace } from './useCNPGSidebarWorkspace'
+import { radarFeatureSupport } from '../../api/radarFeatures'
+
+const state = vi.hoisted(() => ({ capabilities: { features: { resourceIssues: true } } as any, diskEnabled: [] as boolean[], metricsEnabled: [] as boolean[], result: undefined as any, workspace: undefined as any }))
+const oldKinds = ['clusters', 'backups', 'scheduledBackups', 'poolers', 'databases', 'publications', 'subscriptions', 'imageCatalogs', 'clusterImageCatalogs', 'objectStores', 'pods']
+const cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { namespace: 'db', name: 'pg' }, spec: { instances: 1 }, status: { phase: 'Cluster in healthy state', readyInstances: 1, currentPrimary: 'pg-1' } }
+const workspace = { installed: true, context: 'test', namespaces: ['db'], coverage: Object.fromEntries(oldKinds.map(k => [k, { state: 'full' }])), objects: { ...Object.fromEntries(oldKinds.map(k => [k, []])), clusters: [cluster], pods: [{ apiVersion: 'v1', kind: 'Pod', metadata: { namespace: 'db', name: 'pg-1', labels: { 'cnpg.io/cluster': 'pg', 'cnpg.io/instanceRole': 'primary' } }, status: { conditions: [{ type: 'Ready', status: 'True' }] } }] }, issues: [], audit: [], backupsOmitted: 0 }
+vi.mock('../../api/cnpg', () => ({ useCNPGWorkspace: () => ({ data: state.workspace ?? workspace }) }))
+vi.mock('../../api/cnpg-storage', () => ({ useCNPGFleetDisk: (_ns: string[], enabled: boolean) => { state.diskEnabled.push(enabled); return { error: new Error('Live disk needs a newer Radar') } } }))
+vi.mock('../../api/cnpg-history', () => ({ useCNPGFleetMetrics: (_ns: string[], enabled: boolean) => { state.metricsEnabled.push(enabled); return {} } }))
+vi.mock('../../api/client', () => ({ useRadarFeature: () => ({ support: radarFeatureSupport('cnpgWorkspace', state.capabilities, 'v1.16.0') }) }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => vi.fn() }))
+beforeEach(() => { state.capabilities = { features: { resourceIssues: true } }; state.diskEnabled = []; state.metricsEnabled = []; state.workspace = undefined })
+function Host() {
+  const { fleet } = useCNPGFleet(['db'])
+  const sidebar = useCNPGSidebarWorkspace({ apiResources: [{ name: 'clusters', kind: 'Cluster', group: 'postgresql.cnpg.io', namespaced: true }] as any, namespaces: ['db'] })
+  state.result = { fleet, sidebar }
+  return <div>{fleet?.rows[0].cluster.status.phase}{sidebar?.CloudNativePG.destinations.map(d => <span key={d.id}>{d.label}</span>)}</div>
+}
+it('keeps the ordinary workspace destinations and CRD facts without new measurement failures', () => {
+  const html = renderToStaticMarkup(<Host />)
+  expect(html).toContain('Cluster in healthy state')
+  expect(html).toContain('Clusters')
+  expect(html).toContain('Backups')
+  expect(state.diskEnabled).toEqual([false, false])
+  expect(state.metricsEnabled).toEqual([false, false])
+  expect(state.result.fleet.rows[0].disk).toBeUndefined()
+  expect(state.result.fleet.incompleteKinds).toContain('databaseRoles')
+  expect(state.result.fleet.rows[0].declarations.summary.text).toContain('DatabaseRoles not read by this Radar')
+  expect(state.result.sidebar.CloudNativePG.destinations[0]).toMatchObject({ count: null, countLowerBound: true })
+})
+it('enables new measurements only once the server advertises their contracts', () => {
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  renderToStaticMarkup(<Host />)
+  expect(state.diskEnabled).toEqual([true, false])
+  expect(state.metricsEnabled).toEqual([true, false])
+  expect(state.result.fleet.rows[0].disk).toMatchObject({ text: 'Unavailable', tone: 'unknown', source: 'Disk usage could not be read: Live disk needs a newer Radar' })
+})
+it('the Resources sidebar reads disk and lag only on the CloudNativePG views', () => {
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  const apiResources = [{ name: 'clusters', kind: 'Cluster', group: 'postgresql.cnpg.io', namespaced: true }] as any
+  function Sidebar({ active }: { active: boolean }) {
+    state.result = useCNPGSidebarWorkspace({ apiResources, namespaces: ['db'], active: active ? { screen: 'overview' } : undefined })
+    return null
+  }
+  renderToStaticMarkup(<Sidebar active={false} />)
+  expect(state.diskEnabled).toEqual([false])
+  renderToStaticMarkup(<Sidebar active />)
+  expect(state.diskEnabled).toEqual([false, true])
+  expect(state.metricsEnabled).toEqual([false, true])
+})
+
+it('outside the CloudNativePG views the Clusters badge is a lower bound, and its zero is not none', () => {
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  const apiResources = [{ name: 'clusters', kind: 'Cluster', group: 'postgresql.cnpg.io', namespaced: true }] as any
+  const fullCoverage = Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' }]))
+  const clusterIssue = { id: 'i1', severity: 'warning', kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'db', name: 'pg', reason: 'CNPGNotReady', message: 'not ready' }
+  function Sidebar({ active }: { active: boolean }) {
+    state.result = useCNPGSidebarWorkspace({ apiResources, namespaces: ['db'], active: active ? { screen: 'overview' } : undefined })
+    return null
+  }
+  const overview = (active: boolean) => {
+    renderToStaticMarkup(<Sidebar active={active} />)
+    return state.result.CloudNativePG.destinations.find((d: any) => d.id === 'overview')
+  }
+  const crd = [{ group: 'postgresql.cnpg.io', version: 'v1', kind: 'Cluster', name: 'clusters', namespaced: true, isCrd: true, verbs: ['list'] }] as any
+  const badge = (destination: any) => {
+    const html = renderToStaticMarkup(
+      <ResourcesSidebar selectedKind={null} onSelectedKindChange={() => {}} apiResources={crd} resourceCounts={{ 'postgresql.cnpg.io/Cluster': 1 }} categoryWorkspaces={{ CloudNativePG: { destinations: [destination] } }} />,
+    )
+    return html.match(new RegExp(`>${destination.label}</span>(.*?)</button>`))?.[1] ?? ''
+  }
+
+  state.workspace = { ...workspace, coverage: fullCoverage }
+  const calm = overview(false)
+  expect(calm).toMatchObject({ count: null, countLowerBound: true })
+  expect(calm.countTitle).toBe('None found in the workspace read. Disk use and replication lag are counted on the CloudNativePG views.')
+  expect(badge(calm)).toMatch(/>–</)
+  expect(overview(true)).toMatchObject({ count: 0, countLowerBound: false })
+
+  state.workspace = { ...workspace, coverage: fullCoverage, issues: [clusterIssue] }
+  const flagged = overview(false)
+  expect(flagged).toMatchObject({ count: 1, countLowerBound: true })
+  expect(flagged.countTitle).toBe('At least 1 clusters need attention. Disk use and replication lag are counted on the CloudNativePG views.')
+  expect(badge(flagged)).toMatch(/≥(<!-- -->)?1/)
+  expect(overview(true)).toMatchObject({ count: 1, countLowerBound: false })
+})

package/src/components/cnpg/actions/CNPGClusterActions.dialog.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ClusterActionDialog } from './CNPGClusterActions'
+const state = vi.hoisted(() => ({ dialog: {} as any, mutate: vi.fn() }))
+vi.mock('../../../api/cnpg', () => ({ useCNPGAction: () => ({ mutate: state.mutate }), useCNPGRuntime: () => ({}), useCNPGClusterCapabilities: () => ({}) }))
+vi.mock('../../../api/cnpg-ha', () => ({ useCNPGClusterHA: () => ({}) }))
+vi.mock('../useCNPGSidebarWorkspace', () => ({ useCNPGFleet: () => ({}) }))
+vi.mock('../useCNPGNavigate', () => ({ useCNPGNavigate: () => vi.fn() }))
+vi.mock('../../ui/Toast', () => ({ useToast: () => ({ showSuccess: vi.fn() }) }))
+vi.mock('./useCNPGWriteGuard', () => ({ useCNPGWriteGuard: () => ({ node: null, satisfied: true }) }))
+vi.mock('@skyhook-io/k8s-ui', async (original) => ({ ...(await original<typeof import('@skyhook-io/k8s-ui')>()), ActionConfirmDialog: (props: any) => { state.dialog = props; return <div>{props.children}<button disabled={!!props.disabledReason || !!props.incompleteReason} onClick={props.onConfirm}>Confirm</button></div> } }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let host: HTMLDivElement, root: ReturnType<typeof createRoot>
+afterEach(() => { act(() => root.unmount()); host.remove(); state.mutate.mockClear() })
+const facts = { maintenance: {}, backupMethods: [], currentPrimary: 'orders-1', fencedInstances: { all: false, instances: [] }, instances: [{ pod: 'orders-1', podExists: true, ready: true }, { pod: 'orders-2', podExists: false, ready: false }] }
+function render(kind: 'fence' | 'unfence' | 'hibernate', extra = {}, initialPod?: string) {
+  host = document.createElement('div'); root = createRoot(host)
+  act(() => root.render(<ClusterActionDialog kind={kind} caps={{ facts, actions: { [kind]: { allowed: true } }, context: 'kind-orders', uid: 'uid', ...extra } as any} namespace="db" name="orders" initialPod={initialPod} onClose={() => {}} />))
+}
+it('requires an explicit fencing choice, puts All last and keeps primary typed confirmation', () => {
+  render('fence', {}, 'orders-2')
+  const select = host.querySelector('select')!
+  expect(select.value).toBe('')
+  expect(host.querySelector('button')!.disabled).toBe(true)
+  expect(state.dialog.disabledReason).toBeUndefined()
+  expect(state.dialog.incompleteReason).toBe('Choose an instance to fence.')
+  expect([...select.options].map((o) => o.textContent)).toEqual(['Choose an instance', 'orders-1 (primary)', 'orders-2', 'All instances — stops service'])
+  act(() => { select.value = 'orders-2'; select.dispatchEvent(new Event('change', { bubbles: true })) })
+  expect(host.querySelector('button')!.disabled).toBe(false)
+  expect(state.dialog.incompleteReason).toBeUndefined()
+  expect(state.dialog.typedConfirmation).toBeUndefined()
+  act(() => host.querySelector('button')!.click())
+  expect(state.mutate.mock.calls[0][0].request.params.instances).toEqual(['orders-2'])
+  act(() => { select.value = '*'; select.dispatchEvent(new Event('change', { bubbles: true })) })
+  expect(state.dialog.typedConfirmation).toBe('orders')
+  expect(state.dialog.effect).toContain('Writes stop')
+})
+it('disables fencing an instance the server refuses on its own, with the reason, and keeps All', () => {
+  const target = 'It is the target of a switchover or failover in progress'
+  render('fence', { instanceActions: { 'orders-1': { fence: { allowed: true } }, 'orders-2': { fence: { allowed: false, reason: target, permission: 'allowed' } } } })
+  const select = host.querySelector('select')!
+  const option = (value: string) => [...select.options].find((o) => o.value === value)!
+  expect(option('orders-2').disabled).toBe(true)
+  expect(option('orders-2').textContent).toBe('orders-2 — cannot be fenced')
+  expect(option('orders-1').disabled).toBe(false)
+  expect(option('*').disabled).toBe(false)
+  expect(host.textContent).toContain(`orders-2 cannot be fenced: ${target}`)
+  act(() => { select.value = 'orders-2'; select.dispatchEvent(new Event('change', { bubbles: true })) })
+  expect(state.dialog.disabledReason).toBe(`orders-2 cannot be fenced: ${target}`)
+  act(() => host.querySelector('button')!.click())
+  expect(state.mutate).not.toHaveBeenCalled()
+  act(() => { select.value = '*'; select.dispatchEvent(new Event('change', { bubbles: true })) })
+  expect(state.dialog.disabledReason).toBeUndefined()
+  act(() => host.querySelector('button')!.click())
+  expect(state.mutate.mock.calls[0][0].request.params.instances).toBe('*')
+})
+it('keeps a malformed fencing annotation as a real blocker after selecting an instance', () => {
+  render('fence', { facts: { ...facts, fencedInstances: { all: false, instances: [], malformed: true } } })
+  const select = host.querySelector('select')!
+  act(() => { select.value = 'orders-2'; select.dispatchEvent(new Event('change', { bubbles: true })) })
+  expect(state.dialog.disabledReason).toBe('The cnpg.io/fencedInstances annotation is not valid JSON; fix it in YAML first.')
+  expect(state.dialog.incompleteReason).toBeUndefined()
+  expect(host.querySelector('button')!.disabled).toBe(true)
+  act(() => host.querySelector('button')!.click())
+  expect(state.mutate).not.toHaveBeenCalled()
+})
+it('preserves the lift-all fencing default', () => {
+  render('unfence', { facts: { ...facts, fencedInstances: { all: true, instances: [] } } })
+  expect(host.querySelector('select')!.value).toBe('*')
+  expect(host.querySelector('button')!.disabled).toBe(false)
+})
+it('labels kept PVCs and separates capacity from requested size', () => {
+  const list = { available: true, names: [] }
+  render('hibernate', { hibernateEffects: { volumes: { available: true, items: [{ name: 'orders-1', capacity: '1Gi', requested: '2Gi' }, { name: 'orders-2', requested: '2Gi' }, { name: 'orders-3' }] }, poolers: list, unsuspendedScheduledBackups: list, databases: list, publications: list, subscriptions: list } })
+  expect(host.textContent).toContain('Kept PVCs: orders-1 (capacity 1Gi; requested 2Gi), orders-2 (capacity not reported; requested 2Gi), orders-3 (capacity not reported)')
+  expect(state.dialog.typedConfirmation).toBe('orders')
+})

package/src/components/cnpg/actions/CNPGClusterActions.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { CNPGClusterActions, CNPGRestartReview } from './CNPGClusterActions'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+const state = vi.hoisted(() => ({ caps: {} as any, workspace: {} as any, refetch: vi.fn() }))
+vi.mock('../../../api/cnpg', () => ({ useCNPGClusterCapabilities: () => state.caps }))
+vi.mock('../useCNPGSidebarWorkspace', () => ({ useCNPGFleet: () => state.workspace }))
+vi.mock('./useOpenCNPGPsql', () => ({ useOpenCNPGPsql: () => vi.fn() }))
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove(); vi.clearAllMocks(); vi.useRealTimers() })
+function render() {
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<CNPGClusterActions namespace="db" name="pg" />))
+}
+function menu() { act(() => host.querySelector<HTMLButtonElement>('[aria-label="More cluster actions"]')!.click()) }
+it('shows a failed capability read with Retry instead of checking forever', () => {
+  state.workspace = { query: {} }
+  state.caps = { error: new Error('Gateway timeout'), refetch: state.refetch, isFetching: false }
+  render()
+  expect(host.textContent).toContain('Actions could not be checked: Gateway timeout')
+  expect(host.textContent).not.toContain('Checking permissions')
+  const retry = [...host.querySelectorAll('button')].find((b) => b.textContent === 'Retry')!
+  act(() => retry.click())
+  expect(state.refetch).toHaveBeenCalledTimes(1)
+})
+
+it('keeps blocked header buttons focusable, explains on focus and click, and prints menu reasons', () => {
+  vi.useFakeTimers()
+  const cap = { allowed: false, reason: 'Configure a backup destination on orders first' }
+  state.caps = { data: { actions: { backup: cap, switchover: { allowed: false, reason: 'No ready standby' }, unfence: { allowed: false, reason: 'No instances are fenced' }, psql: { allowed: false, reason: 'Needs create pods/exec' }, restore: { allowed: false, reason: 'Needs create clusters' } }, facts: { maintenance: {} } } }
+  state.workspace = { query: {} }
+  render()
+  const backup = host.querySelector<HTMLButtonElement>('[aria-label="Back up now"]')!
+  expect(backup.disabled).toBe(false)
+  expect(backup.getAttribute('aria-disabled')).toBe('true')
+  act(() => { backup.focus(); vi.advanceTimersByTime(350) })
+  expect(document.activeElement).toBe(backup)
+  expect(document.body.textContent).toContain(cap.reason)
+  act(() => backup.click())
+  expect(host.querySelector('[role="status"]')?.textContent).toBe(cap.reason)
+  const switchover = [...host.querySelectorAll<HTMLButtonElement>('button')].find((b) => b.textContent === 'Switchover')!
+  expect(switchover.disabled).toBe(false)
+  expect(switchover.getAttribute('aria-disabled')).toBe('true')
+  act(() => switchover.click())
+  expect(host.querySelector('[role="status"]')?.textContent).toBe('No ready standby')
+  state.caps.data.actions.switchover.allowed = true
+  act(() => root.render(<CNPGClusterActions namespace="db" name="pg" />))
+  expect(host.querySelector('[role="status"]')).toBeNull()
+  menu()
+  const dialog = document.querySelector('[role=dialog][aria-label="Cluster actions"]')!
+  expect(dialog.textContent).toContain('No instances are fenced')
+  expect(dialog.textContent).toContain('Needs create pods/exec')
+  expect(dialog.textContent).toContain('Needs create clusters')
+  expect(host.contains(dialog)).toBe(false)
+  act(() => dialog.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })))
+  expect(host.querySelector('[aria-label="More cluster actions"]')?.getAttribute('aria-expanded')).toBe('false')
+})
+
+it('reviews each restart step with current readiness, scheduling blockers and primary downtime', () => {
+  const caps = { facts: { currentPrimary: 'orders-1', instances: [{ pod: 'orders-1', ready: true, podReadable: true, podExists: true }, { pod: 'orders-2', ready: false, podReadable: true, podExists: false }] }, restartPlan: { primaryUpdateStrategy: 'unsupervised', primaryUpdateMethod: 'restart', steps: [{ instance: 'orders-2', role: 'standby', effect: 'recreate' }, { instance: 'orders-1', role: 'primary', effect: 'restart' }] } } as any
+  const problem = { id: 'join', instance: 'orders-2', title: "New standby orders-2: Can't be scheduled", detail: '2 nodes insufficient pods', subject: { kind: 'Pod', name: 'orders-2-join' } } as any
+  const html = renderToStaticMarkup(<CNPGRestartReview caps={caps} problems={[problem]} onOpenOverview={() => {}} />)
+  for (const text of ['currently ready', 'currently absent', 'insufficient pods', 'Restarting the primary interrupts its connections.', 'The rolling restart waits for every instance to be ready.', 'Currently blocked by orders-2.', 'If the primary restarts without another ready instance, the cluster stops serving until it is back.']) expect(html).toContain(text)
+  expect(html).toContain('See Overview’s problems →')
+  caps.facts.instances[1].ready = true
+  expect(renderToStaticMarkup(<CNPGRestartReview caps={caps} />)).not.toContain('cluster stops serving')
+  caps.facts.instances[1].ready = false; caps.facts.instances[1].podReadable = false
+  expect(renderToStaticMarkup(<CNPGRestartReview caps={caps} />)).toContain('service continuity is unknown')
+  caps.restartPlan.steps[1].effect = 'wait_for_user'
+  const supervised = renderToStaticMarkup(<CNPGRestartReview caps={caps} />)
+  expect(supervised).toContain('primary waits for your manual promotion or restart')
+  expect(supervised).not.toContain('Restarting the primary interrupts its connections.')
+  caps.restartPlan.steps[1].effect = 'skipped_fenced'
+  expect(renderToStaticMarkup(<CNPGRestartReview caps={caps} />)).toContain('fenced primary is skipped')
+  caps.restartPlan.steps = [{ instance: 'orders-1', role: 'primary', effect: 'restart_only_instance' }]
+  caps.facts.instances = [caps.facts.instances[0]]
+  expect(renderToStaticMarkup(<CNPGRestartReview caps={caps} />)).toContain('There is no other instance: the cluster stops serving until the primary is back.')
+})
+it('disables header restore for known no sources and keeps unread sources enabled', () => {
+  const cluster = { metadata: { name: 'pg', namespace: 'db' }, spec: {} }
+  state.caps = { data: { actions: { restore: { allowed: true }, backup: { allowed: false }, switchover: { allowed: false }, psql: { allowed: false } }, facts: { maintenance: {} } } }
+  state.workspace = { query: { data: { coverage: { backups: { state: 'full' } }, objects: { backups: [] } } }, fleet: { rows: [{ name: 'pg', namespace: 'db', cluster }] } }
+  render(); menu()
+  let restore = [...document.querySelectorAll<HTMLButtonElement>('[role=menu] button')].find((b) => b.textContent?.includes('Restore to a new cluster'))!
+  expect(restore.disabled).toBe(true)
+  expect(document.querySelector('[role=menu]')?.textContent).toContain('Nothing to restore from yet')
+  state.workspace.query.data.coverage.backups.state = 'denied'
+  act(() => root.render(<CNPGClusterActions namespace="db" name="pg" />))
+  restore = [...document.querySelectorAll<HTMLButtonElement>('[role=menu] button')].find((b) => b.textContent?.includes('Restore to a new cluster'))!
+  expect(restore.disabled).toBe(false)
+  expect(document.querySelector('[role=menu]')?.textContent).not.toContain('Nothing to restore from yet')
+  state.caps.isRefetchError = true
+  state.caps.error = new Error('Refresh timeout')
+  state.caps.dataUpdatedAt = Date.now() - 180_000
+  act(() => root.render(<CNPGClusterActions namespace="db" name="pg" />))
+  expect(host.textContent).toContain('Last refresh failed: Refresh timeout')
+  expect(host.textContent).toContain('3m ago')
+  expect(host.textContent).not.toContain('Actions could not be checked')
+  expect(restore.disabled).toBe(false)
+})
+
+it('carries a verified join-Job blocker into the matching restart step and opens Overview', () => {
+  const open = vi.fn()
+  const caps = { facts: { currentPrimary: 'orders-1', instances: [{ pod: 'orders-2', ready: false, podReadable: true, podExists: false }] }, restartPlan: { steps: [{ instance: 'orders-2', role: 'standby', effect: 'recreate' }] } } as any
+  const problem = { id: 'join', instance: 'orders-2', title: "New standby orders-2: Can't be scheduled", detail: 'Cannot be scheduled: both nodes have reached their Pod limit', subject: { kind: 'Pod', name: 'orders-2-join-dz4fc' } } as any
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<CNPGRestartReview caps={caps} problems={[problem]} onOpenOverview={open} />))
+  const step = host.querySelector('li')!
+  expect(step.textContent).toContain('orders-2 : Will recreate the standby Pod (currently absent)')
+  expect(step.textContent).toContain('both nodes have reached their Pod limit')
+  act(() => step.querySelector('button')!.click())
+  expect(open).toHaveBeenCalledOnce()
+})
+
+it('states restart intentions separately from observations and folds the raw update policy', () => {
+  const caps = { facts: { currentPrimary: 'orders-1', instances: [{ pod: 'orders-1', ready: true, podReadable: true, podExists: true }, { pod: 'orders-2', podReadable: true, podExists: false }] }, restartPlan: { primaryUpdateStrategy: 'unsupervised', primaryUpdateMethod: 'restart', steps: [{ instance: 'orders-2', role: 'standby', effect: 'recreate' }, { instance: 'orders-1', role: 'primary', effect: 'restart' }] } } as any
+  const html = renderToStaticMarkup(<CNPGRestartReview caps={caps} />)
+  expect(html).toContain('Will recreate the standby Pod')
+  expect(html).toContain('(currently absent)')
+  expect(html).toContain('Will restart the primary in place')
+  expect(html).toContain('(currently ready)')
+  expect(html).toContain('The operator updates the primary automatically after the standbys')
+  expect(html).toContain('Operator update settings')
+  expect(html).toContain('aria-expanded="false"')
+})
+
+it.each(['skipped_fenced', 'restart_only_instance', 'wait_for_user'])('explains the %s plan without promising a configured switchover', (effect) => {
+  const caps = { facts: { currentPrimary: 'orders-1', instances: [{ pod: 'orders-1', ready: true, podReadable: true, podExists: true }] }, restartPlan: { primaryUpdateStrategy: 'unsupervised', primaryUpdateMethod: 'switchover', steps: [{ instance: 'orders-1', role: 'primary', effect }] } } as any
+  const html = renderToStaticMarkup(<CNPGRestartReview caps={caps} />)
+  expect(html).not.toContain('updates the primary automatically after the standbys')
+  expect(html).not.toContain('it promotes an updated standby')
+  expect(html).toContain(effect === 'skipped_fenced' ? 'The fenced primary is skipped.' : effect === 'restart_only_instance' ? 'There is no other instance' : 'The primary waits for your manual promotion or restart.')
+})
+it('explains an automatic switchover from the planned effect rather than the raw method', () => {
+  const caps = { facts: { currentPrimary: 'orders-1', instances: [] }, restartPlan: { primaryUpdateStrategy: 'unsupervised', primaryUpdateMethod: 'restart', steps: [{ instance: 'orders-1', role: 'primary', effect: 'switchover' }] } } as any
+  expect(renderToStaticMarkup(<CNPGRestartReview caps={caps} />)).toContain('it promotes an updated standby, then recreates the former primary Pod.')
+})