fix: warn when leaving page with selections

Author: mtrezza

src/dashboard/Data/Browser/Browser.react.js

@@ -38,17 +38,53 @@ import subscribeTo from 'lib/subscribeTo';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import * as ClassPreferences from 'lib/ClassPreferences';
 import { Helmet } from 'react-helmet';
-import { unstable_usePrompt as usePrompt, useBeforeUnload } from 'react-router-dom';
+import {
+  UNSAFE_NavigationContext,
+  useBeforeUnload,
+} from 'react-router-dom';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
 import { get } from 'lib/AJAX';
 import BrowserFooter from './BrowserFooter.react';
 
+function useBlocker(blocker, when = true) {
+  const { navigator } = React.useContext(UNSAFE_NavigationContext);
+
+  React.useEffect(() => {
+    if (!when) {
+      return;
+    }
+
+    const unblock = navigator.block(tx => {
+      const autoUnblockingTx = {
+        ...tx,
+        retry() {
+          unblock();
+          tx.retry();
+        }
+      };
+      blocker(autoUnblockingTx);
+    });
+
+    return unblock;
+  }, [navigator, blocker, when]);
+}
+
+function usePrompt(message, when = true) {
+  const blocker = React.useCallback(
+    tx => {
+      if (window.confirm(message)) {
+        tx.retry();
+      }
+    },
+    [message]
+  );
+
+  useBlocker(blocker, when);
+}
+
 function SelectedRowsNavigationPrompt({ when }) {
-  usePrompt({
-    when,
-    message: 'There are selected rows. Are you sure you want to leave this page?'
-  });
+  usePrompt('There are selected rows. Are you sure you want to leave this page?', when);
   useBeforeUnload(
     React.useCallback(
       event => {