[Chakra exit · Phase 2 · PR 9/16] frontend: the rp-connect pages on Registry components, plus a secrets spec

[SpicyPete]

Takes rp-connect off Chakra: nine files under pages/rp-connect, plus the deletion of utils/legacy-data-table.ts (its last consumer was here) and hooks/use-pagination-params.ts. Rebased onto master, which is at 25, so this takes it to 15. With #2647 (topics) and #2649 (the security ACLs tab) that leaves five — all of them PR 13's own, which are deleted rather than migrated.

One caveat worth knowing before you read the logs table. pipelines-details renders MessagePreview and ExpandedMessage out of topics/Tab.Messages/, and those are still Chakra until #2647 merges. So this clears rp-connect by the import metric, and the Value column of the logs table still paints Chakra Flex/Text at runtime until that PR lands. Nothing to do here — #2647 is what fixes it — but the area is not visually done on this branch alone.

Opened off master; UX-179 (#2624) rebases onto this.

Reviewer's guide

File	What to look at
secrets-create/-update.tsx	FormField → Field. Chakra generated the input id and wired the label; the Registry Field does not, so every control has an explicit id/htmlFor. FieldLabel required only paints an asterisk, so required is passed to the control too. PasswordInput → Input type="password", which carries its own reveal toggle.
secrets-quick-add.tsx	The creatable Select → the Registry Combobox (creatable + onCreateOption), Modal → Dialog, useDisclosure → useState. A pending new name is deliberately not added to options: an option matching the current selection makes re-clicking it a deselect, which would clear the typed secret, and it also suppresses the Combobox's own Create item. resolveLabel already falls back to the raw value, so the pending name displays without one.
pipelines-list.tsx	Pagination keeps legacy parity — initialState at DEFAULT_TABLE_PAGE_SIZE plus pagination={rows.length > DEFAULT_TABLE_PAGE_SIZE}, matching transforms-list and connect/overview. Chakra's own defaultPageSize was 50 and it showed the footer only past that. Columns hoisted to module scope — PageComponent force-updates on every api-store write, so an inline array re-creates every header and cell on each. SearchField → the shared SearchInput, which restores /-to-focus and Escape-to-clear.
pipelines-details.tsx	The last legacy DataTable. The logs table gets back the expander column Chakra injected for subComponent, a DataTableColumnHeader on Timestamp (the Registry sorts only through that component), and a getRowId keyed on partition + offset so an expanded row stays on its message when the quick-search changes.
pipelines-create/-edit.tsx	NumberInput → Input type="number" showStepControls. Chakra's onChange was (valueAsString, valueAsNumber), so the old code stored a string; it now reads e.target.value. No step="any" — the Registry coerces step with Number(). The Registry Input enforces neither min nor max and its steppers write through the native value setter, so the compute-units field keeps a draft string and clamps via clampTasks on blur — clamping per keystroke makes the field unclearable, which pipelines-create.test.tsx pins.
redpanda-connect-intro.tsx	Registry typography + DynamicCodeBlock. The Registry Alert renders its own icon and AlertDescription is a grid, so each hint line is a block child.

Two deliberate behaviour changes

• Chakra's ButtonGroup spaced its children; the Registry's attaches them (strips inner radii and borders). Both secret forms use flex gap-2 instead, which is what they looked like before.
• The logs table's URL-seeded pagination is gone. usePaginationParams read ?page/?pageSize and then handed control to the table, so only the 10-a-page default carries over. This matches the two sibling logs tables already on master (transform-details, connector-details).

Folded in by request

Two items originally flagged as pre-existing are now fixed here:

• pipelines-create's Alert painted two icons — <AlertCircle> was passed as a child while the Registry Alert already renders a default <InfoIcon>, and on a destructive alert that default was the wrong glyph anyway. Now icon={<AlertCircle …>}.
• hooks/use-pagination-params.ts is deleted, with its test — this page was its last consumer, and the Registry pager owns page and pageSize itself. Integration drops 1329 → 1325, exactly its four tests. nuqs stays: 19 other modules use it.

Coverage

rp-connect had no tests at all, and most of it cannot be reached by a live spec: the OSS variant's config declares no pipelines API and no SecretService, so Features.pipelinesApi is false and /connect-clusters renders the intro instead of the list. So:

• secrets-create.test.tsx (integration, 4 tests) covers what the swap actually risked: both fields resolve by label text, both are required, the value field is a password, submit stays disabled until valid, and the duplicate/invalid name errors render with role="alert".
• pipelines-create.test.tsx (integration, 4 tests) pins the compute-units field against the real component: it defaults to the minimum, survives being cleared, and clamps to each bound on blur. clampTasks's own unit tests cannot see the clear-then-type regression.
• rp-connect-intro.spec.ts (Playwright, 2 tests) covers the one reachable surface — the walkthrough, the hint alert, and the install-method select driving the code block. Verified green against a live container, not just written.

Gates

type:check clean · lint:check clean on every changed file, with the colour codes stripped — ultracite wraps path:line:col in ANSI escapes, so a path-anchored filter silently matches nothing · 997 unit · 1431 integration · the new e2e spec passes in the console variant.

Pre-existing, flagged not fixed

Per the exit plan's rule — a swap PR whose diff is "identical rendering, different components" stays reviewable; the same PR with behaviour fixes folded in does not.

1. secrets-quick-add inserts a broken reference for a newly created secret. The existing-secret path emits ${secrets.NAME}; the new-secret path emits a bare secrets.NAME with no interpolation wrapper. It also uses the name as typed while creating the secret uppercased, so mySecret is stored as MYSECRET but inserted as secrets.mySecret. Two bugs in three lines, both untouched by this diff.
2. A failed secret create leaves the submit button spinning. setIsCreating(false) sits after an early return, so a rejected create leaves Select disabled behind its spinner and Cancel disabled too — the only exit is the dialog's close X. Verbatim on master.
3. max/min on the secret-name input are inert. They only apply to number, range and date inputs; on type="text" the attribute needed is maxLength. Carried over unchanged from master, which had the same max={255}.
4. The Registry Combobox exposes no id or aria-label, so the secret-name FieldLabel cannot be associated with its input. Needs an upstream prop — the label is marked in the source. Same for FieldDescription, which the Registry Field never wires into aria-describedby.
5. These forms stay useState-based rather than react-hook-form + Zod as AGENTS.md asks of new code. Converting four forms is a rewrite, not a swap, and would make this diff unreviewable — worth its own PR.

🤖 Generated with Claude Code

[github-actions]

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

App: frontend · Scope: diff vs origin/master · Files: 14

	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.

[eblairmckee]

📺 tested locally
only minor issue was the plus icon in the "add secrets" button on the create/edit pipeline page is hard coded stroke="white"

[SpicyPete]

Fixed that, and found a few other areas it wasn't using semantically correct colours