[Chakra exit · Phase 1 · PR 4/14] frontend: SingleSelect and the error/not-found surfaces on Registry components, plus two guard tests

[SpicyPete]

Chakra exit · Phase 1 (wrappers) · PR 4 of 14

Part of the Chakra exit plan and live tracker. Phase 1 re-implements the shared wrappers behind their existing exports, so page code does not change. Last PR of the phase. Branch chakra-exit/04-interactive-surfaces, stacked on #2628; each PR on the ladder shows only its own diff and re-targets master as its base merges.

The last Phase 1 PR. SingleSelect keeps its export and moves onto the Registry Select (and the Registry Combobox for its one creatable caller); the error, not-found and modal-container surfaces move onto Tailwind and Registry Dialog / Empty / Button. Two app-owned guard tests pin registry contracts the registry itself ships untested.

misc/select.tsx — the hunk that carries judgement

SingleSelect<T> keeps options / value / onChange / isDisabled / placeholder / creatable / data-testid, so its 9 call sites in 7 files do not change — except login.tsx, which passed a chakraStyles object that returned provided unchanged; type:check flagged it and it is gone.

• Values round-trip through a string key. The Registry Select keys on strings; callers pass enums (SASLMechanism, SCRAMAuth_Mechanism), numbers (schema versions) and string unions. toKey(value) maps each option to String(value) and back, so onChange still receives the typed value. A value that matches no option (create-connector's undefined cluster) renders the placeholder instead of an empty label.
• creatable goes to the Registry Combobox, which is the searchable/creatable one; the plain Select has no text input. Only preview-settings.tsx uses it, with string values. clearable={false} keeps the old "no clear button" behaviour. Because onChange fires with the typed text on create, T must be string there — noted on the prop.
• data-testid still wraps the control in a div, as before. The e2e page object clicks that wrapper and then an option by exact text, which the Registry Select satisfies; the only live spec assertions on these three ids are toBeVisible().
• tests/mock-react-select.tsx and its two setup-file imports are gone. Nothing rendered a react-select under test any more, so no test changes.

Error and not-found surfaces (exports unchanged)

Module	Was	Now
misc/error-result	HStack/Stack/Heading/Text, Chakra CodeBlock, Chakra Avatars asset	flex divs, text-heading-lg / text-body-lg, Registry SimpleCodeBlock, the local ErrorBananaSlip.svg the not-found page already uses
misc/error-display	Chakra Result + Button, Chakra Section, List/ListItem/ListIcon	Registry Empty (title, description, Retry Button), the app Section wrapper, a plain ul with the existing WarningIcon
misc/error-modal	Chakra Modal with onCloseComplete driving the modal queue	Registry Dialog size="lg"; Base UI's onOpenChangeComplete(false) is the same hook, so the queue's afterClose still fires after the exit transition. The Dialog adds its close button; it routes through onClose like OK does
misc/error-boundary	Box/Flex/Icon, Chakra Button size="large" isLoading	divs, Registry Button size="lg" with icon and isLoading
misc/not-found-page, misc/not-found-content	Center/Stack/Image/Heading as="h1"	flex divs, img, h1.text-heading-xl — the h1 keeps the test's getByRole('heading', { level: 1 }) contract; the test's hand-written Chakra mock is deleted
utils/modal-container	Box	div

Guard tests (new, app-owned, in src/components/registry-guards/)

• Expanded rows survive a data swap (data-table-expanded-rows.test.tsx): expands a row, replaces the data array, flushes TanStack's scheduled reset, and expects the sub-row to stay. Verified negative: with tableOptions={{ autoResetExpanded: true }} the same test fails.
• Alert paints one icon (alert-default-icon.test.tsx): default icon, custom icon replacing it, icon={null} painting none. The Chakra pattern (an icon child) paints two, which is the case every <AlertIcon /> swap in Phase 2 must avoid; 11 files still pass <AlertIcon /> to Chakra's Alert and are listed in the plan.

Not in src/components/ui/ because Biome ignores that directory; these must stay linted.

Effect

Files importing @redpanda-data/ui: 89 → 81. misc/ is down to the chrome leftovers PR 8 owns.

Gates

bun run type:check · bun run lint (no dirty tree; remaining findings on touched files are pre-existing on master) · unit suite · integration suite (123 files / 1274 tests), including not-found-page.test.tsx and the two guards. To exercise by hand: the debug dialog's "Throw in render (ErrorBoundary)" button, and any failing backend call for ErrorDisplay / showErrorModal.

Review pass (2026-09-03)

• Base UI popups inside Chakra modals. SingleSelect is the first Registry popup rendered inside a Chakra Modal (column settings, preview fields). Chakra's scroll lock swallows wheel events outside the modal and its focus lock pulls focus back, so both modals now provide a PortalContainer and the popups render inside them. Noted for the feat: new topic messages page behind enableNewTopicMessagesPage flag #2588 stream, which owns those files.
• SingleSelect: an unset value selects nothing instead of colliding with an empty-string option; the Combobox's clear signals (re-select, Escape, blur) are ignored so a preview-tag pattern can no longer be emptied by accident; id lands on the trigger and the login form's "SASL Mechanism" label points at it again; options are mapped once.
• Behaviour that differs from react-select and is accepted: the plain Select has no type-to-filter, and typed-but-uncommitted Combobox text stays visible after blur.
• Error boundary icons lead their labels again; the error dialog is size="xl" to keep its old width; the Alert guard drops the test that asserted the footgun itself, keeping the three contract tests.

Plan (internal): https://claude.ai/code/artifact/1861e21c-624b-4270-98ad-9921b22c2498

🤖 Generated with Claude Code

[github-actions]

✅ Clean — no registry drift, off-token colours, or ad-hoc classes

App: frontend · Scope: diff vs origin/chakra-exit/03-display-primitives · Files: 15

	Count
⚠️ Outdated registry components	0
🛠 Locally-modified components	0
❓ Unknown to registry	0
🎨 Off-token palette colours	0
🔢 Ad-hoc utility classes	0

Generated by lookout audit-changes.