Skip to content

ui: add SQL to the vendored CodeMirror bundle and mount it on the SQL panes #838

Description

@andyguz17

Follow-up of #756 (drafts approved in the 2026-09-01 review). Track B — SQL Query / SQL View, step 0 of 5 (small; unblocks #839).

Summary

#753 (PR #820) vendored a CodeMirror 6 bundle (crates/ui/assets/vendor/codemirror.bundle.js, built by the documented ritual in crates/ui/vendor/codemirror/) with JSON + FHIRPath and mounted it on the View Definitions textarea (assets/vd-editor.js). The SQL Query and SQL View pages edit SQL in a plain <textarea name="sql">. Add the SQL language to the bundle and mount the editor on the SQL panes.

Requirements

  1. Add @codemirror/lang-sql to crates/ui/vendor/codemirror/package.json, export it from src/entry.js on window.HfsCodeMirror, re-run the vendoring ritual and commit the rebuilt bundle. Record the new size in the vendor README (today: JSON + FHIRPath bundle; note the delta).
  2. A mount script (assets/sql-editor.js, or a generalisation of vd-editor.js) that enhances textarea[name="sql"] inside the SQL library form: the textarea stays in the DOM as the form's source of truth, every change is written back (Save / Duplicate keep working as plain POSTs), the theme follows [data-theme] like the VD editor, and the editor backs out cleanly if the bundle is missing.
  3. Load the bundle + script from crates/ui/templates/pages/sql-library.html only (both /ui/sql/queries and /ui/sql/views use it).
  4. Dialect: SQLite. The engine is known: $sqlquery-run executes on an in-memory SQLite (rusqlite) and binds parameters as :name, which @codemirror/lang-sql's StandardSQL dialect does not recognise as a variable. Mount with the SQLite dialect so :ward highlights as in the approved design; StandardSQL and SQLDialect are exported from the bundle too, so a future engine change is a one-identifier edit, not a rebuild. (Rewritten during refinement, 2026-09-01: the original text asked for generic SQL on the assumption that the engine was unknown.)
  5. No new i18n unless an aria-label is added.

Out of scope

Live run, layout, lint, completion — #839 onwards.

Acceptance criteria

  • On both pages the SQL pane is a CodeMirror editor with SQL highlighting in light and dark; typing and saving round-trips the text unchanged (Rust router_http test on the POST + Playwright typing test).
  • With JavaScript disabled the plain textarea works (nojs project).
  • design-system.spec.ts passes; the vendor README documents the rebuilt bundle and its size.

Design reference (screenshots)

Full-page renders of the approved artboards (branch docs/756-design-references, docs/images/sql-ui-drafts/). The canvas linked above is the editable source.

SQL Query — the SQL card gets the CodeMirror editor

SQL Query — the SQL card gets the CodeMirror editor

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestsql on fhirSQL on FHIR - https://sql-on-fhir.org/ui

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions