Skip to content

feat: Add reusable SQL query blocks and artifact tabs - #669

Merged
ilyabo merged 7 commits into
mainfrom
add-sql-query-block
Jun 1, 2026
Merged

ilyabo merged 7 commits into
mainfrom
add-sql-query-block

Conversation

@ilyabo

@ilyabo ilyabo commented May 31, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • Refactor @sqlrooms/sql-editor around id-addressable queries and a new SqlQuery compound surface.
  • Add SqlQueryBlock plus createSqlQueryBlockDefinition() so SQL queries can be embedded in BlockDocuments or opened as top-level artifact tabs.
  • Wire the new sql-query type into the CLI app’s stateful block registry, artifact types, renderer, and AI context tooling.
  • Update docs and package exports to guide new consumers toward SqlQuery.* while keeping legacy workbench components compatible.

Testing

  • Typecheck passed for @sqlrooms/sql-editor and the CLI app.
  • Production builds completed for @sqlrooms/sql-editor and the CLI app.
  • Lint passed for the CLI app; @sqlrooms/sql-editor retained one pre-existing warning in CreateTableModal.tsx.

Summary by CodeRabbit

  • New Features

    • SQL Query artifacts can be created, embedded in worksheets, and opened as top-level query tabs.
    • New reusable SqlQuery component and compact query block with resizable results and independent run/cancel behavior.
    • Query execution now supports ID-addressable operations so queries can be managed independently.
  • Improvements

    • Editor: optional gutter hiding and improved run/cancel controls that target specific queries.
    • Results: per-query results rendering, customizable footer, and refined pagination styling.
  • Documentation

    • Guides updated for SQL Query artifacts and single-query surfaces.

@coderabbitai

coderabbitai Bot commented May 31, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e4674c7a-7d92-421c-a2a9-fe4be24a68ff

📥 Commits

Reviewing files that changed from the base of the PR and between abf1f48 and d297ab1.

📒 Files selected for processing (4)
  • apps/sqlrooms-cli-ui/src/context/createArtifactContextAiTools.ts
  • packages/data-table/src/DataTablePaginated.tsx
  • packages/sql-editor/src/SqlEditorSlice.tsx
  • packages/sql-editor/src/components/QueryEditorPanelEditor.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/data-table/src/DataTablePaginated.tsx
  • apps/sqlrooms-cli-ui/src/context/createArtifactContextAiTools.ts
  • packages/sql-editor/src/SqlEditorSlice.tsx

📝 Walkthrough

Walkthrough

Adds id-addressable SQL query support, a reusable SqlQuery compound UI plus a SqlQueryBlock factory, registers sql-query as a stateful artifact in the CLI and worksheet renderer, updates editor components to accept queryId, expands exports/docs, and makes small UI styling adjustments.

Changes

SQL Query Blocks and Artifacts

