diff --git a/src/RootApp.tsx b/src/RootApp.tsx index 144d8f93e8..a7037f22ec 100644 --- a/src/RootApp.tsx +++ b/src/RootApp.tsx @@ -5,15 +5,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import React from 'react'; -import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App'; +import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes'; import AppHeader from 'components/AppHeader'; import Backdrop from 'components/Backdrop'; import { ApiProvider } from 'hooks/useApi'; import { WebConfigProvider } from 'hooks/useWebConfig'; import theme from 'themes/theme'; -import { HistoryRouter } from 'components/router/HistoryRouter'; -const DashboardApp = loadable(() => import('./apps/dashboard/App')); const StableAppRouter = loadable(() => import('./apps/stable/AppRouter')); const RootAppRouter = loadable(() => import('./RootAppRouter')); @@ -35,10 +33,6 @@ const RootAppLayout = ({ history }: { history: History }) => { : } - - - - ); }; diff --git a/src/RootAppRouter.tsx b/src/RootAppRouter.tsx index ff04d82545..d3056fffc6 100644 --- a/src/RootAppRouter.tsx +++ b/src/RootAppRouter.tsx @@ -1,13 +1,18 @@ import { History } from '@remix-run/router'; import React from 'react'; -import { RouterProvider, createHashRouter } from 'react-router-dom'; +import { + RouterProvider, + createHashRouter +} from 'react-router-dom'; import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes'; import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync'; +import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes'; const router = createHashRouter([ - ...EXPERIMENTAL_APP_ROUTES + ...EXPERIMENTAL_APP_ROUTES, + ...DASHBOARD_APP_ROUTES ]); export default function RootAppRouter({ history }: { history: History}) { diff --git a/src/apps/dashboard/App.tsx b/src/apps/dashboard/App.tsx deleted file mode 100644 index 640a60d1f8..0000000000 --- a/src/apps/dashboard/App.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import loadable from '@loadable/component'; -import React from 'react'; -import { Route, Routes } from 'react-router-dom'; - -import ConnectionRequired from 'components/ConnectionRequired'; -import { toViewManagerPageRoute } from 'components/router/LegacyRoute'; -import { AsyncPageProps, AsyncRoute, toAsyncPageRoute } from 'components/router/AsyncRoute'; -import { toRedirectRoute } from 'components/router/Redirect'; -import ServerContentPage from 'components/ServerContentPage'; - -import AppLayout from './AppLayout'; -import { REDIRECTS } from './routes/_redirects'; -import { ASYNC_ADMIN_ROUTES } from './routes/_asyncRoutes'; -import { LEGACY_ADMIN_ROUTES } from './routes/_legacyRoutes'; - -const DashboardAsyncPage = loadable( - (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `./routes/${props.page}`), - { cacheKey: (props: AsyncPageProps) => props.page } -); - -const toDashboardAsyncPageRoute = (route: AsyncRoute) => ( - toAsyncPageRoute({ - ...route, - element: DashboardAsyncPage - }) -); - -export const DASHBOARD_APP_PATHS = { - Dashboard: 'dashboard', - MetadataManager: 'metadata', - PluginConfig: 'configurationpage' -}; - -const DashboardApp = () => ( - - }> - }> - - {ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)} - {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)} - - - {/* NOTE: The metadata editor might deserve a dedicated app in the future */} - {toViewManagerPageRoute({ - path: DASHBOARD_APP_PATHS.MetadataManager, - pageProps: { - controller: 'edititemmetadata', - view: 'edititemmetadata.html' - } - })} - - - } /> - - - - {/* Suppress warnings for unhandled routes */} - - - {/* Redirects for old paths */} - {REDIRECTS.map(toRedirectRoute)} - -); - -export default DashboardApp; diff --git a/src/apps/dashboard/routes/_asyncRoutes.ts b/src/apps/dashboard/routes/_asyncRoutes.ts index 09d40de0e8..9abd6b75e3 100644 --- a/src/apps/dashboard/routes/_asyncRoutes.ts +++ b/src/apps/dashboard/routes/_asyncRoutes.ts @@ -1,12 +1,12 @@ -import type { AsyncRoute } from 'components/router/AsyncRoute'; +import { AsyncRouteType, type AsyncRoute } from 'components/router/AsyncRoute'; export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [ - { path: 'activity' }, - { path: 'notifications' }, - { path: 'users' }, - { path: 'users/access' }, - { path: 'users/add' }, - { path: 'users/parentalcontrol' }, - { path: 'users/password' }, - { path: 'users/profile' } + { path: 'activity', type: AsyncRouteType.Dashboard }, + { path: 'notifications', type: AsyncRouteType.Dashboard }, + { path: 'users', type: AsyncRouteType.Dashboard }, + { path: 'users/access', type: AsyncRouteType.Dashboard }, + { path: 'users/add', type: AsyncRouteType.Dashboard }, + { path: 'users/parentalcontrol', type: AsyncRouteType.Dashboard }, + { path: 'users/password', type: AsyncRouteType.Dashboard }, + { path: 'users/profile', type: AsyncRouteType.Dashboard } ]; diff --git a/src/apps/dashboard/routes/routes.tsx b/src/apps/dashboard/routes/routes.tsx new file mode 100644 index 0000000000..82a606a592 --- /dev/null +++ b/src/apps/dashboard/routes/routes.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { RouteObject } from 'react-router-dom'; +import AppLayout from '../AppLayout'; +import ConnectionRequired from 'components/ConnectionRequired'; +import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes'; +import { toAsyncPageRouteConfig } from 'components/router/AsyncRoute'; +import { toViewManagerPageRouteConfig } from 'components/router/LegacyRoute'; +import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes'; +import ServerContentPage from 'components/ServerContentPage'; + +export const DASHBOARD_APP_PATHS = { + Dashboard: 'dashboard', + MetadataManager: 'metadata', + PluginConfig: 'configurationpage' +}; + +export const DASHBOARD_APP_ROUTES: RouteObject[] = [ + { + element: , + children: [ + { + element: , + children: [ + { + path: DASHBOARD_APP_PATHS.Dashboard, + children: [ + ...ASYNC_ADMIN_ROUTES.map(toAsyncPageRouteConfig), + ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRouteConfig) + ] + }, + + /* NOTE: The metadata editor might deserve a dedicated app in the future */ + toViewManagerPageRouteConfig({ + path: DASHBOARD_APP_PATHS.MetadataManager, + pageProps: { + controller: 'edititemmetadata', + view: 'edititemmetadata.html' + } + }), + + { + path: DASHBOARD_APP_PATHS.PluginConfig, + element: + } + ] + } + ] + } +]; diff --git a/src/apps/experimental/routes/routes.tsx b/src/apps/experimental/routes/routes.tsx index 09ef6d396f..a07ea4dc93 100644 --- a/src/apps/experimental/routes/routes.tsx +++ b/src/apps/experimental/routes/routes.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { RouteObject, redirect } from 'react-router-dom'; import { REDIRECTS } from 'apps/dashboard/routes/_redirects'; +import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes'; import ConnectionRequired from 'components/ConnectionRequired'; import { toAsyncPageRouteConfig } from 'components/router/AsyncRoute'; import { toViewManagerPageRouteConfig } from 'components/router/LegacyRoute'; @@ -9,7 +10,6 @@ import { toRedirectRouteConfig } from 'components/router/Redirect'; import AppLayout from '../AppLayout'; import { ASYNC_USER_ROUTES } from './asyncRoutes'; import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes'; -import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App'; export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [ { diff --git a/src/apps/stable/AppRouter.tsx b/src/apps/stable/AppRouter.tsx index 57ca5f461b..b79bf43196 100644 --- a/src/apps/stable/AppRouter.tsx +++ b/src/apps/stable/AppRouter.tsx @@ -2,11 +2,13 @@ import { History } from '@remix-run/router'; import React from 'react'; import { RouterProvider, createHashRouter } from 'react-router-dom'; -import { STABLE_APP_ROUTES } from './routes/routes'; +import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes'; import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync'; +import { STABLE_APP_ROUTES } from './routes/routes'; const router = createHashRouter([ - ...STABLE_APP_ROUTES + ...STABLE_APP_ROUTES, + ...DASHBOARD_APP_ROUTES ]); export default function StableAppRouter({ history }: { history: History }) { diff --git a/src/apps/stable/routes/routes.tsx b/src/apps/stable/routes/routes.tsx index bf00037546..f4bbdf3b61 100644 --- a/src/apps/stable/routes/routes.tsx +++ b/src/apps/stable/routes/routes.tsx @@ -1,7 +1,7 @@ import { RouteObject, redirect } from 'react-router-dom'; import React from 'react'; -import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App'; +import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes'; import ConnectionRequired from 'components/ConnectionRequired'; import { toAsyncPageRouteConfig } from 'components/router/AsyncRoute'; import { toViewManagerPageRouteConfig } from 'components/router/LegacyRoute'; diff --git a/src/components/router/AsyncRoute.tsx b/src/components/router/AsyncRoute.tsx index aedd000867..ad945f5ad2 100644 --- a/src/components/router/AsyncRoute.tsx +++ b/src/components/router/AsyncRoute.tsx @@ -4,7 +4,8 @@ import { Route } from 'react-router-dom'; export enum AsyncRouteType { Stable, - Experimental + Experimental, + Dashboard, } export interface AsyncRoute { @@ -26,6 +27,11 @@ export interface AsyncPageProps { page: string } +const DashboardAsyncPage = loadable( + (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/routes/${props.page}`), + { cacheKey: (props: AsyncPageProps) => props.page } +); + const ExperimentalAsyncPage = loadable( (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/experimental/routes/${props.page}`), { cacheKey: (props: AsyncPageProps) => props.page } @@ -37,12 +43,20 @@ const StableAsyncPage = loadable( ); export const toAsyncPageRoute = ({ path, page, element, type = AsyncRouteType.Stable }: AsyncRoute) => { - const Element = element - || ( - type === AsyncRouteType.Experimental ? - ExperimentalAsyncPage : - StableAsyncPage - ); + let Element = element; + if (!Element) { + switch (type) { + case AsyncRouteType.Dashboard: + Element = DashboardAsyncPage; + break; + case AsyncRouteType.Experimental: + Element = ExperimentalAsyncPage; + break; + case AsyncRouteType.Stable: + default: + Element = StableAsyncPage; + } + } return (