From 1caeb921221be4f9e530d7dde73d67cd9ab7c5eb Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 15 Sep 2026 15:35:31 +0800
Subject: [PATCH] Editor panel fix save snippet (#50262)

## Context

Currently hitting "Save snippet" in the Editor panel doesn't actually do
anything - happening because it's using the legacy `needSaving` queue
logic that we had before manual saving became the default. Tiny fix to
just call `requestSave` instead
<img width="469" height="484" alt="image"
src="https://github.com/user-attachments/assets/66c8fd41-9e7c-44ad-8bb0-cdea8de68bd2"
/>


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

## Summary by CodeRabbit

- **Improvements**
- Saving a snippet now updates the SQL editor with the latest content
automatically.
- New snippets created from the expanded editor or save dialog are saved
through the standard save flow.

- **Accessibility**
- Added an accessible label to the snippet name field for improved
screen reader support.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/ui/EditorPanel/EditorPanel.tsx    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index 0aa1a7f94ea..ae2385d04ae 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -56,6 +56,7 @@ import { useContentIdQuery } from '@/data/content/content-id-query'
 import { useContentQuery, type Content } from '@/data/content/content-query'
 import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
 import { contentKeys } from '@/data/content/keys'
+import type { Snippet } from '@/data/content/sql-folders-query'
 import { useExecuteSqlMutation } from '@/data/sql/execute-sql-mutation'
 import { applyAutoLimit } from '@/data/sql/utils'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
@@ -66,6 +67,7 @@ import { editorPanelState, useEditorPanelStateSnapshot } from '@/state/editor-pa
 import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
 import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
 import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
+import { useSqlEditorSaveCoordinator } from '@/state/sql-editor/sql-editor-save-coordinator'
 import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
 
 export const EditorPanel = () => {
@@ -86,6 +88,7 @@ export const EditorPanel = () => {
   const { profile } = useProfile()
   const { closeSidebar } = useSidebarManagerSnapshot()
   const sqlEditorSnap = useSqlEditorV2StateSnapshot()
+  const { requestSave } = useSqlEditorSaveCoordinator()
   const isExplorerEnabled = useIsExplorerEnabled()
   const { createQuery } = useCreateQuery()
   const queryClient = useQueryClient()
@@ -194,6 +197,14 @@ export const EditorPanel = () => {
       if (vars.payload.id && ref) {
         queryClient.invalidateQueries({ queryKey: contentKeys.resource(ref, vars.payload.id) })
       }
+      if (activeSnippet) {
+        const updatedSnippet = { ...activeSnippet, content: vars.payload.content }
+        sqlEditorSnap.updateSnippet({
+          id: activeSnippet.id,
+          snippet: updatedSnippet as unknown as Snippet,
+          skipSave: true,
+        })
+      }
       originalSnippetRef.current = { sql: currentValue, name: vars.payload.name }
       showSaveSuccess()
     },
@@ -301,7 +312,7 @@ export const EditorPanel = () => {
     })
 
     sqlEditorSnap.addSnippet({ projectRef: ref, snippet })
-    sqlEditorSnap.addNeedsSaving(snippet.id)
+    requestSave(snippet.id)
 
     router.push(`/project/${ref}/sql/${snippet.id}`)
     handleClosePanel()
@@ -313,6 +324,7 @@ export const EditorPanel = () => {
         {isEditingTitle ? (
           <input
             ref={titleInputRef}
+            aria-label="Snippet name"
             value={titleInput}
             onChange={(e) => setTitleInput(e.target.value)}
             onBlur={commitRename}
@@ -674,7 +686,7 @@ export const EditorPanel = () => {
             project_id: project.id,
           })
           sqlEditorSnap.addSnippet({ projectRef: ref, snippet })
-          sqlEditorSnap.addNeedsSaving(snippet.id)
+          requestSave(snippet.id)
           setActiveSnippet(snippet as unknown as Extract<Content, { type: 'sql' }>)
           originalSnippetRef.current = { sql: currentValue, name }
           showSaveSuccess()