[IR-3547] studio: show unsaved changes dialog when switching between scenes

packages/client-core/i18n/en/editor.json

@@ -1360,7 +1360,10 @@
       "lbl-thumbnail": "Generate thumbnail & envmap",
       "lbl-confirm": "Save Scene",
       "info-confirm": "Are you sure you want to save the scene?",
-      "info-question": "Do you want to save the current scene?"
+      "info-question": "Do you want to save the current scene?",
+      "unsavedChanges": {
+        "title": "Unsaved Changes"
+      }
     },
     "saveNewScene": {
       "title": "Save As",

packages/editor/src/components/dialogs/SaveSceneDialog.tsx

@@ -81,6 +81,7 @@ export const SaveSceneDialog = (props: { isExiting?: boolean; onConfirm?: () =>
 
   return (
     <ConfirmDialog
+      title={props.isExiting ? t('editor:dialog.saveScene.unsavedChanges.title') : t('editor:dialog.saveScene.title')}
       onSubmit={handleSubmit}
       onClose={() => {
         PopoverState.hidePopupover()

packages/editor/src/components/toolbar/Toolbar.tsx

@@ -60,25 +60,21 @@ const onImportAsset = async () => {
   }
 }
 
-const onClickNewScene = async () => {
+export const confirmedSaveIfModified = async () => {
   const isModified = EditorState.isModified()
 
   if (isModified) {
-    const confirm = await new Promise((resolve) => {
+    return new Promise((resolve) => {
       PopoverState.showPopupover(
-        <SaveSceneDialog
-          isExiting
-          onConfirm={() => {
-            resolve(true)
-          }}
-          onCancel={() => {
-            resolve(false)
-          }}
-        />
+        <SaveSceneDialog isExiting onConfirm={() => resolve(true)} onCancel={() => resolve(false)} />
       )
     })
-    if (!confirm) return
   }
+  return true
+}
+
+const onClickNewScene = async () => {
+  if (!(await confirmedSaveIfModified())) return
 
   const newSceneUIAddons = getState(EditorState).uiAddons.newScene
   if (Object.keys(newSceneUIAddons).length > 0) {
@@ -89,24 +85,7 @@ const onClickNewScene = async () => {
 }
 
 const onCloseProject = async () => {
-  const isModified = EditorState.isModified()
-
-  if (isModified) {
-    const confirm = await new Promise((resolve) => {
-      PopoverState.showPopupover(
-        <SaveSceneDialog
-          isExiting
-          onConfirm={() => {
-            resolve(true)
-          }}
-          onCancel={() => {
-            resolve(false)
-          }}
-        />
-      )
-    })
-    if (!confirm) return
-  }
+  if (!(await confirmedSaveIfModified())) return
 
   const editorState = getMutableState(EditorState)
   getMutableState(GLTFModifiedState).set({})

packages/ui/src/components/editor/panels/Scenes/container/index.tsx

@@ -27,6 +27,7 @@ import { SceneItem } from '@etherealengine/client-core/src/admin/components/scen
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { StaticResourceType, fileBrowserPath, staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import CreateSceneDialog from '@etherealengine/editor/src/components/dialogs/CreateScenePanelDialog'
+import { confirmedSaveIfModified } from '@etherealengine/editor/src/components/toolbar/Toolbar'
 import { onNewScene } from '@etherealengine/editor/src/functions/sceneFunctions'
 import { EditorState } from '@etherealengine/editor/src/services/EditorServices'
 import { getMutableState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
@@ -47,7 +48,9 @@ export default function ScenesPanel() {
 
   const scenesLoading = scenesQuery.status === 'pending'
 
-  const onClickScene = (scene: StaticResourceType) => {
+  const onClickScene = async (scene: StaticResourceType) => {
+    if (!(await confirmedSaveIfModified())) return
+
     getMutableState(EditorState).merge({
       scenePath: scene.key
     })