fix: warn when leaving page with selections

Author: mtrezza

src/components/BrowserRow/BrowserRow.react.js

@@ -92,7 +92,7 @@ export default class BrowserRow extends Component {
         >
           <input
             type="checkbox"
-            checked={selection['*'] || selection[obj.id]}
+            checked={!!selection['*'] || !!selection[obj.id]}
             onChange={e => selectRow(obj.id, e.target.checked)}
             onMouseDown={e => onMouseDownRowCheckBox(e.target.checked)}
           />

src/dashboard/Dashboard.js

@@ -48,7 +48,13 @@ import { AsyncStatus } from 'lib/Constants';
 import baseStyles from 'stylesheets/base.scss';
 import { get } from 'lib/AJAX';
 import { setBasePath } from 'lib/AJAX';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import {
+  unstable_HistoryRouter as HistoryRouter,
+  Routes,
+  Route,
+  Navigate,
+} from 'react-router-dom';
+import history from 'lib/history';
 import { Helmet } from 'react-helmet';
 import Playground from './Data/Playground/Playground.react';
 import DashboardSettings from './Settings/DashboardSettings/DashboardSettings.react';
@@ -306,7 +312,7 @@ export default class Dashboard extends React.Component {
     );
 
     return (
-      <BrowserRouter basename={window.PARSE_DASHBOARD_PATH || '/'}>
+      <HistoryRouter history={history} basename={window.PARSE_DASHBOARD_PATH || '/'}>
         <Helmet>
           <title>Parse Dashboard</title>
         </Helmet>
@@ -317,7 +323,7 @@ export default class Dashboard extends React.Component {
           <Route index element={<Navigate replace to="/apps" />} />
           <Route path="*" element={<FourOhFour />} />
         </Routes>
-      </BrowserRouter>
+      </HistoryRouter>
     );
   }
 }

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

@@ -38,58 +38,35 @@ import subscribeTo from 'lib/subscribeTo';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import * as ClassPreferences from 'lib/ClassPreferences';
 import { Helmet } from 'react-helmet';
-import {
-  UNSAFE_NavigationContext,
-  useBeforeUnload,
-} from 'react-router-dom';
+import { useBeforeUnload } from 'react-router-dom';
+import history from 'lib/history';
 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);
-
+function SelectedRowsNavigationPrompt({ when }) {
+  const message = 'There are selected rows. Are you sure you want to leave this page?';
   React.useEffect(() => {
     if (!when) {
-      return;
+      return undefined;
     }
-
-    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 => {
+    const unblock = history.block(tx => {
       if (window.confirm(message)) {
+        unblock();
         tx.retry();
       }
-    },
-    [message]
-  );
-
-  useBlocker(blocker, when);
-}
+    });
+    return unblock;
+  }, [when]);
 
-function SelectedRowsNavigationPrompt({ when }) {
-  usePrompt('There are selected rows. Are you sure you want to leave this page?', when);
   useBeforeUnload(
     React.useCallback(
       event => {
         if (when) {
           event.preventDefault();
+          event.returnValue = message;
+          return message;
         }
       },
       [when]

src/lib/history.js

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const history = createBrowserHistory();
+
+export default history;