mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 10:59:38 +08:00
1987f19d0a
## What Adds an opt-in **SQL Editor manual save** feature preview that switches the SQL Editor from autosaving every edit to saving only on demand, and hardens the tab-close flow so unsaved edits are handled correctly. ## Changes **Feature preview** - New `sqlEditorManualSave` flag + `UI_PREVIEW_SQL_EDITOR_MANUAL_SAVE` local-storage toggle, wired into the Feature Preview modal with an explanatory panel. - `useIsSqlEditorManualSaveEnabled` gates behavior on both the flag and the user's preview opt-in. **Editor toolbar** - Save button (with `Cmd+S`) next to Run, plus an autosave status indicator showing dirty/saving/saved state and a shortcut to disable autosave (emits a `sql_editor_autosave_disable_clicked` telemetry event). **Discard on close** - Closing a snippet tab with unsaved edits prompts for confirmation and, on confirm, actually discards the local edits and evicts the cached server copy so the snippet reopens clean. **Decouple tab layout from SQL specifics** - Tabs store gains a generic per-type close-handler registry (`registerTabCloseHandler` / `getCloseConfirmation` / `closeTabs`). The SQL editor registers its discard + confirmation behavior from the save coordinator. - Low-level `removeTab`/`removeTabs` (rename/move re-keying, stale cleanup) intentionally do **not** trigger discard. - Adds `statusOnDiscard` lifecycle transition and `clearSnippetContent` store action. ## Testing - `pnpm --filter=studio typecheck` — clean. - Added unit tests for the close-handler registry (fires on single/multi close, skips re-keying/cleanup removals, respects tab type, selects confirmation copy, unregisters cleanly). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a SQL editor manual-save preview with a “Save” button and `Cmd+S`, plus a modal option to disable manual-save/preview. * Added “unsaved changes” tab status indication when manual-save is enabled. * Introduced tab-type-specific close confirmations (shown only when needed). * **Bug Fixes** * In manual-save mode, closing a SQL tab with unsaved edits now clears local snippet content and refreshes it on reopen. * **Tests** * Added coverage for tab close handlers and confirmation behavior. * **Chores** * Added a persisted setting allowlist entry and tracked autosave-disable clicks via telemetry. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { useIsSqlEditorManualSaveEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
|
|
import { hasUnsavedChanges } from '@/state/sql-editor/sql-editor-lifecycle'
|
|
import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
|
|
import type { Tab } from '@/state/tabs'
|
|
|
|
/** The snippet id a SQL tab represents. Prefer the metadata; fall back to the id scheme. */
|
|
export function getSnippetIdFromTab(tab: Tab): string {
|
|
return tab.metadata?.sqlId ?? tab.id.replace(/^sql-/, '')
|
|
}
|
|
|
|
/**
|
|
* VS Code-style unsaved-changes dot for a SQL snippet tab. Renders only in
|
|
* manual-save mode when the snippet has unsaved edits — in auto mode edits
|
|
* persist on their own, so a dot would just flicker during the debounce.
|
|
*
|
|
* Registered as the SQL tab type's status indicator (see the save coordinator)
|
|
* so the tabs layout can render it without knowing anything about snippets.
|
|
*/
|
|
export const SqlTabStatusIndicator = ({ tab }: { tab: Tab }) => {
|
|
const snapV2 = useSqlEditorV2StateSnapshot()
|
|
const isManualSaveEnabled = useIsSqlEditorManualSaveEnabled()
|
|
|
|
const status = snapV2.snippets[getSnippetIdFromTab(tab)]?.snippet.status
|
|
if (!isManualSaveEnabled || !hasUnsavedChanges(status)) return null
|
|
|
|
return (
|
|
<span
|
|
role="img"
|
|
aria-label="Unsaved changes"
|
|
className="block size-2 shrink-0 rounded-full bg-warning"
|
|
/>
|
|
)
|
|
}
|