[Chakra exit · Phase 1 · PR 3/14] frontend: Registry internals for the shared display wrappers, drop Chakra type seams by SpicyPete · Pull Request #2628 · redpanda-data/console

SpicyPete · 2026-09-02T19:53:14Z

Chakra exit · Phase 1 (wrappers) · PR 3 of 14

Part of the Chakra exit plan and live tracker. Phase 1 re-implements the shared wrappers behind their existing exports, so page code does not change. Branch chakra-exit/03-display-primitives, stacked on #2627; each PR on the ladder shows only its own diff and re-targets master as its base merges.

Five shared wrappers keep their exports and get Registry internals, so their importers do not change. utils/tsx-utils.tsx no longer imports @redpanda-data/ui at all. The one type seam in state/ui.ts moves to TanStack v9, and the state/ui.ts → pages/connect/overview import is gone.

Wrappers (same export, new internals)

Module	Was	Now	Importers touched
`tsx-utils` `DefaultSkeleton`	Chakra `Skeleton height={4} noOfLines={8}`	Registry `SkeletonText lines={8} width="full"`, same `motion.div` + 2 rem margin	0 (27 importers)
`tsx-utils` `InfoText`	Chakra `Tooltip hasArrow label placement`	Registry `Tooltip` / `TooltipTrigger render` / `TooltipContent side`; `placement` narrows to `top\|bottom\|left\|right` (no caller passed one)	0
`tsx-utils` `OptionGroup`	Chakra `RadioGroup options=`	Registry `RadioGroup orientation="horizontal"` + `RadioGroupItem`, each in a `<label htmlFor>`	0
`misc/section` `Section`	Chakra `Section` (block `<section>`, white, border, `rounded-lg`, shadow, `p-6`) forwarding all `ChakraProps`	Registry `Card size="full" variant="elevated"` with `gap-0 px-6`; props are now `id`, `className`, `style`	7 files, 17 call sites — every `py=`, `my=`, `minWidth=`, `gridArea=`, `overflowY=`, `borderColor=` became a class or an inline `gridArea`; `flexDirection="column"` on a block Box was a no-op and is dropped
`misc/tabs` `Tabs`	Chakra `Tabs items=` (index-based)	Registry `Tabs` / `TabsList variant="underline"` / `TabsTrigger` / `TabsContent`, value-based; `isFitted` → `layout="full"`; inactive panels stay unmounted as before	0 (5 importers); its 6 tests pass unchanged
`misc/statistic` `Statistic`	Chakra `Stat` + `StatNumber`/`StatLabel`, `SpaceProps` passthrough	Registry `Stat label value`; props are `title`, `value`, `className`. No caller used `hint` or a space prop	0 (4 importers, 24 sites)
`misc/small-stat` `SmallStat`	Chakra `Flex` + `Text`	a flex `div` + `span`; nothing here is a Stat	0
`.codeBox` (what `tsx-utils` `Code` and nine raw call sites render)	hardcoded light grey background, no text colour — unreadable in the dark theme	`--color-surface-subtle` / `--color-border` tokens, so it reads in both themes	0

Type seams

state/ui.ts: SortingState now comes from @tanstack/react-table (v9). The shape is identical to the v8 one Chakra re-exported ({ id: string; desc: boolean }[]), and it was the last file importing it from @redpanda-data/ui.
ConnectTabKeys is defined in state/ui.ts and no longer imported from a page component. TopicTabId still comes from topics/topic-details as an import type — erased at build, and that file belongs to the feat: new topic messages page behind enableNewTopicMessagesPage flag #2588 stream, so it moves when that lands.
utils/legacy-data-table.ts is deliberately untouched: it derives column/row types from the legacy DataTable because the app's v9 ColumnDef is the wrong shape for that component. It deletes with the last legacy table (its own comment says so).

What a reviewer should look at

The two hunks with judgement in them are misc/section.tsx (a <section> became a Card kept in block flow with a grid-area-only style) and misc/tabs/tabs.tsx (uncontrolled Registry Tabs seeded from selectedTabKey, which the old wrapper also read only once). Visually: Statistic now renders the Registry Stat, so the stat strips on Overview, Broker details, Kafka Connect cards and Reassign partitions switch from value-above-label to label-above-value — the same Stat the consumer-group page already uses. The old status-bar colour class on Overview's cluster-status stat is passed through, but its CSS was scoped under a dead .ant-statistic selector and has not painted for some time.

Effect

Files importing @redpanda-data/ui: 95 → 89.

Gates

bun run type:check · bun run lint (no dirty tree; every remaining lint finding on touched files is pre-existing on master) · unit suite · integration suite (121 files / 1270 tests), including misc/tabs/tabs.test.tsx.

Review pass (2026-09-03)

Section keeps block flow. Card is a flex column, which stretched the "Create …" buttons in the security tabs to full width and stopped margins collapsing; block restores the old layout. Its style prop is typed to gridArea only, and Overview's <hr> keeps the margins the Chakra Section used to inject. The Card is a div, not a <section> — the registry Card has no render prop; nothing selects on the element.
Tabs is uncontrolled (defaultValue), forwards onValueChange, and passes activateOnFocus so arrow keys still select a tab as Chakra's did. Function-valued content is rendered through a child component, so it runs only for the active panel. Panels keep Chakra's 1rem padding.
Statistic is a plain Stat; spacing moved to the rows that lay stats out (Flex gap={8} / flex gap-8) instead of a margin baked into each stat.
OptionGroup nests each radio in the registry Label (implicit association), replacing hand-built ids that could collide.
InfoText builds one tooltip tree; LogsTab loses a variant no caller passed; the unit stub drops two dead type exports.

Plan (internal): https://claude.ai/code/artifact/1861e21c-624b-4270-98ad-9921b22c2498

🤖 Generated with Claude Code

github-actions · 2026-09-02T19:54:13Z

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

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

	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.

…akra type seams Five app-owned wrappers keep their exports and get Registry internals, so their importers do not change: - tsx-utils: DefaultSkeleton -> SkeletonText; InfoText -> one Tooltip / TooltipTrigger / TooltipContent tree (placement narrows to top|bottom| left|right, no caller passed one); OptionGroup -> RadioGroup + RadioGroupItem nested in the Registry Label. The file no longer imports @redpanda-data/ui. - misc/section: Chakra Section -> Card size="full" kept in block flow with Section's px-6; props are children, id, className and a grid-area-only style. The 17 call sites that passed py / my / minWidth / gridArea / overflowY / borderColor move them to a class, a wrapper or gridArea; flexDirection on a block Box was a no-op. Overview's <hr> keeps the margins the Chakra Section injected. LogsTab loses a `variant` no caller passed. - misc/tabs: Chakra Tabs items= -> Registry Tabs, uncontrolled with defaultValue, underline variant, activateOnFocus so arrow keys still select; panels keep Chakra's 1rem padding; isFitted -> layout="full". Its six tests pass unchanged. - misc/statistic: Chakra Stat -> Registry Stat label/value (title, value, className; hint and SpaceProps had no callers). Spacing moves to the rows that lay stats out (Flex gap={8} / flex gap-8). - misc/small-stat: Flex + Text -> a flex div. Type seams: state/ui.ts takes SortingState from @tanstack/react-table (same shape as the v8 one Chakra re-exported) and defines ConnectTabKeys itself instead of importing it from pages/connect/overview. TopicTabId stays an `import type` from topic-details until the #2588 stream lands. utils/legacy-data-table.ts is untouched on purpose: it derives its types from the legacy DataTable because the v9 ColumnDef is the wrong shape for it, and deletes with the last legacy table. Importers of @redpanda-data/ui: 95 -> 89. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

`Code` in tsx-utils and nine raw call sites render `.codeBox`, which hardcoded a light grey background with no text colour, so in the dark theme the inherited light foreground sat on a light box and the text was unreadable (seen on the topic-messages "Backend Error" alert). Background and border now come from the surface and border tokens, which resolve in both themes and match the registry's inline code. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

eblairmckee · 2026-09-04T16:00:38Z

 export function SmallStat(p: { title: JSX.Element | string; children: JSX.Element | number | string }) {
  return (
-    <Flex color="var(--color-foreground)" fontFamily="Inter" fontWeight="400" gap="2">
-      <Text fontWeight="500">{p.title}: </Text>
+    <div className="flex gap-2 text-foreground">
+      <span className="font-medium">{p.title}: </span>
      {p.children}
-    </Flex>
+    </div>
  );
 }


why not use the registry Stat?

there is a small size https://ui-playground.netlify.app/stat

This PR is to remove the usage of Chakra within internal components + change no visuals ideally. The Phase 2 work will be swapping to actual Registry components

eblairmckee · 2026-09-04T16:02:09Z

-      <Section py={4}>
-        <Flex>
+      <Section className="py-4">
+        <Flex gap={8}>


I thought we got rid of Flex since that was chakra, preferring plain divs + tailwind instead

This PR is just to replace the components usage of Chakra, not at the page level.
Page level is coming in the Phase 2 work

eblairmckee · 2026-09-04T16:03:04Z

+                <Statistic
+                  className={`status-bar ${clusterStatus.className}`}
+                  title="Cluster Status"
+                  value={clusterStatus.displayText}
+                />
+                <Statistic title="Cluster Storage Size" value={brokerSize} />
+                <Statistic title="Cluster Version" value={version} />
+                <Statistic title="Brokers Online" value={brokersOnlineText} />
+                <Statistic title="Topics" value={overview.kafka?.topicsCount ?? NOT_AVAILABLE} />
+                <Statistic title="Replicas" value={overview.kafka?.replicasCount ?? NOT_AVAILABLE} />


i feel like we shouldn't have these thing wrappers of registry components... ie: replace Statistic with Stat, Section with Card. otherwise we're just perpetuating more tech debt we'll have to clean up in the future.

eblairmckee · 2026-09-04T16:04:09Z

    <>
      <Box my="1rem">The logs below are for the last five hours.</Box>

-      <Section borderColor={variant === 'ghost' ? 'transparent' : undefined} minWidth="800px" overflowY="auto">


iiutc, the transparent border override is to prevent the global selector that adds a border to every div. I know we're removing that in an upcoming PR, but wanted to call it out in case this was missed

SpicyPete mentioned this pull request Sep 2, 2026

[Chakra exit · Phase 1 · PR 4/14] frontend: SingleSelect and the error/not-found surfaces on Registry components, plus two guard tests #2629

Open

SpicyPete changed the title ~~frontend: Registry internals for the shared display wrappers, drop Chakra type seams~~ [Chakra exit · Phase 1 · PR 3/14] frontend: Registry internals for the shared display wrappers, drop Chakra type seams Sep 2, 2026

SpicyPete requested review from a team, Mateoc, datamali, eblairmckee and sago2k8 and removed request for a team September 2, 2026 22:15

SpicyPete self-assigned this Sep 2, 2026

SpicyPete added the frontend label Sep 2, 2026

SpicyPete force-pushed the chakra-exit/02-toast branch from 16bc1b0 to f1b4367 Compare September 3, 2026 15:30

SpicyPete force-pushed the chakra-exit/03-display-primitives branch from a3fe072 to 8e31d03 Compare September 3, 2026 15:30

SpicyPete force-pushed the chakra-exit/02-toast branch from f1b4367 to 90ba8bd Compare September 3, 2026 15:53

SpicyPete force-pushed the chakra-exit/03-display-primitives branch from 8e31d03 to 85b9ef3 Compare September 3, 2026 15:53

SpicyPete force-pushed the chakra-exit/02-toast branch from 90ba8bd to 0bcd095 Compare September 3, 2026 23:08

SpicyPete force-pushed the chakra-exit/03-display-primitives branch from 85b9ef3 to dd5ebb7 Compare September 3, 2026 23:08

SpicyPete force-pushed the chakra-exit/02-toast branch from 0bcd095 to 044be93 Compare September 4, 2026 14:06

SpicyPete force-pushed the chakra-exit/03-display-primitives branch 2 times, most recently from fad9e0b to fb58adc Compare September 4, 2026 14:55

Base automatically changed from chakra-exit/02-toast to master September 4, 2026 15:54

SpicyPete and others added 2 commits September 4, 2026 08:55

SpicyPete force-pushed the chakra-exit/03-display-primitives branch from ba59065 to 2a6dbb6 Compare September 4, 2026 15:56

eblairmckee reviewed Sep 4, 2026

View reviewed changes

Navigation Menu

Uh oh!

[Chakra exit · Phase 1 · PR 3/14] frontend: Registry internals for the shared display wrappers, drop Chakra type seams - #2628

[Chakra exit · Phase 1 · PR 3/14] frontend: Registry internals for the shared display wrappers, drop Chakra type seams#2628
SpicyPete wants to merge 2 commits into
masterfrom
chakra-exit/03-display-primitives

SpicyPete commented Sep 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 2, 2026 •

edited

Loading

Uh oh!

eblairmckee Sep 4, 2026

Uh oh!

eblairmckee Sep 4, 2026

Uh oh!

SpicyPete Sep 4, 2026

Uh oh!

eblairmckee Sep 4, 2026

Uh oh!

SpicyPete Sep 4, 2026

Uh oh!

eblairmckee Sep 4, 2026

Uh oh!

eblairmckee Sep 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

SpicyPete commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chakra exit · Phase 1 (wrappers) · PR 3 of 14

Wrappers (same export, new internals)

Type seams

What a reviewer should look at

Effect

Gates

Review pass (2026-09-03)

Uh oh!

github-actions Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

eblairmckee Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

eblairmckee Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

SpicyPete Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

eblairmckee Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

SpicyPete Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

eblairmckee Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

eblairmckee Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SpicyPete commented Sep 2, 2026 •

edited

Loading

github-actions Bot commented Sep 2, 2026 •

edited

Loading