From b768ca0e86cce2aa9864945086b06951b2bc80d7 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Mon, 11 Nov 2024 10:22:36 -0800
Subject: [PATCH] Warn the user when they are quitting the workflow page
 (#1172)

---
 .../hooks/useShouldNotifyWhenClosingTab.ts    | 24 +++++++++++++++++++
 .../routes/workflows/editor/FlowRenderer.tsx  |  2 ++
 2 files changed, 26 insertions(+)
 create mode 100644 skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts

diff --git a/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts b/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts
new file mode 100644
index 00000000..b73cab15
--- /dev/null
+++ b/skyvern-frontend/src/hooks/useShouldNotifyWhenClosingTab.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+function useShouldNotifyWhenClosingTab() {
+  useEffect(() => {
+    function f(event: BeforeUnloadEvent) {
+      // this function is here to have a stable reference only
+
+      // 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;
+    }
+
+    window.addEventListener("beforeunload", f);
+
+    return () => {
+      window.removeEventListener("beforeunload", f);
+    };
+  }, []);
+}
+
+export { useShouldNotifyWhenClosingTab };
diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
index 81fe4c3c..6426d358 100644
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -67,6 +67,7 @@ import { Button } from "@/components/ui/button";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { isLoopNode, LoopNode } from "./nodes/LoopNode/types";
 import { isTaskNode } from "./nodes/TaskNode/types";
+import { useShouldNotifyWhenClosingTab } from "@/hooks/useShouldNotifyWhenClosingTab";
 
 function convertToParametersYAML(
   parameters: ParametersState,
@@ -190,6 +191,7 @@ function FlowRenderer({
   const [title, setTitle] = useState(initialTitle);
   const nodesInitialized = useNodesInitialized();
   const { hasChanges, setHasChanges } = useWorkflowHasChangesStore();
+  useShouldNotifyWhenClosingTab();
   const blocker = useBlocker(({ currentLocation, nextLocation }) => {
     return hasChanges && nextLocation.pathname !== currentLocation.pathname;
   });