Skip to content

feat(views): add SQL beautify button to view editor#372

Open
danielnuld wants to merge 2 commits into
TabularisDB:mainfrom
danielnuld:danielnuld/view-editor-sql-beautify
Open

feat(views): add SQL beautify button to view editor#372
danielnuld wants to merge 2 commits into
TabularisDB:mainfrom
danielnuld:danielnuld/view-editor-sql-beautify

Conversation

@danielnuld

@danielnuld danielnuld commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

What

Adds a Beautify button to the view editor modal (create & edit) that pretty-prints the view definition SQL.

Why

When editing a view, the definition returned by the database is often a single dense line (e.g. MySQL stores SELECT c.id,c.name,... with no whitespace). This makes it hard to read and edit. A one-click formatter improves the editing experience.

How

  • Adds sql-formatter (^15.8.2) as a dependency.
  • New util src/utils/sqlFormat.ts exposing formatSql(sql, dialect), which maps the active driver's dialect to the matching sql-formatter language:
    • postgres → postgresql, mysql → mysql, mssql → transactsql, sqlite → sqlite, oracle → plsql, everything else → sql.
    • Keywords are upper-cased; on empty input or a parse error the original text is returned unchanged so the user's SQL is never lost.
  • ViewEditorModal gets a Beautify button next to the View Definition label, wired to the active connection's sql_dialect.
  • Adds the views.formatSql i18n key to all 8 locales (en, es, it, fr, de, ja, ru, zh).

Testing

  • pnpm typecheck and pnpm build pass; ESLint clean on changed files.
  • Manually verified against a MySQL 8 test database: opened a view stored as a one-line definition, clicked Beautify, and the SELECT … JOIN … WHERE … GROUP BY … HAVING … ORDER BY reformatted with proper indentation and keyword casing.
sql pretty

Add a "Beautify" button to the view editor modal that formats the
view definition SQL using sql-formatter, mapping the active driver's
dialect (postgres, mysql, mssql, sqlite, oracle) to the matching
formatter language. The formatter falls back to the original text on
empty input or parse errors so the user's SQL is never lost.

Adds the `views.formatSql` i18n key across all 8 locales.
@danielnuld danielnuld force-pushed the danielnuld/view-editor-sql-beautify branch from d87a938 to a9422a4 Compare June 24, 2026 16:57
Comment thread src/components/modals/ViewEditorModal.tsx Outdated
Comment thread src/utils/sqlFormat.ts
@kilo-code-bot

kilo-code-bot Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)
  • src/components/modals/ViewEditorModal.tsx
  • src/utils/sqlFormat.ts
  • tests/utils/sqlFormat.test.ts
Previous Review Summary (commit a9422a4)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit a9422a4)

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 0
WARNING 2
SUGGESTION 0
Issue Details (click to expand)

WARNING

File Line Issue
src/components/modals/ViewEditorModal.tsx 81 handleFormat reads debounced state, risking lost edits
src/utils/sqlFormat.ts 30 New exported utility lacks tests
Files Reviewed (11 files)
  • package.json - dependency addition
  • src/components/modals/ViewEditorModal.tsx - 1 issue
  • src/i18n/locales/de.json - i18n key
  • src/i18n/locales/en.json - i18n key
  • src/i18n/locales/es.json - i18n key
  • src/i18n/locales/fr.json - i18n key
  • src/i18n/locales/it.json - i18n key
  • src/i18n/locales/ja.json - i18n key
  • src/i18n/locales/ru.json - i18n key
  • src/i18n/locales/zh.json - i18n key
  • src/utils/sqlFormat.ts - 1 issue

Fix these issues in Kilo Cloud


Reviewed by kimi-k2.7-code · Input: 48.9K · Output: 6.6K · Cached: 365.8K

- Read the editor's live value in handleFormat via an onMount editor ref
  instead of the debounced `definition` state, so edits typed within the
  300ms debounce window are no longer discarded by the format.
- Add tests for sqlFormat covering each dialect mapping, keyword casing,
  empty/whitespace passthrough, and the parse-error fallback path.
@danielnuld

Copy link
Copy Markdown
Contributor Author

Thanks for the review. Both warnings addressed in bcd169b:

  • ViewEditorModal.tsx (stale debounced state): handleFormat now reads the editor's live value through an onMount editor ref instead of the debounced definition state, so edits typed within the 300ms window are no longer discarded.
  • sqlFormat.ts (missing tests): added tests/utils/sqlFormat.test.ts (13 cases) covering each dialect mapping, keyword casing, empty/whitespace passthrough, and the parse-error fallback. toFormatterLanguage is now exported so the mapping is asserted directly.

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