Warn the user when they are quitting the workflow page (#1172)

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

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