frontend: migrate /schema-registry pages to new UI Registry components#2356
Merged
frontend: migrate /schema-registry pages to new UI Registry components#2356
Conversation
Purely a component change, the logic should remain the same.
And now matches edit-mode.
To the new UI registry components
Rewrite modals.tsx from imperative openModal() pattern to declarative controlled Dialog components. Replace Modal/Alert/Box/Button from @redpanda-data/ui with registry equivalents.
Replace legacy @redpanda-data/ui components with registry equivalents and sonner toasts. DataTable kept as-is for separate migration.
r-vasquez
force-pushed
the
migrate-create-page
branch
from
ab25ee5 to
c220fa8
Compare
Replace all @redpanda-data/ui components with registry equivalents. Migrate toasts to sonner, Tabs to compound pattern, CodeBlock to DynamicCodeBlock, LegacyButton to Button+Tooltip. This also includes the update of the DynamicCodeBlock component which fixes the lack of syntax highlighting.
Replace legacy DataTable with useReactTable, composed Table/TableHeader/TableBody, and DataTablePagination. Zero @redpanda-data/ui imports remain in schemas directory.
r-vasquez
force-pushed
the
migrate-create-page
branch
from
c220fa8 to
5e1818f
Compare
malinskibeniamin
approved these changes
Apr 1, 2026
jvorcak
reviewed
Apr 1, 2026
| <div className="mt-6 flex items-center gap-4"> | ||
| <Button | ||
| data-testid="edit-compatibility-save-btn" | ||
| disabled={api.userData?.canManageSchemaRegistry === false} |
Collaborator
There was a problem hiding this comment.
I think we should aim for always showing a tooltip why a button is disabled instead of silently disabling it. If there is no support for this in UI registry I think we should add it WDYT? @eblairmckee @malinskibeniamin
I used to work in a way that we guarded this with TS. If you provided disabled, you had to provide a disabledTooltip property.
Contributor
There was a problem hiding this comment.
I agree, maybe not necessarily having a property but just wrapping any disabled button in a Tooltip
Contributor
Author
There was a problem hiding this comment.
Done in 4221074, I was wrapping the buttons on tooltips in the other pages but missed that here.
| const { data: schemaCompatibility, refetch: refetchCompatibility } = useSchemaCompatibilityQuery(); | ||
| const deleteSchemaMutation = useDeleteSchemaSubjectMutation(); | ||
| const [deleteTarget, setDeleteTarget] = useState<{ kind: 'soft' | 'permanent'; name: string } | null>(null); | ||
| const [sorting, setSorting] = useState<SortingState>([]); |
Collaborator
There was a problem hiding this comment.
Should we move these to URL? We have mechanisms already to have sorting & pagination in the URL.
Run yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r combobox
r-vasquez
force-pushed
the
migrate-create-page
branch
from
afca77b to
2d0922b
Compare
jvorcak
approved these changes
Apr 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR includes the changes to migrate all pages in the
/schema-registryroute to the new UI registry components. The biggest changes are the Edit Compatibility page and the new Data Table component used in the List subject page.Examples
New Edit Compat page
Before
After
New Data Table
Before
After (now it includes pagination)
New codeblock component used in details page
Before
After
