Skip to content

refactor(schema-registry): align list with topic/security listings #2546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jvorcak wants to merge 14 commits into
base: master
Choose a base branch
from
Open

refactor(schema-registry): align list with topic/security listings #2546

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3f195c5
refactor(schema-registry): align list with topic/security listings
jvorcak Jul 1, 2026
27f8885
fix(list): render DataTablePagination full-width, align schema info icon
jvorcak Jul 3, 2026
eabefed
chore(dropdown-menu): sync registry, migrate onSelect to onClick
jvorcak Jul 3, 2026
fc5b2da
refactor(schema-registry): move create button to filter row actions
jvorcak Jul 3, 2026
0e41c58
refactor(schema-registry): use registry Stat for mode/compatibility
jvorcak Jul 16, 2026
da14baf
Merge branch 'master' into worktree-UX-1372-schema-registry-table-cle…
jvorcak Jul 16, 2026
eff3ddd
Merge branch 'master' into worktree-UX-1372-schema-registry-table-cle…
jvorcak Jul 17, 2026
32fef09
fix(schema-registry): drop duplicate context tooltip left by merge
jvorcak Jul 17, 2026
1d63c55
fix(schema-registry): inline the Context chip and centre its divider
jvorcak Jul 17, 2026
339dd55
fix(schema-registry): persist type and compatibility filters in the URL
jvorcak Jul 17, 2026
451eea7
fix(schema-registry): use text utilities and semantic colors in schem…
jvorcak Jul 20, 2026
6b9b424
fix(schema-registry): don't show required errors on create form befor…
jvorcak Jul 20, 2026
784808e
style: remove vertical separator centering override from globals.css
jvorcak Jul 20, 2026
4dcf56e
refactor(schema-registry): use text-heading-sm/text-body utilities in…
jvorcak Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/layout/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function BreadcrumbHeaderRow({ useNewSidebar, breadcrumbItems }: BreadcrumbHeade
{useNewSidebar ? (
<>
<SidebarTrigger />
<Separator className="mr-2 h-4" orientation="vertical" />
<Separator className="mr-2 h-4 self-center" orientation="vertical" />
</>
) : null}
{isEmbedded() ? null : (
Expand Down
5 changes: 1 addition & 4 deletions frontend/src/components/pages/quotas/quotas-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import {
EmptyHeader,
EmptyTitle,
} from 'components/redpanda-ui/components/empty';
import { ListLayoutPagination } from 'components/redpanda-ui/components/list-layout';
import { Skeleton } from 'components/redpanda-ui/components/skeleton';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'components/redpanda-ui/components/table';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
Expand Down Expand Up @@ -317,9 +316,7 @@ const QuotasList = () => {
</TableBody>
</Table>

<ListLayoutPagination>
<DataTablePagination table={table} />
</ListLayoutPagination>
<DataTablePagination table={table} />
Comment on lines -320 to +319

@malinskibeniamin malinskibeniamin Jul 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's the difference in how it looks? was it just leftover pattern we did not use?

@jvorcak jvorcak Jul 13, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We removed the border around the table, because it's not used like this on other pages.

</PageContent>
</TooltipProvider>
);
Expand Down
46 changes: 22 additions & 24 deletions frontend/src/components/pages/schemas/schema-context-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
* by the Apache License, Version 2.0
*/

import { Badge } from 'components/redpanda-ui/components/badge';
import { Button } from 'components/redpanda-ui/components/button';
import {
Command,
Expand All @@ -18,9 +19,10 @@ import {
CommandList,
} from 'components/redpanda-ui/components/command';
import { Popover, PopoverContent, PopoverTrigger } from 'components/redpanda-ui/components/popover';
import { Separator } from 'components/redpanda-ui/components/separator';
import { Tooltip, TooltipContent, TooltipTrigger } from 'components/redpanda-ui/components/tooltip';
import { cn } from 'components/redpanda-ui/lib/utils';
import { CheckIcon, ChevronDownIcon, InfoIcon } from 'lucide-react';
import { CheckIcon, InfoIcon } from 'lucide-react';
import type { FC } from 'react';
import { useState } from 'react';

Expand All @@ -44,32 +46,16 @@ export const SchemaContextSelector: FC<SchemaContextSelectorProps> = ({
const selectedLabel = contexts.find((c) => c.id === selectedContext)?.label ?? 'All';

return (
<div className="mt-2 flex flex-col gap-1.5">
<div className="flex items-center gap-1.5">
<span className="font-medium text-body-sm">Context</span>
<Tooltip>
<TooltipTrigger
render={
<span className="inline-flex cursor-help">
<InfoIcon className="size-4 text-muted-foreground" />
</span>
}
/>
<TooltipContent side="top">
Schema Registry contexts allow grouping subjects into isolated namespaces
</TooltipContent>
</Tooltip>
</div>
<div className="flex items-center gap-1.5">
<Popover onOpenChange={setOpen} open={open}>
<PopoverTrigger
render={
<Button
className="w-44 justify-between truncate"
data-testid="schema-context-selector"
variant="secondary-outline"
>
<span className="truncate text-body">{selectedLabel}</span>
<ChevronDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
<Button className="h-8 border-dashed" data-testid="schema-context-selector" size="sm" variant="outline">
Context
<Separator className="mx-2 h-4 self-center" orientation="vertical" />
<Badge className="max-w-32 truncate rounded-sm px-1 font-normal" variant="secondary">
{selectedLabel}
</Badge>
</Button>
}
/>
Expand Down Expand Up @@ -101,6 +87,18 @@ export const SchemaContextSelector: FC<SchemaContextSelectorProps> = ({
</Command>
</PopoverContent>
</Popover>
<Tooltip>
<TooltipTrigger
render={
<span className="inline-flex cursor-help">
<InfoIcon className="size-4 text-muted-foreground" />
</span>
}
/>
<TooltipContent side="top">
Schema Registry contexts allow grouping subjects into isolated namespaces
</TooltipContent>
</Tooltip>
</div>
);
};
13 changes: 9 additions & 4 deletions frontend/src/components/pages/schemas/schema-create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,8 @@ const SchemaEditor = (p: {
const [contextWarning, setContextWarning] = useState('');
const [switchFormatOpen, setSwitchFormatOpen] = useState(false);
const [pendingFormat, setPendingFormat] = useState<string | null>(null);
// Only surface "required" errors after the user has interacted with a field, not on mount.
const [touched, setTouched] = useState<{ context: boolean; topic: boolean }>({ context: false, topic: false });

const availableContexts = useMemo(() => {
if (!(srContextsEnabled && apiContexts && subjects)) return [];
Expand Down Expand Up @@ -575,7 +577,7 @@ const SchemaEditor = (p: {
)}
<div className="flex max-w-[650px] flex-col gap-8">
{srContextsEnabled && !isAddVersion && (
<Field data-invalid={!state.context || undefined}>
<Field data-invalid={(touched.context && !state.context) || undefined}>
<FieldLabel>Context</FieldLabel>
<FieldDescription>Select an existing context or type a new name to create one.</FieldDescription>
<Combobox
Expand All @@ -585,6 +587,7 @@ const SchemaEditor = (p: {
createLabel="context"
onChange={(value) => {
const contextId = contextLabelToId(value);
setTouched((t) => ({ ...t, context: true }));
setContextWarning('');
p.onStateChange((prev) => ({
...prev,
Expand All @@ -605,7 +608,7 @@ const SchemaEditor = (p: {
value={contextIdToLabel(state.context)}
/>
{contextWarning && <div className="mt-1 text-body text-destructive">{contextWarning}</div>}
{!state.context && <FieldError>Context is required</FieldError>}
{touched.context && !state.context && <FieldError>Context is required</FieldError>}
</Field>
)}

Expand All @@ -627,6 +630,7 @@ const SchemaEditor = (p: {
CUSTOM: 'Custom',
}}
onValueChange={(e) => {
setTouched((t) => ({ ...t, topic: false }));
p.onStateChange((prev) => ({ ...prev, userInput: '', strategy: e as NamingStrategy }));
}}
value={state.strategy}
Expand All @@ -644,11 +648,12 @@ const SchemaEditor = (p: {
</Field>

{showTopicNameInput && (
<Field data-invalid={!state.userInput || undefined}>
<Field data-invalid={(touched.topic && !state.userInput) || undefined}>
<FieldLabel>Topic name</FieldLabel>
<Select
disabled={isAddVersion}
onValueChange={(e) => {
setTouched((t) => ({ ...t, topic: true }));
p.onStateChange((prev) => ({ ...prev, userInput: e }));
}}
value={state.userInput}
Expand All @@ -664,7 +669,7 @@ const SchemaEditor = (p: {
))}
</SelectContent>
</Select>
{!state.userInput && <FieldError>Topic name is required</FieldError>}
{touched.topic && !state.userInput && <FieldError>Topic name is required</FieldError>}
</Field>
)}

Expand Down
Loading
Loading