feat(admin): bump react-router and adapt new routes package (#11887)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added new admin routes: "auth", "setup", and "notFound" for improved navigation and access within the admin interface.
  - Introduced a utility for simplified and flexible lazy loading of React components with fallback support.

- **Improvements**
  - Updated routing structure in the admin frontend for clearer route management and enhanced Sentry integration.
  - Centralized route definitions for easier maintenance and consistency.
  - Upgraded dependencies to support the latest React Router and React versions.
  - Enhanced asynchronous handling in setup form navigation.

- **Chores**
  - Updated project references and workspace dependencies for better package management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/admin/src/app.tsx

@@ -1,11 +1,13 @@
 import { Toaster } from '@affine/admin/components/ui/sonner';
-import { wrapCreateBrowserRouterV6 } from '@sentry/react';
+import { lazy, ROUTES } from '@affine/routes';
+import { withSentryReactRouterV7Routing } from '@sentry/react';
 import { useEffect } from 'react';
 import {
-  createBrowserRouter as reactRouterCreateBrowserRouter,
+  BrowserRouter,
   Navigate,
   Outlet,
-  RouterProvider,
+  Route,
+  Routes as ReactRouterRoutes,
   useLocation,
 } from 'react-router-dom';
 import { toast } from 'sonner';
@@ -15,13 +17,28 @@ import { TooltipProvider } from './components/ui/tooltip';
 import { isAdmin, useCurrentUser, useServerConfig } from './modules/common';
 import { Layout } from './modules/layout';
 
-const createBrowserRouter = wrapCreateBrowserRouterV6(
-  reactRouterCreateBrowserRouter
+export const Setup = lazy(
+  () => import(/* webpackChunkName: "setup" */ './modules/setup')
+);
+export const Accounts = lazy(
+  () => import(/* webpackChunkName: "accounts" */ './modules/accounts')
+);
+export const AI = lazy(
+  () => import(/* webpackChunkName: "ai" */ './modules/ai')
+);
+export const About = lazy(
+  () => import(/* webpackChunkName: "about" */ './modules/about')
+);
+export const Settings = lazy(
+  () => import(/* webpackChunkName: "settings" */ './modules/settings')
+);
+export const Auth = lazy(
+  () => import(/* webpackChunkName: "auth" */ './modules/auth')
 );
 
-const _createBrowserRouter = window.SENTRY_RELEASE
-  ? createBrowserRouter
-  : reactRouterCreateBrowserRouter;
+const Routes = window.SENTRY_RELEASE
+  ? withSentryReactRouterV7Routing(ReactRouterRoutes)
+  : ReactRouterRoutes;
 
 function AuthenticatedRoutes() {
   const user = useCurrentUser();
@@ -58,57 +75,6 @@ function RootRoutes() {
   return <Outlet />;
 }
 
-export const router = _createBrowserRouter(
-  [
-    {
-      path: '/admin',
-      element: <RootRoutes />,
-      children: [
-        {
-          path: '/admin/auth',
-          lazy: () => import('./modules/auth'),
-        },
-        {
-          path: '/admin/setup',
-          lazy: () => import('./modules/setup'),
-        },
-        {
-          path: '/admin/*',
-          element: <AuthenticatedRoutes />,
-          children: [
-            {
-              path: 'accounts',
-              lazy: () => import('./modules/accounts'),
-            },
-            {
-              path: 'ai',
-              lazy: () => import('./modules/ai'),
-            },
-            {
-              path: 'about',
-              lazy: () => import('./modules/about'),
-            },
-            {
-              path: 'settings',
-              children: [
-                {
-                  path: '*',
-                  lazy: () => import('./modules/settings'),
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-  {
-    future: {
-      v7_normalizeFormMethod: true,
-    },
-  }
-);
-
 export const App = () => {
   return (
     <TooltipProvider>
@@ -118,7 +84,28 @@ export const App = () => {
           revalidateOnMount: false,
         }}
       >
-        <RouterProvider router={router} />
+        <BrowserRouter basename={environment.subPath}>
+          <Routes>
+            <Route path={ROUTES.admin.index} element={<RootRoutes />}>
+              <Route path={ROUTES.admin.auth} element={<Auth />} />
+              <Route path={ROUTES.admin.setup} element={<Setup />} />
+              <Route element={<AuthenticatedRoutes />}>
+                <Route path={ROUTES.admin.accounts} element={<Accounts />} />
+                <Route path={ROUTES.admin.ai} element={<AI />} />
+                <Route path={ROUTES.admin.about} element={<About />} />
+                <Route
+                  path={ROUTES.admin.settings.index}
+                  element={<Settings />}
+                >
+                  <Route
+                    path={ROUTES.admin.settings.module}
+                    element={<Settings />}
+                  />
+                </Route>
+              </Route>
+            </Route>
+          </Routes>
+        </BrowserRouter>
       </SWRConfig>
       <Toaster />
     </TooltipProvider>

packages/frontend/admin/src/modules/settings/index.tsx

@@ -62,7 +62,7 @@ export function SettingsPage() {
   );
 }
 
-export const AdminPanel = ({
+const AdminPanel = ({
   appConfig,
   patchedAppConfig,
   onUpdate,

packages/frontend/admin/src/modules/setup/form.tsx

@@ -165,7 +165,7 @@ export const Form = () => {
     passwordValue,
   ]);
 
-  const onPrevious = useCallback(() => {
+  const onPrevious = useAsyncCallback(async () => {
     if (current === count) {
       if (serverConfig.initialized === true) {
         return navigate('/admin', { replace: true });