Add a skipSave parameter to deleteSnippet method. Fix the moveSnippet code to work on self-hosted.

apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx

@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
-import { useParams } from 'common'
+import { IS_PLATFORM, useParams } from 'common'
 import { getContentById } from 'data/content/content-id-query'
 import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
 import { useSQLSnippetFolderCreateMutation } from 'data/content/sql-folder-create-mutation'
@@ -140,7 +140,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
           if (snippetContent === undefined) {
             return toast.error('Failed to save snippet: Unable to retrieve snippet contents')
           } else {
-            await moveSnippetAsync({
+            const movedSnippet = await moveSnippetAsync({
               projectRef: ref,
               payload: {
                 id: snippet.id,
@@ -154,6 +154,21 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                 content: snippetContent as any,
               },
             })
+            if (IS_PLATFORM) {
+              snapV2.updateSnippet({
+                id: snippet.id,
+                snippet: { ...snippet, folder_id: selectedId === 'root' ? null : folderId },
+                skipSave: true,
+              })
+            } else if (movedSnippet) {
+              // On selfhosted, we need to update the state with the moved snippet because the snippet depends on the
+              // folder_id the moved snippet has a different id than the original snippet.
+
+              // remove the old snippet from the state without saving to API
+              snapV2.removeSnippet(snippet.id, true)
+
+              snapV2.addSnippet({ projectRef: ref, snippet: movedSnippet })
+            }
           }
         })
       )
@@ -161,13 +176,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
       toast.success(
         `Successfully moved ${snippets.length === 1 ? `"${snippets[0].name}"` : `${snippets.length} snippets`} to ${selectedId === 'root' ? 'the root of the editor' : selectedFolder}`
       )
-      snippets.forEach((snippet) => {
-        snapV2.updateSnippet({
-          id: snippet.id,
-          snippet: { ...snippet, folder_id: selectedId === 'root' ? null : folderId },
-          skipSave: true,
-        })
-      })
+
       onClose()
     } catch (error: any) {
       toast.error(`Failed to create new folder: ${error.message}`)

apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx

@@ -15,7 +15,7 @@ import type { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { IS_PLATFORM } from 'lib/constants'
-import { sqlEditorState, useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import { AiIconAnimation, Button, Form, Input, Modal } from 'ui'
 import { subscriptionHasHipaaAddon } from '../Billing/Subscription/Subscription.utils'
@@ -117,11 +117,9 @@ const RenameQueryModal = ({
       } else if (changedSnippet) {
         // In self-hosted, the snippet also updates the id when renaming it. This code is to ensure the previous snippet
         // is removed, new one is added, tab state is updated and the router is updated.
-        const { [id]: snippet, ...otherSnippets } = sqlEditorState.snippets
-        sqlEditorState.snippets = otherSnippets
 
-        const { [id]: result, ...otherResults } = sqlEditorState.results
-        sqlEditorState.results = otherResults
+        // remove the old snippet from the state without saving to API
+        snapV2.removeSnippet(id, true)
 
         snapV2.addSnippet({ projectRef: ref, snippet: changedSnippet })
 
@@ -129,7 +127,6 @@ const RenameQueryModal = ({
         const tabId = createTabId('sql', { id })
         tabsSnap.removeTab(tabId)
 
-        console.log(`/project/${ref}/sql/${changedSnippet.id}`)
         await router.push(`/project/${ref}/sql/${changedSnippet.id}`)
       }
 

apps/studio/state/sql-editor-v2.ts

@@ -142,14 +142,14 @@ export const sqlEditorState = proxy({
     }
   },
 
-  removeSnippet: (id: string) => {
+  removeSnippet: (id: string, skipSave: boolean = false) => {
     const { [id]: snippet, ...otherSnippets } = sqlEditorState.snippets
     sqlEditorState.snippets = otherSnippets
 
     const { [id]: result, ...otherResults } = sqlEditorState.results
     sqlEditorState.results = otherResults
 
-    sqlEditorState.needsSaving.delete(id)
+    if (!skipSave) sqlEditorState.needsSaving.delete(id)
   },
 
   addFolder: ({ projectRef, folder }: { projectRef: string; folder: SnippetFolder }) => {