Migrate produce record to UI registry#2507
Conversation
Replace legacy @redpanda-data/ui components with Registry equivalents (Field, Select, Input, Button, Alert, typography) and react-hook-form + Zod validation. Use standardized KeyValueField for Kafka headers. Convert the PageComponent class to a functional component using setPageHeader and useApiStoreHook for store reactivity.
Replace legacy @redpanda-data/ui components with Registry equivalents (Dialog, Choicebox, Select, Slider, Alert, Input, Button, Spinner, typography) and sonner toast. Remove the now-unused SCSS module in favor of Tailwind. Business logic, the 2-step wizard, and the props interface are unchanged, so callers need no edits.
✅ Clean — no registry drift, off-token colours, or ad-hoc classesApp:
Generated by lookout audit-changes. |
The registry Button is built on Base UI and has no asChild prop. Use render with the TanStack Link element instead, since the `as` shorthand only forwards `to` and this link needs params and search. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
| return ( | ||
| <div className="flex items-center gap-4"> | ||
| <TrashIcon /> | ||
| <Text variant="muted">{children}</Text> |
There was a problem hiding this comment.
1 general comment across the entire PR.
Now that <Text> and <Heading> are deprecated, lets ask Claude to replace them with the new text-utility class pattern
| } | ||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <Heading level={1}>Produce Kafka record</Heading> |
There was a problem hiding this comment.
Minor: In the UI we are saying "Produce" then "Produce Kafka record" right below, which feels like we can maybe remove the first "Produce" line.
There was a problem hiding this comment.
- Lets not add new <Text and <Heading components in this and prefer text-utility classes
- The Delete Records model is a bit confusing to me.
2a. It's not clear this is a multi-step dialog, and since the action is destructive red it seems like it may cause a destructive action. Suggest we make the steps more clear (or that there are multiple steps) at a dialog level
2b. Perhaps we can show the selected Topic Name in the dialog text itself as opposed to always "your topic"
3a. The manual offset only has the low number labeled, and some small alignment issues.
3b. In the top text we are saying "choose the new low offset for your selected partitions", but in the previous step we can only select 1 partition, so maybe shouldn't be plural?
3c. Showing the raw timestamp is likely correct, but it might be better for usability if we also show the human readable date.
4. Minor: The produce record page feels very spaced out, but redoing this page is likely beyond scope of the PR.
Just checked this against the current version, and it's much better now, even without the above requests
Figures
2a / 2b
3a
3c
2 participants
Needs to merge #2486 first