From fbe76cd53945142e282558e1093e6d986d910ef4 Mon Sep 17 00:00:00 2001
From: Loic Huder <loic.huder@esrf.fr>
Date: Thu, 28 Mar 2024 16:12:57 +0100
Subject: [PATCH] Add a warning prompt when navigating out of the edit page

---
 src/edition/EditPage.tsx |  8 +++-----
 src/edition/hooks.ts     | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 src/edition/hooks.ts

diff --git a/src/edition/EditPage.tsx b/src/edition/EditPage.tsx
index d8ca244d..e936b143 100644
--- a/src/edition/EditPage.tsx
+++ b/src/edition/EditPage.tsx
@@ -1,7 +1,7 @@
 import { useDebouncedCallback } from '@react-hookz/web';
 import { useEffect } from 'react';
 import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
-import { unstable_usePrompt, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useStoreApi } from 'reactflow';
 
 import ErrorFallback from '../general/ErrorFallback';
@@ -14,6 +14,7 @@ import useWorkflowHistory from '../store/useWorkflowHistory';
 import SuspenseBoundary from '../suspense/SuspenseBoundary';
 import Canvas from './Canvas/Canvas';
 import styles from './EditPage.module.css';
+import { useWarningPrompt } from './hooks';
 import EditSidebar from './Sidebar/EditSidebar';
 import OverflowDrawer from './TaskDrawer/TaskDrawer';
 import TopAppBar from './TopAppBar/TopAppBar';
@@ -22,10 +23,7 @@ export default function EditPage() {
   const [searchParams] = useSearchParams();
   const workflowHasChanges = useWorkflowHasChanges();
 
-  unstable_usePrompt({
-    message: 'There are unsaved changes. Continue without saving?',
-    when: workflowHasChanges,
-  });
+  useWarningPrompt(workflowHasChanges);
 
   const workflowId = searchParams.get('workflow');
   const pushToWorkflowHistory = useWorkflowHistory(
diff --git a/src/edition/hooks.ts b/src/edition/hooks.ts
new file mode 100644
index 00000000..ae914bd3
--- /dev/null
+++ b/src/edition/hooks.ts
@@ -0,0 +1,18 @@
+import { useEventListener } from '@react-hookz/web';
+import { unstable_usePrompt } from 'react-router-dom';
+
+export function useWarningPrompt(displayWarning: boolean) {
+  useEventListener(window, 'beforeunload', (event: BeforeUnloadEvent) => {
+    if (displayWarning) {
+      event.preventDefault();
+
+      // Included for legacy support, e.g. Chrome/Edge < 119
+      event.returnValue = true;
+    }
+  });
+
+  unstable_usePrompt({
+    message: 'There are unsaved changes. Continue without saving?',
+    when: displayWarning,
+  });
+}
-- 
GitLab