Migrate wizard pages to dedicated app

src/RootAppRouter.tsx

@@ -15,6 +15,7 @@ import Backdrop from 'components/Backdrop';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
 import UserThemeProvider from 'themes/UserThemeProvider';
+import { WIZARD_APP_ROUTES } from 'apps/wizard/routes/routes';
 
 const layoutMode = localStorage.getItem('layout');
 const isExperimentalLayout = layoutMode === 'experimental';
@@ -25,6 +26,7 @@ const router = createHashRouter([
         children: [
             ...(isExperimentalLayout ? EXPERIMENTAL_APP_ROUTES : STABLE_APP_ROUTES),
             ...DASHBOARD_APP_ROUTES,
+            ...WIZARD_APP_ROUTES,
             {
                 path: '!/*',
                 Component: BangRedirect

src/apps/experimental/routes/legacyRoutes/public.ts

@@ -35,47 +35,5 @@ export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
             controller: 'session/resetPassword/index',
             view: 'session/resetPassword/index.html'
         }
-    },
-    {
-        path: 'wizardremoteaccess',
-        pageProps: {
-            controller: 'wizard/remote/index',
-            view: 'wizard/remote/index.html'
-        }
-    },
-    {
-        path: 'wizardfinish',
-        pageProps: {
-            controller: 'wizard/finish/index',
-            view: 'wizard/finish/index.html'
-        }
-    },
-    {
-        path: 'wizardlibrary',
-        pageProps: {
-            controller: 'wizard/library',
-            view: 'wizard/library.html'
-        }
-    },
-    {
-        path: 'wizardsettings',
-        pageProps: {
-            controller: 'wizard/settings/index',
-            view: 'wizard/settings/index.html'
-        }
-    },
-    {
-        path: 'wizardstart',
-        pageProps: {
-            controller: 'wizard/start/index',
-            view: 'wizard/start/index.html'
-        }
-    },
-    {
-        path: 'wizarduser',
-        pageProps: {
-            controller: 'wizard/user/index',
-            view: 'wizard/user/index.html'
-        }
     }
 ];

src/apps/stable/routes/legacyRoutes/public.ts

@@ -1,4 +1,4 @@
-import { LegacyRoute } from '../../../../components/router/LegacyRoute';
+import type { LegacyRoute } from 'components/router/LegacyRoute';
 
 export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
     {
@@ -35,47 +35,5 @@ export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
             controller: 'session/resetPassword/index',
             view: 'session/resetPassword/index.html'
         }
-    },
-    {
-        path: 'wizardremoteaccess',
-        pageProps: {
-            controller: 'wizard/remote/index',
-            view: 'wizard/remote/index.html'
-        }
-    },
-    {
-        path: 'wizardfinish',
-        pageProps: {
-            controller: 'wizard/finish/index',
-            view: 'wizard/finish/index.html'
-        }
-    },
-    {
-        path: 'wizardlibrary',
-        pageProps: {
-            controller: 'wizard/library',
-            view: 'wizard/library.html'
-        }
-    },
-    {
-        path: 'wizardsettings',
-        pageProps: {
-            controller: 'wizard/settings/index',
-            view: 'wizard/settings/index.html'
-        }
-    },
-    {
-        path: 'wizardstart',
-        pageProps: {
-            controller: 'wizard/start/index',
-            view: 'wizard/start/index.html'
-        }
-    },
-    {
-        path: 'wizarduser',
-        pageProps: {
-            controller: 'wizard/user/index',
-            view: 'wizard/user/index.html'
-        }
     }
 ];

src/apps/wizard/controllers/finish/index.js

