Files
supabase/apps/studio/components
Charis b6cdd5cce3 refactor(sql-editor): extract pure SQL helpers + tighten safe-SQL boundary (decompose 2/6) (#47831)
## Summary

1. **Extract pure logic** out of the 1056-line `SQLEditor.tsx` monolith
into unit-tested functions in `SQLEditor.utils.ts`.
2. **Remove `rawSql()` from the SQL editor** and tighten the
untrusted→safe boundary per the `safe-sql-execution` model.

## Extracted functions (+ tests)

- `getEditorSql(editor, snippetContent?)` — selection → full value →
snippet fallback. Returns an **`UntrustedSqlFragment`** so
editor/snippet SQL keeps its provenance.
- `computeErrorHighlightLine(error, startLineNumber)` — parses the `LINE
n:` marker + selection offset.
- `assembleCompletionDiff(meta, text)` — before/selection/after assembly
for the AI completion diff.
- `buildExplainSql(sql, impersonatedRoleState)` — takes an already-safe
fragment; EXPLAIN ANALYZE + role impersonation + rollback wrapping.
- `buildDebugPromptText(sql, errorMessage)` — the assistant debug prompt
string.

## Safe-SQL boundary

- `rawSql()` is no longer used anywhere in the SQL editor.
- `executeQuery` / `executeExplainQuery` now **require a
`SafeSqlFragment`** — safe by construction, so they can never auto-run
untrusted SQL.
- `acceptUntrustedSql` promotion happens **only in the small run/explain
gesture handlers** (`executeQueryFromButton`, `handleRunShortcut`,
`handleRunExplain`, and the warning-modal confirm handlers), never
buried in the long helpers.

## Verification

- `vitest` — 156 pass (11 characterization + 145 utils, incl. new cases)
- `pnpm --filter studio typecheck` — clean for all SQL editor files (two
unrelated `@sentry/tanstackstart-react` module-resolution errors exist
on current master pre-install; not touched by this PR)
- `eslint` — 0 errors

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Enhancements**
* Improved SQL execution and EXPLAIN workflows with safer handling at
run and analysis actions.
  * Enhanced SQL selection and snippet handling in the editor.
* Improved error highlighting to more accurately identify affected
lines.
* Refined completion previews and debugging prompts for clearer results.
* EXPLAIN ANALYZE now supports rollback-wrapped execution and avoids
duplicate wrapping.

* **Bug Fixes**
* Improved behavior when working with selected, empty, or missing SQL
content.
* Prevented existing EXPLAIN statements from being unnecessarily
modified.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-10 15:00:58 -04:00
..

Writing components

Where to create your components

  • For components that declare the general structure and layout of a page:
    • /components/layouts/xxx
  • For components that are tightly coupled to a specific interface:
    • /components/interfaces/xxx
  • For components that are meant to be reusable across multiple pages:
    • /components/ui/xxx
  • Note: We're gradually moving files out of the to-be-cleaned folder into the respective folders as we refactor

Component structure

  • If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an index.tsx as an entry point
  • Otherwise it can just be a file on its own
  • For example:
    • components/ui
      - SampleComponentA
        - SampleComponentA.tsx
        - SampleComponentA.constants.ts
        - SampleComponentA.utils.ts
        - SampleComponentA.types.ts
        - index.ts
      - SampleComponentB.tsx
      

Template for building components


// Declare the prop types of your component
interface ComponentAProps {
  sampleProp: string
}

// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}

export default ComponentA