Layer / File(s) Summary
SQL Editor API Refactor
packages/sql-editor/src/SqlEditorSlice.tsx
Adds id-addressable query APIs (ensureQuery, removeQuery, renameQuery, runQueryById, abortQueryById, clearQueryResult) and richer timing metadata (startedAt, durationMs, completedAt); selected-tab APIs delegate to id-based methods.
SqlQuery compound & block
packages/sql-editor/src/SqlQuery.tsx, packages/sql-editor/src/SqlQueryBlock.tsx
Introduces SqlQuery compound component (Root/Header/Toolbar/Actions/Editor/Results), SqlQueryBlock with compact/full modes, and createSqlQueryBlockDefinition factory wired to sqlEditor lifecycle.
Editor component enhancements
packages/sql-editor/src/components/*, packages/sql-editor/src/SqlCodeMirrorEditor.tsx
Updates actions/editor/results/limit select to accept optional queryId, update run/abort to run by id, add hideGutter prop and compact-related wiring in the CodeMirror wrapper.
Exports, dependency, and docs
packages/sql-editor/src/index.ts, packages/sql-editor/package.json, packages/sql-editor/README.md, dev-docs/*, apps/sqlrooms-cli-ui/README.md
Re-exports new types/components, adds @sqlrooms/blocks workspace dependency, and documents reusable single-query surfaces and block usage.
CLI artifact registration & commands
apps/sqlrooms-cli-ui/src/statefulBlockArtifactConfigs.ts, apps/sqlrooms-cli-ui/src/artifactTypes.tsx, apps/sqlrooms-cli-ui/src/createDashboardCommands.ts
Registers sql-query in stateful block configs and artifact registry, extends CLI artifact union, ensures query state on creation/selection, and adds a per-type create command.
Worksheet renderer & artifact context
apps/sqlrooms-cli-ui/src/workspace/WorksheetSqlQueryBlockRenderer.tsx, apps/sqlrooms-cli-ui/src/workspace/WorksheetArtifact.tsx, apps/sqlrooms-cli-ui/src/context/createArtifactContextAiTools.ts
Adds worksheet block renderer for sql-query and updates artifact-context reading to synthesize sql-query payloads by ensuring/reading query state from the store.
UI styling
packages/data-table/src/DataTablePaginated.tsx, packages/data-table/src/DataTablePaginatedFooter.tsx, packages/documents/src/.../BlockDocumentStatefulBlockNodeView.tsx
Adjust table header sticky/border/padding rules, make footer non-sticky relative layout, and tweak stateful-block resize-handle alignment.
Documentation
dev-docs/tasks/sql-query-block-artifacts.md, apps/sqlrooms-cli-ui/README.md, packages/sql-editor/README.md, packages/documents/README.md
Adds design spec and README updates describing SQL query blocks, id-addressable actions, reusable single-query UI, and resize-handle clarification.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • sqlrooms/sqlrooms#666: Prior work introducing stateful-block artifact model that sql-query registration builds upon.

Suggested labels

codex

Suggested reviewers

  • dmitriy-kostianetskiy
  • mihajlo-stojkovic
  • bdjulbic

Poem

🐰 Hop, hop — a query for every spot,

Blocks and tabs now know their id a lot,
Compact view to full-screen sweep,
Run-by-id, results to keep,
A rabbit cheers: the rows no longer flop!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 17.65% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main feature addition: reusable SQL query blocks and artifact tabs, which aligns with the core objectives of the PR.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch add-sql-query-block

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ilyabo ilyabo changed the title Add reusable SQL query blocks and artifact tabs feat: Add reusable SQL query blocks and artifact tabs Jun 1, 2026
@ilyabo
ilyabo marked this pull request as ready for review June 1, 2026 11:28

@coderabbitai coderabbitai Bot left a comment

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.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/sqlrooms-cli-ui/src/context/createArtifactContextAiTools.ts`:
- Around line 104-125: The sql-query branch reads state.sqlEditor.config.queries
and queryResultsById without guaranteeing the artifact-backed query is loaded,
so add a guard to ensure the backing query is initialized before reading
context: if query is undefined, call a new or existing initializer (e.g.,
ensureQueryLoadedForArtifact(artifactId) or dispatch/selectQuery for artifactId)
to load/create the query into state.sqlEditor.config.queries and
queryResultsById, then re-read query and result; finally return the payload
using the now-guaranteed query and result. Ensure you reference artifactId,
state.sqlEditor.config.queries, and state.sqlEditor.queryResultsById in the
change.

In `@packages/data-table/src/DataTablePaginated.tsx`:
- Around line 173-175: The Tailwind v3 important modifier syntax is used in
DataTablePaginated.tsx; update the className usages on TableHeader and TableRow
to use Tailwind v4 placement of the "!" at the end of the utility (e.g., replace
"[&_tr]:!border-b-0" with "[&_tr]:border-b-0!" and any "!border-b-0" occurrences
with "border-b-0!") so the TableHeader and TableRow className strings conform to
Tailwind v4.

In `@packages/sql-editor/src/components/QueryEditorPanelEditor.tsx`:
- Around line 51-58: The current editorOptions memo unconditionally spreads
CODEMIRROR_OPTIONS then sets lineNumbers, foldGutter, and highlightActiveLine to
false or undefined, which overwrites defaults when compact is false; change it
so overrides are only applied when compact is true (e.g., conditionally include
properties) so CODEMIRROR_OPTIONS values remain intact when compact is false;
update the useMemo that defines editorOptions (referencing editorOptions,
CODEMIRROR_OPTIONS, and compact) to only inject the false overrides in compact
mode.

In `@packages/sql-editor/src/SqlEditorSlice.tsx`:
- Around line 327-336: The current removeQuery() implementation recreates a
synthetic 'default' query when the last query is deleted; change removeQuery()
to perform a pure deletion (remove the id-addressable state from config.queries,
config.openTabs, config.selectedQueryId without injecting a 'default' entry) so
it can be used by artifact/block deletion paths without leaving phantom tabs,
and move the "always keep one workbench tab" fallback into the UI/tab-specific
delete flow (the function that handles user tab deletions—e.g., the
deleteTab/removeActiveTab handler) so the editor UI ensures at least one visible
tab while library-level removeQuery() remains generic and composable.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: de4d2d9c-a2f1-463a-9c8a-c7f4707033a9

📥 Commits

Reviewing files that changed from the base of the PR and between 72c628a and abf1f48.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (24)
  • apps/sqlrooms-cli-ui/README.md
  • apps/sqlrooms-cli-ui/src/artifactTypes.tsx
  • apps/sqlrooms-cli-ui/src/context/createArtifactContextAiTools.ts
  • apps/sqlrooms-cli-ui/src/createDashboardCommands.ts
  • apps/sqlrooms-cli-ui/src/statefulBlockArtifactConfigs.ts
  • apps/sqlrooms-cli-ui/src/workspace/WorksheetArtifact.tsx
  • apps/sqlrooms-cli-ui/src/workspace/WorksheetSqlQueryBlockRenderer.tsx
  • dev-docs/tasks/sql-query-block-artifacts.md
  • packages/data-table/src/DataTablePaginated.tsx
  • packages/data-table/src/DataTablePaginatedFooter.tsx
  • packages/documents/README.md
  • packages/documents/src/BlockDocumentEditor/node-views/BlockDocumentStatefulBlockNodeView.tsx
  • packages/sql-editor/README.md
  • packages/sql-editor/package.json
  • packages/sql-editor/src/SqlCodeMirrorEditor.tsx
  • packages/sql-editor/src/SqlEditorSlice.tsx
  • packages/sql-editor/src/SqlQuery.tsx
  • packages/sql-editor/src/SqlQueryBlock.tsx
  • packages/sql-editor/src/components/QueryEditorPanel.tsx
  • packages/sql-editor/src/components/QueryEditorPanelActions.tsx
  • packages/sql-editor/src/components/QueryEditorPanelEditor.tsx
  • packages/sql-editor/src/components/QueryResultLimitSelect.tsx
  • packages/sql-editor/src/components/QueryResultPanel.tsx
  • packages/sql-editor/src/index.ts

Comment thread apps/sqlrooms-cli-ui/src/context/createArtifactContextAiTools.ts
Comment thread packages/data-table/src/DataTablePaginated.tsx Outdated
Comment thread packages/sql-editor/src/components/QueryEditorPanelEditor.tsx
Comment thread packages/sql-editor/src/SqlEditorSlice.tsx Outdated
@ilyabo
ilyabo merged commit 42eb60c into main Jun 1, 2026
4 checks passed
@ilyabo
ilyabo deleted the add-sql-query-block branch June 1, 2026 19:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant