feat: Warn when leaving data browser page with selected rows

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,11 +38,43 @@ import subscribeTo from 'lib/subscribeTo';
 import * as ColumnPreferences from 'lib/ColumnPreferences';
 import * as ClassPreferences from 'lib/ClassPreferences';
 import { Helmet } from 'react-helmet';
+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 SelectedRowsNavigationPrompt({ when }) {
+  const message = 'There are selected rows. Are you sure you want to leave this page?';
+  React.useEffect(() => {
+    if (!when) {
+      return undefined;
+    }
+    const unblock = history.block(tx => {
+      if (window.confirm(message)) {
+        unblock();
+        tx.retry();
+      }
+    });
+    return unblock;
+  }, [when]);
+
+  useBeforeUnload(
+    React.useCallback(
+      event => {
+        if (when) {
+          event.preventDefault();
+          event.returnValue = message;
+          return message;
+        }
+      },
+      [when]
+    )
+  );
+  return null;
+}
+
 // The initial and max amount of rows fetched by lazy loading
 const BROWSER_LAST_LOCATION = 'brower_last_location';
 
@@ -2446,6 +2478,9 @@ class Browser extends DashboardView {
         <Helmet>
           <title>{pageTitle}</title>
         </Helmet>
+        <SelectedRowsNavigationPrompt
+          when={Object.keys(this.state.selection).length > 0}
+        />
         {browser}
         {notification}
         {extras}

src/lib/history.js

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