@skyhook-io/k8s-ui 1.17.0 → 1.17.1

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

@@ -0,0 +1,154 @@
+// @vitest-environment jsdom
+import { act, useState } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ActionConfirmDialog, type ActionConfirmDialogProps } from './ActionConfirmDialog'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+const roots: Root[] = []
+const base: ActionConfirmDialogProps = {
+  open: true, onClose: () => {}, onConfirm: () => {}, title: 'Scale worker?',
+  subject: { kind: 'Deployment', namespace: 'jobs', name: 'worker' },
+  context: 'test-cluster', effect: 'Set the desired replicas to three.', confirmLabel: 'Scale',
+}
+function render(props: Partial<ActionConfirmDialogProps> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  roots.push(root)
+  const update = (next: Partial<ActionConfirmDialogProps>) => act(() => root.render(<ActionConfirmDialog {...base} {...next} />))
+  update(props)
+  return update
+}
+function button(label: string) {
+  return [...document.querySelectorAll('button')].find(b => b.textContent?.trim() === label)!
+}
+function type(text: string) {
+  const input = document.querySelector('input')!
+  act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, text)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+afterEach(() => {
+  act(() => roots.splice(0).forEach(root => root.unmount()))
+  document.body.innerHTML = ''
+})
+
+describe('ActionConfirmDialog', () => {
+  it('shows the target and context before a reviewed write', () => {
+    const confirm = vi.fn()
+    render({ onConfirm: confirm })
+    expect(document.body.textContent).toContain('Deployment jobs/worker · context test-cluster')
+    act(() => button('Scale').click())
+    expect(confirm).toHaveBeenCalledOnce()
+  })
+  it('shows an incomplete form as a quiet hint and a disabled confirm', () => {
+    render({ incompleteReason: 'The replica count is unchanged' })
+    expect(document.body.textContent).toContain('The replica count is unchanged')
+    expect(document.body.textContent).not.toContain('This action is not available')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('keeps the alert for a real blocker', () => {
+    render({ disabledReason: 'Needs patch deployments in jobs' })
+    expect(document.body.textContent).toContain('This action is not available')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('requires typed acknowledgement and clears it after closing', () => {
+    const update = render({ typedConfirmation: 'worker' })
+    expect(button('Scale').disabled).toBe(true)
+    type('other')
+    expect(button('Scale').disabled).toBe(true)
+    type('worker')
+    expect(button('Scale').disabled).toBe(false)
+    update({ typedConfirmation: 'worker', open: false })
+    update({ typedConfirmation: 'worker' })
+    expect(document.querySelector('input')?.value).toBe('')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('requires the host write guard even with the correct acknowledgement', () => {
+    render({ typedConfirmation: 'worker', guardSatisfied: false })
+    type('worker')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('locks resubmission for an unknown or partial result without claiming no write happened', () => {
+    render({ result: { state: 'unknown', message: 'Refresh the target before another attempt.' } })
+    expect(button('Scale').disabled).toBe(true)
+    expect(document.body.textContent).toContain('Radar could not tell whether this took effect')
+    expect(document.body.textContent).not.toContain('The write did not happen')
+  })
+  it('locks an unknown result even without an error string', () => {
+    render({ result: { state: 'unknown' } })
+    expect(button('Scale').disabled).toBe(true)
+    expect(document.body.textContent).toContain('Radar could not tell whether this took effect')
+    expect(document.body.textContent).toContain('Check the object’s current state')
+  })
+  it('allows retry after a known refusal, using neutral default error copy', () => {
+    render({ result: { state: 'error', message: 'The reviewed replica count changed.' } })
+    expect(button('Scale').disabled).toBe(false)
+    expect(document.body.textContent).toContain('The action could not be completed')
+  })
+  it('locks confirm, Back and dismissal while the request is pending', () => {
+    const close = vi.fn(), back = vi.fn()
+    render({ isLoading: true, onClose: close, onBack: back })
+    expect(button('Scale').disabled).toBe(true)
+    expect(button('Back').disabled).toBe(true)
+    expect(button('Cancel').disabled).toBe(true)
+    act(() => button('Cancel').click())
+    act(() => document.querySelector<HTMLButtonElement>('[aria-label="Close"]')!.click())
+    expect(close).not.toHaveBeenCalled()
+    expect(back).not.toHaveBeenCalled()
+  })
+  it('keeps Back and Cancel distinct', () => {
+    const close = vi.fn(), back = vi.fn()
+    render({ onClose: close, onBack: back })
+    act(() => button('Back').click())
+    expect(back).toHaveBeenCalledOnce()
+    expect(close).not.toHaveBeenCalled()
+    act(() => button('Cancel').click())
+    expect(close).toHaveBeenCalledOnce()
+  })
+  it('reveals the reviewed writes through an accessible disclosure', () => {
+    render({ writes: [{ summary: 'patch Deployment jobs/worker', detail: 'spec.replicas: 3' }] })
+    const toggle = button('The API write')
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    act(() => toggle.click())
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(document.body.textContent).toContain('spec.replicas: 3')
+  })
+})
+
+it('retains a host-owned outcome lock across dialog dismissal and remount', () => {
+  function Host() {
+    const [open, setOpen] = useState(true)
+    const [unknown, setUnknown] = useState(true)
+    return <>
+      <button onClick={() => setOpen(true)}>Review action</button>
+      <button onClick={() => setUnknown(false)}>Current state reviewed</button>
+      {open && <ActionConfirmDialog {...base} result={unknown ? { state: 'unknown' } : undefined} onClose={() => setOpen(false)} />}
+    </>
+  }
+  const root = createRoot(document.body.appendChild(document.createElement('div')))
+  roots.push(root)
+  act(() => root.render(<Host />))
+  expect(button('Scale').disabled).toBe(true)
+  act(() => button('Cancel').click())
+  act(() => button('Review action').click())
+  expect(button('Scale').disabled).toBe(true)
+  act(() => button('Current state reviewed').click())
+  expect(button('Scale').disabled).toBe(false)
+})
+
+it('locks a partial result and explains that changes completed', () => {
+  render({ result: { state: 'partial' } })
+  expect(button('Scale').disabled).toBe(true)
+  expect(document.body.textContent).toContain('Some changes completed')
+  expect(document.body.textContent).toContain('Check the object’s current state')
+})
+
+it('keeps an empty known-refusal message distinct from an uncertain outcome', () => {
+  render({ result: { state: 'error', message: '' } })
+  expect(button('Scale').disabled).toBe(false)
+  expect(document.body.textContent).toContain('The action could not be completed')
+  expect(document.body.textContent).not.toContain('Check the object’s current state')
+})

package/src/components/shared/ActionConfirmDialog.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useId, useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { AlertTriangle, Info, X } from 'lucide-react'
+import { DialogPortal } from '../ui/DialogPortal'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
+import { TONE_SOLID_CLASS } from '../ui/severity-tone'
+import { AlertBanner } from '../ui/drawer-components'
+import type { ResourceRef } from '../../types/core'
+
+/** One API call the action will make, shown in the technical section. */
+export interface ActionWrite {
+  /** Plain-language line, e.g. "patch Cluster payments/pg-orders status". */
+  summary: string
+  /** The literal body or field change, shown monospaced. */
+  detail?: string
+}
+
+export type ActionConfirmResult =
+  | { state: 'error'; message: string; title?: string }
+  | { state: 'unknown' | 'partial'; message?: string; title?: string }
+
+export interface ActionConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void
+  onBack?: () => void
+  backLabel?: string
+  /** Imperative title: "Switch over pg-orders?" */
+  title: string
+  subject: Pick<ResourceRef, 'kind' | 'name'> & Partial<Pick<ResourceRef, 'namespace'>>
+  /** Kubernetes context the write goes to, always visible. */
+  context?: string
+  /** What happens, stated first. */
+  effect: ReactNode
+  /** Form fields (targets, options). */
+  children?: ReactNode
+  notes?: ReactNode[]
+  warnings?: ReactNode[]
+  /** Extra acknowledgement block, e.g. the GitOps write warning. */
+  guard?: ReactNode
+  /** Blocks confirm until the guard is satisfied. */
+  guardSatisfied?: boolean
+  writes?: ActionWrite[]
+  /** When set, the user must type this exact text to confirm. */
+  typedConfirmation?: string
+  confirmLabel: string
+  /** Disruptive actions use the danger styling. */
+  disruptive?: boolean
+  /** Why the action cannot run right now; disables confirm and is shown. */
+  disabledReason?: string
+  /** What the form still needs (an unchanged value, a missing input); disables confirm with a quiet hint beside it, not an alert. */
+  incompleteReason?: string
+  isLoading?: boolean
+  /**
+   * Unknown and partial results lock Confirm: repeating the action could apply
+   * it twice. The host must retain the result
+   * across dismissal/remount until it has reviewed the current target again.
+   */
+  result?: ActionConfirmResult
+  /** `wide` for dialogs that show evidence beside their form fields. */
+  size?: 'default' | 'wide'
+}
+
+export function ActionConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  onBack,
+  backLabel = 'Back',
+  title,
+  subject,
+  context,
+  effect,
+  children,
+  notes = [],
+  warnings = [],
+  guard,
+  guardSatisfied = true,
+  writes = [],
+  typedConfirmation,
+  confirmLabel,
+  disruptive = false,
+  disabledReason,
+  incompleteReason,
+  isLoading = false,
+  result,
+  size = 'default',
+}: ActionConfirmDialogProps) {
+  const titleId = useId()
+  const [typed, setTyped] = useState('')
+  const [showWrites, setShowWrites] = useState(false)
+  const writesDisclosure = useDisclosure(showWrites)
+
+  useEffect(() => {
+    if (!open) {
+      setTyped('')
+      setShowWrites(false)
+    }
+  }, [open])
+
+  const typedOk = !typedConfirmation || typed.trim() === typedConfirmation
+  const outcomeLocked = result?.state === 'unknown' || result?.state === 'partial'
+  const canConfirm = !disabledReason && !incompleteReason && !outcomeLocked && typedOk && guardSatisfied && !isLoading
+  const where = [subject.namespace, subject.name].filter(Boolean).join('/')
+
+  return (
+    <DialogPortal open={open} onClose={onClose} closable={!isLoading} className={size === 'wide' ? 'w-full max-w-4xl' : 'w-full max-w-xl'} ariaLabelledBy={titleId}>
+      <div className="flex items-start gap-3 border-b border-theme-border p-4">
+        <div className="min-w-0 flex-1">
+          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+          <div className="mt-0.5 text-xs text-theme-text-tertiary">
+            {subject.kind} <span className="font-mono">{where}</span>
+            {context && (
+              <>
+                {' · context '}
+                <span className="font-mono">{context}</span>
+              </>
+            )}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isLoading}
+          aria-label="Close"
+          className="rounded p-1 text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary disabled:opacity-50"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      <div className="max-h-[70vh] space-y-4 overflow-y-auto p-4 text-sm text-theme-text-primary">
+        <div className="text-theme-text-primary">{effect}</div>
+
+        {disabledReason && <AlertBanner variant="info" title="This action is not available" message={disabledReason} />}
+
+        {children}
+
+        {warnings.length > 0 && (
+          <div className="space-y-2">
+            {warnings.map((w, i) => (
+              <div key={i} className="flex items-start gap-2 text-sm text-theme-text-primary">
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-warning-text" />
+                <div className="min-w-0">{w}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {notes.length > 0 && (
+          <div className="space-y-1.5">
+            {notes.map((n, i) => (
+              <div key={i} className="flex items-start gap-2 text-xs text-theme-text-secondary">
+                <Info className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+                <div className="min-w-0">{n}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {guard}
+
+        {writes.length > 0 && (
+          <div>
+            <button
+              type="button"
+              {...writesDisclosure.buttonProps}
+              onClick={() => setShowWrites((v) => !v)}
+              className="flex items-center gap-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
+            >
+              <CollapseChevron open={showWrites} className="h-3.5 w-3.5" />
+              {writes.length === 1 ? 'The API write' : `The API writes, in order (${writes.length})`}
+            </button>
+            <Collapse open={showWrites} id={writesDisclosure.panelId}>
+              <ol className="mt-2 space-y-2 pl-5 text-xs">
+                {writes.map((w, i) => (
+                  <li key={i} className="list-decimal text-theme-text-secondary">
+                    <div>{w.summary}</div>
+                    {w.detail && (
+                      <pre className="mt-1 overflow-auto whitespace-pre-wrap rounded bg-theme-base/60 p-2 font-mono text-[11.5px] text-theme-text-primary">
+                        {w.detail}
+                      </pre>
+                    )}
+                  </li>
+                ))}
+              </ol>
+            </Collapse>
+          </div>
+        )}
+
+        {typedConfirmation && (
+          <label className="block">
+            <span className="text-xs text-theme-text-secondary">
+              Type <span className="font-mono font-semibold text-theme-text-primary">{typedConfirmation}</span> to confirm
+            </span>
+            <input
+              value={typed}
+              onChange={(e) => setTyped(e.target.value)}
+              autoComplete="off"
+              spellCheck={false}
+              className="mt-1 w-full rounded-lg border border-theme-border bg-theme-base px-3 py-1.5 font-mono text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-skyhook-500"
+            />
+          </label>
+        )}
+
+        {result && (
+          <AlertBanner
+            variant={outcomeLocked ? 'warning' : 'error'}
+            title={result.title ?? (result.state === 'partial' ? 'Some changes completed' : result.state === 'unknown' ? 'Radar could not tell whether this took effect' : 'The action could not be completed')}
+            message={result.message || (outcomeLocked ? 'Check the object’s current state before another attempt.' : undefined)}
+          />
+        )}
+      </div>
+
+      <div className="flex items-center justify-end gap-3 border-t border-theme-border p-4">
+        {onBack && <button type="button" onClick={onBack} disabled={isLoading} className="btn-secondary mr-auto px-4 py-2 text-sm disabled:opacity-50">{backLabel}</button>}
+        {incompleteReason && !disabledReason && <span className="mr-auto min-w-0 text-xs text-theme-text-tertiary">{incompleteReason}</span>}
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isLoading}
+          className="rounded-lg px-4 py-2 text-sm font-medium text-theme-text-secondary transition-colors hover:bg-theme-elevated hover:text-theme-text-primary disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={onConfirm}
+          disabled={!canConfirm}
+          className={clsx(
+            'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+            disruptive ? [TONE_SOLID_CLASS.red, 'hover:opacity-90'] : 'btn-brand',
+          )}
+        >
+          {isLoading && (
+            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" aria-hidden>
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          )}
+          {confirmLabel}
+        </button>
+      </div>
+    </DialogPortal>
+  )
+}