From c1c2b5ca240dcb007e74efd84381692d4d2b26ef Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Mon, 11 Nov 2024 10:41:10 -0800
Subject: [PATCH] Only notify with actual changes (#1173)

---
 .../src/hooks/useShouldNotifyWhenClosingTab.ts           | 9 +++++----
 .../src/routes/workflows/editor/FlowRenderer.tsx         | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts b/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts
index b73cab15..a55622a7 100644
--- a/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts
+++ b/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts
@@ -1,13 +1,14 @@
 import { useEffect } from "react";
 
-function useShouldNotifyWhenClosingTab() {
+function useShouldNotifyWhenClosingTab(shouldNotify: boolean) {
   useEffect(() => {
     function f(event: BeforeUnloadEvent) {
       // this function is here to have a stable reference only
-
+      if (!shouldNotify) {
+        return undefined;
+      }
       // Recommended
       event.preventDefault();
-
       // Included for legacy support, e.g. Chrome/Edge < 119
       // refer to https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
       event.returnValue = true;
@@ -18,7 +19,7 @@ function useShouldNotifyWhenClosingTab() {
     return () => {
       window.removeEventListener("beforeunload", f);
     };
-  }, []);
+  }, [shouldNotify]);
 }
 
 export { useShouldNotifyWhenClosingTab };
diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
index 6426d358..39097d62 100644
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -191,7 +191,7 @@ function FlowRenderer({
   const [title, setTitle] = useState(initialTitle);
   const nodesInitialized = useNodesInitialized();
   const { hasChanges, setHasChanges } = useWorkflowHasChangesStore();
-  useShouldNotifyWhenClosingTab();
+  useShouldNotifyWhenClosingTab(hasChanges);
   const blocker = useBlocker(({ currentLocation, nextLocation }) => {
     return hasChanges && nextLocation.pathname !== currentLocation.pathname;
   });