Files
supabase/apps/studio/state/sql-editor/sql-editor-save.ts
Charis 16526bd6bf refactor(studio): extract SQL editor save mechanism + model folder lifecycle (4/9) (#47276)
## What

PR 4 of a stacked refactor of the SQL editor snippet/folder state. It
pulls the persistence logic out of the store into an injectable
mechanism, and replaces the folder `'new-folder'` id sentinel with an
explicit lifecycle — plus a concurrency bug fix that surfaced along the
way.

### Save mechanism (`sql-editor-save.ts`)

`createSaveMechanism({ state, upsertContent, createSQLSnippetFolder,
updateSQLSnippetFolder, invalidate, notify, debounceMs })` → `{
saveSnippet, createFolder, updateFolder }`. The store's subscribe now
dispatches to it; *when* to save still lives in the subscribe (the
scheduler/provider move is PR 5). Per-id debounce cache lives in the
factory closure (no module-global leak).

- **`saveSnippet`** reads the live store snippet, guards
`isLoadedSnippet` so a content-less snippet can **never PUT an empty
body** (directly unit-tested), then builds the payload + drives status
transitions + gated invalidation.
- **`toast` is injected** as a `Notifier` (new generic DI contract in
`lib/notifier.ts`) — the mechanism no longer imports sonner.
- **create vs rename are two named-arg functions**, not an `isNew`
branch; rollback is deterministic per operation instead of matching on
`error.message` text.
- **caught errors are `unknown`**, narrowed via the existing
`getErrorMessage` util with a generic fallback — no `any`.

### Folder lifecycle (replaces the `NEW_FOLDER_ID` sentinel)

- **`FolderStatus`** enum (`new_editing | new_saving | editing | saving
| idle`) collapses the persistence and progress axes into one enum —
same pattern as `SnippetStatus` — with `isNewFolder` / `isFolderEditing`
/ `isFolderSaving` predicates. Tagging a folder as new/persisted is now
an explicit field, not an id convention.
- New placeholders get a **unique local id** (`crypto.randomUUID`);
`NEW_FOLDER_ID` is deleted, which also lifts the accidental
one-unsaved-folder-at-a-time limit.

### Bug fix: folder-rename rollback race

The shared `lastUpdatedFolderName` field let two in-flight renames
clobber each other's rollback target (and a shared `finally` could wipe
it). Replaced by a **per-folder `previousName`** on
`StateSnippetFolder`, so concurrent renames of different folders are
isolated. A new test runs two failing renames concurrently and asserts
each restores its own previous name.

## Tests

`sql-editor-save.test.ts` (mechanism — fakes + fake timers, incl.
content-less no-PUT and concurrent-rename isolation) and
folder-lifecycle predicate tests. `pnpm --filter studio typecheck`
clean; 82 state/sql-editor unit tests pass.

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

## Summary by CodeRabbit

* **New Features**
* Improved SQL editor folder handling with clearer create, rename, and
save states.
* Added a more consistent notification flow for successful and failed
save actions.

* **Bug Fixes**
* Improved rollback handling when folder renames fail, helping restore
the previous name reliably.
* Updated save behavior to better protect against duplicate or
out-of-order updates.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-25 11:08:26 -04:00

152 lines
5.5 KiB
TypeScript

