Only notify with actual changes (#1173)

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 };

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;
   });