refactor(schema-registry): align list with topic/security listings#2546
Open
jvorcak wants to merge 10 commits into
Open
refactor(schema-registry): align list with topic/security listings#2546jvorcak wants to merge 10 commits into
jvorcak wants to merge 10 commits into
Conversation
- Replace legacy Section box with ListLayout scaffolding so the table renders flush like the topics/security lists - Add faceted Type and Compatibility filters (DataTableFacetedFilter) - Move the row delete action into a three-dots kebab menu - Use shared DataTablePagination - Load all subject details up front (useSchemaDetailsByNameQuery, shared cache) to enable list-wide type/compatibility filtering - Update schema e2e helpers/spec for the new kebab delete flow
Contributor
✅ Clean — no registry drift, off-token colours, or ad-hoc classesApp:
Generated by lookout audit-changes. |
jvorcak
marked this pull request as ready for review
July 3, 2026 15:40
- DataTablePagination is a self-contained full-width bar; drop the ListLayoutPagination wrapper that collapsed its internal justify-between and jammed the row-count text against the page-size controls (topics, schemas, roles, users, quotas) - Reuse the shared DescriptionWithHelp component for the schema list info icon so it matches the security listings; add optional testId/titleTestId props to preserve the existing schema search-help e2e assertions Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Sync dropdown-menu from the ui registry: adds an onSelect?: never guard
since Base UI menu items have no onSelect
- Migrate prompt-input attachment item off the deprecated onSelect to
onClick + closeOnClick={false} to keep the prior menu-stays-open behavior
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Align with the topics list by rendering "Create new schema" right-aligned via ListLayoutFilters actions instead of a standalone left-aligned block. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Comment on lines
+239
to
+240
| /** @deprecated Base UI menu items have no `onSelect`. Use `onClick` (add `closeOnClick={false}` to keep the menu open). */ | ||
| onSelect?: never; |
Contributor
There was a problem hiding this comment.
it sounds like a UI registry problem to fix
Collaborator
Author
There was a problem hiding this comment.
I think this was done by syncing the registry.
Comment on lines
-320
to
+319
| <ListLayoutPagination> | ||
| <DataTablePagination table={table} /> | ||
| </ListLayoutPagination> | ||
| <DataTablePagination table={table} /> |
Contributor
There was a problem hiding this comment.
what's the difference in how it looks? was it just leftover pattern we did not use?
Collaborator
Author
There was a problem hiding this comment.
We removed the border around the table, because it's not used like this on other pages.
Replace the legacy SmallStat mode/compatibility bar with the registry Stat/StatGroup components, and move the context selector into the filter row as a chip matching the Type and Compatibility faceted filters. Adds the Stat component from the @redpanda registry (r/stat.json). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
jvorcak
requested review from
a team,
datamali,
sago2k8 and
yougotashovel
and removed request for
a team
July 16, 2026 10:03
The master merge left the branch's trailing info tooltip alongside the one in master's label row, rendering the icon twice. Remove it along with the Badge and Separator imports the chip trigger no longer needs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rebuild the Context selector as a dashed filter chip so it sits inline with the Type and Compatibility filters instead of stacking a label above a wide dropdown, misaligned against the search field. Classes are taken from DataTableFacetedFilter so the chips match. The divider inside those chips was pinned to the top of the button and stopped halfway down: the registry's vertical Separator ships `self-stretch`, which is what sizes it when it has no height of its own, but `align-self: stretch` computes to `flex-start` once the cross size is definite — so any consumer passing `h-4` gets a top-pinned line. It bites every filter chip, not just ours, and pipeline-header already worked around it by hand. The one inside DataTableFacetedFilter can't be reached from a call site (`labelClassName` is its only styling hook), and patching the vendored component would trip the registry drift audit. So centre them from app entry CSS, scoped to a button's own children: every in-button vertical Separator sets a height, while the ones relying on stretch (data-table-filter's h-7 row) never do, so this can't collapse them. Same reasoning as the UX-1259 override above it. header.tsx isn't in a button, so it takes `self-center` directly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Both faceted filters were held in plain useState, so a filtered view was lost on reload and couldn't be shared — while every other filter on the page (q, context, page, showSoftDeleted) already round-trips through nuqs. Move them into the URL as `?type=AVRO,JSON&compatibility=NONE`, one param per column to match the existing convention, deriving columnFilters from the two params rather than holding a second copy of the state. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
SpicyPete
reviewed
Jul 17, 2026
| import { Tooltip, TooltipContent, TooltipTrigger } from 'components/redpanda-ui/components/tooltip'; | ||
| import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, SearchIcon } from 'lucide-react'; | ||
| import { parseAsBoolean, parseAsInteger, parseAsString, useQueryState } from 'nuqs'; | ||
| import { Text } from 'components/redpanda-ui/components/typography'; |
Contributor
There was a problem hiding this comment.
Now that Text and Heading are deprecated, lets use text-utilities in this PR instead.
SpicyPete
reviewed
Jul 17, 2026
| </h3> | ||
| <p className="text-gray-600 text-sm leading-relaxed"> | ||
| If a number matches a schema ID, the results include all subjects referencing that schema. | ||
| <p className="text-base text-gray-600 leading-relaxed"> |
Contributor
There was a problem hiding this comment.
Is there a semantic colour we can use instead of raw palette colours? Seeing gray shades being used many times, so this comment is for all of them
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.
Before:
After:
