UX-1330 - feat(sql): add SQL query workspace with Iceberg bridge#2495
Draft
c-julin wants to merge 26 commits into
Draft
UX-1330 - feat(sql): add SQL query workspace with Iceberg bridge#2495c-julin wants to merge 26 commits into
c-julin wants to merge 26 commits into
Conversation
c-julin
force-pushed
the
jc/sql-bridge-query
branch
from
a2d19ea to
3e1e3eb
Compare
c-julin
changed the title
SQL editor/workspace refactor (catalog-tree, sql-editor, sql-results, sql-wizard, sql-workspace, sql, sql API), plus vendored redpanda-ui registry component updates and supporting route/config changes. [UX-1259]
…tokens [UX-1259] Map palette literals (blue/green/orange/indigo/purple) in the SQL workspace to semantic registry tokens (info/success/warning/accent/primary) and snap arbitrary typography/radius utilities (text-[Npx], rounded-[3px], leading/ tracking-[...]) to scale tokens. Drop now-redundant dark: variants since the semantic tokens are theme-adaptive. Lookout audit: 0 off-token, 0 ad-hoc.
Remove three style={{ borderColor: 'var(--color-border)' }} props that just
re-asserted the base-layer default (* { border-color: var(--color-border) }),
and move the two static bridge-timeline widths to w-full/w-[74%]/w-[26%]
utility classes.
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
…es [UX-1330] Keywords for autocomplete now come from Monaco's built-in SQL Monarch definition, formatting runs through sql-formatter behind Monaco's native formatDocument action (preserving cursor and undo), and the wizard preview uses the registry DynamicCodeBlock (shiki) instead of a custom tokenizer rendered via dangerouslySetInnerHTML. firstKeyword, which gates the editor to SELECT-only, is a small comment-skipping regex. Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
The overlay controls were design-phase scaffolding for the SQL workspace; nothing reads the overlay query param anymore. Co-Authored-By: Claude <noreply@anthropic.com>
…s [UX-1330] JSON/JSONB columns now show a braces icon instead of the generic text glyph, and array types (TEXT[], _INT4, ARRAY<...>/LIST<...>) unwrap to their element kind with a brackets prefix. BOOL[] cells keep their raw string form instead of coercing to a scalar boolean. Also replace the results grid's manual useMemo with pure helpers (React Compiler memoizes).
…tree semantics [UX-1330] Replace hand-rolled spinner, badges, buttons, search input and text styles with registry components. Add role=tree/treeitem/group with aria-level/expanded/selected and arrow-key navigation per the WAI-ARIA tree pattern. Move tree-wide state into a context to cut per-node prop drilling, normalize arbitrary Tailwind values to the spacing scale, and cover the tree with component tests.
Mirrors ui-registry PR #205. When set, the table wrapper fills its flex-column parent and owns the scrolling, so sticky header/column cells pin to the container instead of the page. Defaults to false.
Replace hand-rolled markup in sql-results with registry primitives: Table/TableHead/TableCell (fill variant) for the grid, Empty + Kbd + Spinner for idle/running states, Alert for query errors, Badge for the bridge/truncated/watermark chips, and StatusDot for success/lag markers. Adds aria-sort-free static headers and normalizes one-off arbitrary values to scale tokens where exact. Behavior changes: - Drop client-side sorting; rows render in server order and ordering belongs to the query (ORDER BY). Exports follow server order too. - Replace the pagination-reset useEffect by keying SuccessGrid on run.token so a new run remounts with fresh paging state.
Tabs/Popover/Kbd/Button replace hand-rolled tab strip, history dropdown and shortcut chips; Run uses the secondary variant instead of !important overrides. Kbd hint is platform-aware (Ctrl on Windows/Linux). Monaco language providers move to module scope (global per language, registered once) and the Cmd/Ctrl+Enter command reads through a render-synced ref, dropping all useEffects and manual memoization.
…1330] Remove the unused ProtoCatalog/ProtoTable/ProtoColumn re-exports, unexport the QueryRun variants only consumed via the union, inline the trivial shortPgType helper at its two call sites, and trim comments that restated their declarations.
A global stylesheet forces the indicator's Circle svg to inline-block, so it sat baseline-aligned in its wrapper's 21px line box and rendered ~1px below the ring's center. Make the wrapper a flex container so the svg is blockified and centered exactly.
Replace the hand-rolled topic radio list, progress bar, badges, alerts and table-name field with Choicebox, Progress, Badge, Alert and Field registry components, and validate the table name with react-hook-form + zod. Prefill a sanitized table name from the chosen topic, render the SQL preview as an always-dark SyncCodeBlock, and outline the catalog and source-topic summary rows so they stay visible in dark mode.
Cover topic search and selection gating, sanitized table-name prefill and SQL preview, validation rejection, create submission, iceberg badge and bridged-query notice, parent error rendering, and close.
Per design discussion: the results grid is a niche, perf-sensitive one-off, so it uses react-data-grid page-locally instead of the registry table. Virtualization renders only visible rows/columns, so the full result set is handed over and the Load-100-more pagination, its state, and the footer bar are gone. The frozen row-number column replaces the hand-rolled sticky CSS, themed via rdg CSS variables mapped to design tokens (unlayered stylesheet, since Tailwind's layered utilities cannot override rdg's own custom properties). Pinned to 7.0.0-beta.47, the last release supporting React 18. The test file shims the grid root's measured size because happy-dom reports zero dimensions, which would cull every column.
…1330] Per design discussion the registry table stays a plain shadcn component without app-specific variants (ui-registry PR #205 closed for the same reason). The SQL results grid now uses react-data-grid page-locally, so nothing consumes the variant.
max-content columns can come up short of the panel width, leaving a dead gap on the right with no header surface, zebra stripe or hover. A trailing non-resizable 1fr filler column absorbs the remainder; rdg re-measures string widths on grid resize so it stays flexed.
Size data columns with minmax(max-content, 1fr) instead of max-content plus a 1fr spacer column: each column is at least content-sized and spare panel width is shared between the real columns, so the grid fills horizontally without a synthetic filler.
Replace Monaco with @uiw/react-codemirror + @codemirror/lang-sql for the SQL workspace editor. Schema-aware, alias-aware completion driven by the catalog tree; catalog arrow notation (catalog=>table) suggestions; Tab to accept, Mod-Enter to run, Shift-Alt-f / Format via sql-formatter; light/dark themes from design tokens. Replace the layout useEffect with a callback ref. Dedupe @codemirror/* via package.json overrides to fix duplicate @codemirror/state instances. Drop the Monaco SQL language registration and the monaco-editor sql module shim; Monaco stays for the YAML/TS surfaces.
c-julin
force-pushed
the
jc/sql-bridge-query
branch
from
e235250 to
b9b144c
Compare
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
1 participant
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.
Summary
Adds a SQL query workspace to Console for querying Redpanda SQL (Oxla): a catalog tree, SQL editor, results view, and an Iceberg bridge wizard.
Refs: UX-1330
Changes
frontend/src/components/pages/sql/module:sql-workspace,sql-editor,sql-results,catalog-tree,sql-wizard, sharedsql-types/sqlroute andreact-query/api/sqldata layerNotes
🤖 Generated with Claude Code