import { debounce, memoize } from 'lodash'
import { statusOnSaveError, statusOnSaveStart, statusOnSaveSuccess } from './sql-editor-lifecycle'
import { buildUpsertPayload, isLoadedSnippet } from './sql-editor-rules'
import type { StateSnippet, StateSnippetFolder } from './types'
import type { UpsertContentPayload } from '@/data/content/content-upsert-mutation'
import type { SnippetFolder } from '@/data/content/sql-folders-query'
import { getErrorMessage } from '@/lib/get-error-message'
import type { Notifier } from '@/lib/notifier'
const GENERIC_ERROR_MESSAGE = 'an unexpected error occurred'
/**
* The slice of the SQL editor store the save mechanism reads from and writes to.
* Declared structurally (rather than depending on the concrete store) so the
* mechanism can be exercised in isolation with a plain fake.
*/
export interface SaveMechanismStore {
snippets: { [id: string]: StateSnippet | undefined }
folders: { [id: string]: StateSnippetFolder | undefined }
removeFolder: (id: string) => void
}
export interface SaveMechanismDeps {
state: SaveMechanismStore
upsertContent: (vars: { projectRef: string; payload: UpsertContentPayload }) => Promise<unknown>
createSQLSnippetFolder: (vars: { projectRef: string; name: string }) => Promise<SnippetFolder>
updateSQLSnippetFolder: (vars: {
projectRef: string
id: string
name: string
}) => Promise<unknown>
/** Invalidate the snippet/folder/count lists for a project. */
invalidate: (projectRef: string) => Promise<void>
/** Surface success/error toasts. */
notify: Notifier
/** Build the upsert payload. Injectable for testing; defaults to buildUpsertPayload. */
buildPayload?: typeof buildUpsertPayload
/** Snippet save debounce in ms. Defaults to 1000. */
debounceMs?: number
}
export interface SaveSnippetArgs {
id: string
projectRef: string
shouldInvalidate: boolean
}
export interface CreateFolderArgs {
projectRef: string
name: string
/** Id of the local placeholder folder to swap for the persisted one. */
placeholderId: string
}
export interface UpdateFolderArgs {
id: string
projectRef: string
name: string
}
/**
* The save *mechanism*: it knows how to persist a snippet or folder and how to
* reflect that in the store (status transitions, list invalidation, folder
* placeholder swap / rollback). It does NOT decide *when* to save — that policy
* lives in the store's subscribe today, and moves to a scheduler in a later PR.
*
* Dependencies (data-layer calls, query invalidation, notifications, the store,
* the debounce window) are injected, and the per-snippet debounce cache lives in
* this factory closure so each instance — and each test — starts clean.
*/
export function createSaveMechanism(deps: SaveMechanismDeps) {
const {
state,
upsertContent,
createSQLSnippetFolder,
updateSQLSnippetFolder,
invalidate,
notify,
buildPayload = buildUpsertPayload,
debounceMs = 1000,
} = deps
async function saveSnippet({ id, projectRef, shouldInvalidate }: SaveSnippetArgs) {
const snippet = state.snippets[id]?.snippet
// Only persist a snippet whose content has been loaded — otherwise we would
// PUT an empty content body and clobber the stored SQL.
if (snippet === undefined || !isLoadedSnippet(snippet)) return
const payload = buildPayload(snippet, id)
try {
snippet.status = statusOnSaveStart(snippet.status)
await upsertContent({ projectRef, payload })
if (shouldInvalidate) await invalidate(projectRef)
snippet.status = statusOnSaveSuccess()
} catch (error) {
snippet.status = statusOnSaveError(snippet.status)
}
}
const memoizedSaveSnippet = memoize((_id: string) => debounce(saveSnippet, debounceMs))
/** Debounced per snippet id; rapid edits to one snippet coalesce to one save. */
function scheduleSaveSnippet(args: SaveSnippetArgs) {
memoizedSaveSnippet(args.id)(args)
}
async function createFolder({ projectRef, name, placeholderId }: CreateFolderArgs) {
try {
const folder = await createSQLSnippetFolder({ projectRef, name })
notify.success('Successfully created folder')
// Swap the local placeholder for the persisted folder.
state.removeFolder(placeholderId)
state.folders[folder.id] = { projectRef, status: 'idle', folder }
} catch (error: unknown) {
notify.error(`Failed to save folder: ${getErrorMessage(error) ?? GENERIC_ERROR_MESSAGE}`)
// Roll back the placeholder — there is no persisted folder to keep.
state.removeFolder(placeholderId)
}
}
async function updateFolder({ id, projectRef, name }: UpdateFolderArgs) {
const storeFolder = state.folders[id]
if (!storeFolder) return
try {
await updateSQLSnippetFolder({ projectRef, id, name })
notify.success('Successfully updated folder')
} catch (error: unknown) {
notify.error(`Failed to save folder: ${getErrorMessage(error) ?? GENERIC_ERROR_MESSAGE}`)
// Roll back the optimistic rename to this folder's own previous name.
if (storeFolder.previousName !== undefined) {
storeFolder.folder.name = storeFolder.previousName
}
} finally {
storeFolder.status = 'idle'
storeFolder.previousName = undefined
}
}
return {
/** Schedule a debounced save of the snippet with the given id. */
saveSnippet: scheduleSaveSnippet,
/** Persist a new folder, swapping out its local placeholder. */
createFolder,
/** Persist a folder rename. */
updateFolder,
}
}
export type SaveMechanism = ReturnType<typeof createSaveMechanism>