refactor(ui): migrate unsaved-page blocker to react-router useBlocker API

Author: steveninhle

ui/dashboard/src/app/index.tsx

@@ -1,12 +1,14 @@
 import { memo, useCallback, useEffect, useState } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import {
-  BrowserRouter,
+  createBrowserRouter,
+  Outlet,
   Route,
+  RouterProvider,
   Routes,
-  useParams,
+  useLocation,
   useNavigate,
-  useLocation
+  useParams
 } from 'react-router';
 import { QueryClientProvider } from '@tanstack/react-query';
 import {
@@ -97,46 +99,12 @@ export const AppLoading = () => (
   </div>
 );
 
-function App() {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <QueryClientProvider client={queryClient}>
-        <ConfirmProvider>
-          <BrowserRouter>
-            <AuthProvider>
-              <Routes>
-                <Route
-                  path={PAGE_PATH_AUTH_CALLBACK}
-                  element={<AuthCallbackPage />}
-                />
-                <Route
-                  path={PAGE_PATH_AUTH_DEMO_CALLBACK}
-                  element={<AuthDemoCallbackPage />}
-                />
-                <Route
-                  path={PAGE_PATH_AUTH_SIGNIN}
-                  element={<SignInEmailPage />}
-                />
-                <Route
-                  path={PAGE_PATH_DEMO_SITE}
-                  element={<AccessDemoPage />}
-                />
-                <Route
-                  path={`${PAGE_PATH_DEMO_SITE}/new`}
-                  element={<CreateDemoPage />}
-                />
-                <Route path={`${PAGE_PATH_ROOT}*`} element={<Root />} />
-              </Routes>
-            </AuthProvider>
-          </BrowserRouter>
-        </ConfirmProvider>
-        {/* {process.env.NODE_ENV === 'development' && (
-          <ReactQueryDevtools initialIsOpen={false} />
-        )} */}
-      </QueryClientProvider>
-    </I18nextProvider>
-  );
-}
+// All routes live inside AuthShell so every page can access AuthProvider context
+const AuthShell = () => (
+  <AuthProvider>
+    <Outlet />
+  </AuthProvider>
+);
 
 export const Root = memo(() => {
   const authToken = getTokenStorage();
@@ -146,7 +114,7 @@ export const Root = memo(() => {
 
   const handleChangePageKey = useCallback(() => {
     setPageKey(uuid());
-  }, [setPageKey]);
+  }, []);
 
   if (isInitialLoading) {
     return <AppLoading />;
@@ -300,11 +268,37 @@ export const EnvironmentRoot = memo(
         <Route path={`${PAGE_PATH_AUDIT_LOGS}/*`} element={<AuditLogsPage />} />
         <Route path={`${PAGE_PATH_DEBUGGER}/*`} element={<DebuggerPage />} />
         <Route path={`${PAGE_PATH_INSIGHTS}/*`} element={<InsightsPage />} />
-
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     );
   }
 );
 
+// Router is defined after all components to avoid "used before declaration" errors
+const router = createBrowserRouter([
+  {
+    element: <AuthShell />,
+    children: [
+      { path: PAGE_PATH_AUTH_CALLBACK, element: <AuthCallbackPage /> },
+      { path: PAGE_PATH_AUTH_DEMO_CALLBACK, element: <AuthDemoCallbackPage /> },
+      { path: PAGE_PATH_AUTH_SIGNIN, element: <SignInEmailPage /> },
+      { path: PAGE_PATH_DEMO_SITE, element: <AccessDemoPage /> },
+      { path: `${PAGE_PATH_DEMO_SITE}/new`, element: <CreateDemoPage /> },
+      { path: `${PAGE_PATH_ROOT}*`, element: <Root /> }
+    ]
+  }
+]);
+
+function App() {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <QueryClientProvider client={queryClient}>
+        <ConfirmProvider>
+          <RouterProvider router={router} />
+        </ConfirmProvider>
+      </QueryClientProvider>
+    </I18nextProvider>
+  );
+}
+
 export default App;

ui/dashboard/src/components/navigation/my-projects.tsx

@@ -12,7 +12,7 @@ import {
 import { ENVIRONMENT_WITH_EMPTY_ID } from 'constants/app';
 import { PAGE_PATH_FEATURES } from 'constants/routing';
 import { useToast } from 'hooks';
-import { allowNavigation, useConfirm } from 'hooks/use-unsaved-leave-page';
+import { useConfirm } from 'hooks/use-unsaved-leave-page';
 import { useTranslation } from 'i18n';
 import {
   clearCurrentEnvIdStorage,
@@ -38,7 +38,12 @@ const MyProjects = () => {
   const navigate = useNavigate();
   const { consoleAccount, logout } = useAuth();
   const { errorNotify } = useToast();
-  const { isShow: showConfirm, confirm, setIsShow } = useConfirm();
+  const {
+    isShow: showConfirm,
+    confirm,
+    setIsShow,
+    allowNavigation
+  } = useConfirm();
   const [isShowProjectsList, setIsShowProjectsList] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const [projects, setProjects] = useState<Project[]>();

ui/dashboard/src/components/navigation/switch-organization.tsx

@@ -4,7 +4,7 @@ import { switchOrganization } from '@api/auth';
 import { useAuth } from 'auth';
 import { PAGE_PATH_ROOT } from 'constants/routing';
 import { useToast } from 'hooks';
-import { allowNavigation, useConfirm } from 'hooks/use-unsaved-leave-page';
+import { useConfirm } from 'hooks/use-unsaved-leave-page';
 import { useTranslation } from 'i18n';
 import { clearCurrentEnvIdStorage } from 'storage/environment';
 import {
@@ -67,7 +67,13 @@ const SwitchOrganization = ({
   const { t } = useTranslation(['common', 'form']);
   const { myOrganizations, onMeFetcher } = useAuth();
   const { errorNotify } = useToast();
-  const { isShow: showConfirm, setIsShow, confirm, options } = useConfirm();
+  const {
+    isShow: showConfirm,
+    setIsShow,
+    confirm,
+    options,
+    allowNavigation
+  } = useConfirm();
   const organizationId = getOrgIdStorage();
   const [searchValue, setSearchValue] = useState('');
   const [currentOrganization, setCurrentOrganization] = useState(