From 81cf09af9e76621b45af151ab4cfb63923b708c9 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 4 Aug 2021 10:08:13 +0100
Subject: [PATCH] DashboardPrompt: Implement beforeunload handler (#37490)

---
 .../DashboardPrompt/DashboardPrompt.tsx          | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx
index 05e04573036..f046dba8013 100644
--- a/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx
+++ b/public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx
@@ -50,6 +50,22 @@ export const DashboardPrompt = React.memo(({ dashboard }: Props) => {
     };
   }, [dashboard]);
 
+  useEffect(() => {
+    const handleUnload = (event: BeforeUnloadEvent) => {
+      if (ignoreChanges(dashboard, original)) {
+        return;
+      }
+      if (hasChanges(dashboard, original)) {
+        event.preventDefault();
+        // No browser actually displays this message anymore.
+        // But Chrome requires it to be defined else the popup won't show.
+        event.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', handleUnload);
+    return () => window.removeEventListener('beforeunload', handleUnload);
+  }, [dashboard, original]);
+
   // Handle saved events
   useEffect(() => {
     const savedEventUnsub = appEvents.subscribe(DashboardSavedEvent, () => {