fix: warn before discarding unsaved changes in waveconfig view

PhenixStar · PhenixStar · commit d67ed7cb542e · 2026-03-24T10:38:25.000+08:00
Cherry-pick from wavetermdev/waveterm#3099. Adds confirmation dialog when navigating away from unsaved edits in the config editor — both file sidebar and JSON/Visual tab switching.
diff --git a/frontend/app/view/waveconfig/waveconfig-model.ts b/frontend/app/view/waveconfig/waveconfig-model.ts
@@ -274,6 +274,21 @@ export class WaveConfigViewModel implements ViewModel {
         return globalStore.get(this.hasEditedAtom);
     }
 
+    confirmDiscardChanges(): boolean {
+        if (!this.hasChanges()) {
+            return true;
+        }
+        return window.confirm("You have unsaved changes. Discard and continue?");
+    }
+
+    discardChanges() {
+        const originalContent = globalStore.get(this.originalContentAtom);
+        globalStore.set(this.fileContentAtom, originalContent);
+        globalStore.set(this.hasEditedAtom, false);
+        globalStore.set(this.validationErrorAtom, null);
+        globalStore.set(this.errorMessageAtom, null);
+    }
+
     markAsEdited() {
         globalStore.set(this.hasEditedAtom, true);
     }
diff --git a/frontend/app/view/waveconfig/waveconfig.tsx b/frontend/app/view/waveconfig/waveconfig.tsx
@@ -26,6 +26,8 @@ const ConfigSidebar = memo(({ model }: ConfigSidebarProps) => {
     const configErrorFiles = useAtomValue(model.configErrorFilesAtom);
 
     const handleFileSelect = (file: ConfigFile) => {
+        if (selectedFile?.path === file.path) return;
+        if (!model.confirmDiscardChanges()) return;
         model.loadFile(file);
         setIsMenuOpen(false);
     };
@@ -228,7 +230,11 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
                         {selectedFile.visualComponent && selectedFile.hasJsonView && (
                             <div className="flex gap-0 border-b border-border">
                                 <button
-                                    onClick={() => setActiveTab("visual")}
+                                    onClick={() => {
+                                        if (!model.confirmDiscardChanges()) return;
+                                        model.discardChanges();
+                                        setActiveTab("visual");
+                                    }}
                                     className={cn(
                                         "px-4 pt-1 pb-1.5 cursor-pointer transition-colors text-secondary",
                                         activeTab === "visual"
@@ -238,6 +244,7 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
                                 >
                                     Visual
                                 </button>
+                                {/* No guard needed: visual tab saves changes immediately via RPC */}
                                 <button
                                     onClick={() => setActiveTab("json")}
                                     className={cn(