@@ -1,4 +1,4 @@
-import loading from '../../../components/loading/loading';
+import loading from 'components/loading/loading';
 
 function onFinish() {
     loading.show();

src/apps/wizard/controllers/library.js

@@ -361,7 +361,7 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
 
 window.WizardLibraryPage = {
     next: function () {
-        Dashboard.navigate('wizardsettings');
+        Dashboard.navigate('wizard/settings');
     }
 };
 pageClassOn('pageshow', 'mediaLibraryPage', function () {

src/apps/wizard/controllers/remote/index.js

@@ -1,8 +1,8 @@
-import loading from '../../../components/loading/loading';
-import '../../../elements/emby-checkbox/emby-checkbox';
-import '../../../elements/emby-button/emby-button';
-import '../../../elements/emby-select/emby-select';
-import Dashboard from '../../../utils/dashboard';
+import loading from 'components/loading/loading';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
 
 function save(page) {
     loading.show();
@@ -23,7 +23,7 @@ function save(page) {
 }
 
 function navigateToNextPage() {
-    Dashboard.navigate('wizardfinish');
+    Dashboard.navigate('wizard/finish');
 }
 
 function onSubmit(e) {

src/apps/wizard/controllers/settings/index.js

@@ -1,8 +1,8 @@
-import loading from '../../../components/loading/loading';
-import '../../../elements/emby-checkbox/emby-checkbox';
-import '../../../elements/emby-button/emby-button';
-import '../../../elements/emby-select/emby-select';
-import Dashboard from '../../../utils/dashboard';
+import loading from 'components/loading/loading';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
 
 function save(page) {
     loading.show();
@@ -66,7 +66,7 @@ function reload(page) {
 }
 
 function navigateToNextPage() {
-    Dashboard.navigate('wizardremoteaccess');
+    Dashboard.navigate('wizard/remoteaccess');
 }
 
 function onSubmit(e) {

src/apps/wizard/controllers/start/index.js

@@ -1,7 +1,7 @@
-import loading from '../../../components/loading/loading';
-import '../../../elements/emby-button/emby-button';
-import '../../../elements/emby-select/emby-select';
-import Dashboard from '../../../utils/dashboard';
+import loading from 'components/loading/loading';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
 import dom from 'scripts/dom';
 
 function loadPage(page, config, languageOptions) {
@@ -24,7 +24,7 @@ function save(page) {
             url: apiClient.getUrl('Startup/Configuration'),
             contentType: 'application/json'
         }).then(function () {
-            Dashboard.navigate('wizarduser');
+            Dashboard.navigate('wizard/user');
         });
     });
 }

src/apps/wizard/controllers/user/index.js

@@ -1,17 +1,17 @@
-import loading from '../../../components/loading/loading';
-import globalize from '../../../lib/globalize';
-import '../../../styles/dashboard.scss';
-import '../../../elements/emby-input/emby-input';
-import '../../../elements/emby-button/emby-button';
-import Dashboard from '../../../utils/dashboard';
-import toast from '../../../components/toast/toast';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import 'styles/dashboard.scss';
+import 'elements/emby-input/emby-input';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
+import toast from 'components/toast/toast';
 
 function getApiClient() {
     return ApiClient;
 }
 
 function nextWizardPage() {
-    Dashboard.navigate('wizardlibrary')
+    Dashboard.navigate('wizard/library')
         .catch(err => {
             console.error('[Wizard > User] error navigating to library setup', err);
         });

src/apps/wizard/routes/routes.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Navigate, RouteObject } from 'react-router-dom';
+
+import AppLayout from 'apps/stable/AppLayout';
+import { AppType } from 'constants/appType';
+import ConnectionRequired from 'components/ConnectionRequired';
+import ErrorBoundary from 'components/router/ErrorBoundary';
+import { type LegacyRoute, toViewManagerPageRoute } from 'components/router/LegacyRoute';
+
+const ROUTES: LegacyRoute[] = [
+    {
+        path: 'remoteaccess',
+        pageProps: {
+            appType: AppType.Wizard,
+            controller: 'remote/index',
+            view: 'remote/index.html'
+        }
+    },
+    {
+        path: 'finish',
+        pageProps: {
+            appType: AppType.Wizard,
+            controller: 'finish/index',
+            view: 'finish/index.html'
+        }
+    },
+    {
+        path: 'library',
+        pageProps: {
+            appType: AppType.Wizard,
+            controller: 'library',
+            view: 'library.html'
+        }
+    },
+    {
+        path: 'settings',
+        pageProps: {
+            appType: AppType.Wizard,
+            controller: 'settings/index',
+            view: 'settings/index.html'
+        }
+    },
+    {
+        path: 'start',
+        pageProps: {
+            appType: AppType.Wizard,
+            controller: 'start/index',
+            view: 'start/index.html'
+        }
+    },
+    {
+        path: 'user',
+        pageProps: {
+            appType: AppType.Wizard,
+            controller: 'user/index',
+            view: 'user/index.html'
+        }
+    }
+];
+
+export const WIZARD_APP_ROUTES: RouteObject[] = [
+    {
+        element: <ConnectionRequired isUserRequired={false} />,
+        children: [
+            {
+                Component: AppLayout,
+                path: 'wizard',
+                children: [
+                    { index: true, element: <Navigate replace to='start' /> },
+                    ...ROUTES.map(toViewManagerPageRoute)
+                ],
+                ErrorBoundary
+            }
+        ]
+    }
+];

src/components/viewManager/ViewManagerPage.tsx

@@ -38,19 +38,26 @@ const importController = (
     controller: string,
     view: string
 ) => {
-    if (appType === AppType.Dashboard) {
-        return Promise.all([
-            import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/controllers/${controller}`),
-            import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/controllers/${view}`)
-                .then(html => globalize.translateHtml(html))
-        ]);
+    switch (appType) {
+        case AppType.Dashboard:
+            return Promise.all([
+                import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/controllers/${controller}`),
+                import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/controllers/${view}`)
+                    .then(html => globalize.translateHtml(html))
+            ]);
+        case AppType.Wizard:
+            return Promise.all([
+                import(/* webpackChunkName: "[request]" */ `../../apps/wizard/controllers/${controller}`),
+                import(/* webpackChunkName: "[request]" */ `../../apps/wizard/controllers/${view}`)
+                    .then(html => globalize.translateHtml(html))
+            ]);
+        default:
+            return Promise.all([
+                import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
+                import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)
+                    .then(html => globalize.translateHtml(html))
+            ]);
     }
-
-    return Promise.all([
-        import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
-        import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)
-            .then(html => globalize.translateHtml(html))
-    ]);
 };
 
 const loadView = async (

src/constants/appType.ts

@@ -4,5 +4,6 @@
 export enum AppType {
     Dashboard = 'dashboard',
     Experimental = 'experimental',
-    Stable = 'stable'
+    Stable = 'stable',
+    Wizard = 'wizard'
 }