From 63a6e27142ba0e57e2f4b2d75bea3111a11fdfda Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 25 Aug 2026 11:40:33 +0800
Subject: [PATCH] Trigger native browser confirmation when exiting session if
 there's unsaved changes (#49465)

## Context

As per PR title - triggers the native browser discard confirmation
dialog while in the explorer UI if exiting the session (e.g by
refreshing or closing the tab) and there's any tabs with unsaved changes

<img width="593" height="431" alt="image"
src="https://github.com/user-attachments/assets/85b50c3e-ee69-4d27-8819-12151e6fc9f7"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
* Added a warning when attempting to leave or close the page while a
notebook has unsaved changes.
* Prevented unnecessary warnings when no discardable changes are
present.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Explorer/ExplorerNotebookTabCoordinator.tsx     | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx
index 63a15562aa8..ceccee89c71 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx
@@ -35,6 +35,19 @@ export const ExplorerNotebookTabCoordinator = () => {
   const queryClient = useQueryClient()
   const tabs = useContext(TabsStateContext)
 
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      const hasUnsaved = Object.values(notebooksState.notebooks).some(hasDiscardableChanges)
+      if (hasUnsaved) {
+        event.preventDefault()
+        event.returnValue = true
+      }
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [])
+
   useEffect(() => {
     return tabs.registerTabTypeHandler('notebook', {
       onClose: (tab) => {