Migrate plugin config pages to react-router

src/components/ServerContentPage.tsx

@@ -0,0 +1,60 @@
+import React, { FunctionComponent, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import ServerConnections from './ServerConnections';
+import viewManager from './viewManager/viewManager';
+import globalize from '../scripts/globalize';
+
+interface ServerContentPageProps {
+    view: string
+}
+
+/**
+ * Page component that renders html content from a server request.
+ * Uses the ViewManager to dynamically load and execute the page JS.
+ */
+const ServerContentPage: FunctionComponent<ServerContentPageProps> = ({ view }) => {
+    const location = useLocation();
+
+    useEffect(() => {
+        const loadPage = () => {
+            const viewOptions = {
+                url: location.pathname + location.search,
+                state: location.state,
+                autoFocus: false,
+                options: {
+                    supportsThemeMedia: false,
+                    enableMediaControl: true
+                }
+            };
+
+            viewManager.tryRestoreView(viewOptions)
+                .catch(async (result?: any) => {
+                    if (!result || !result.cancelled) {
+                        const apiClient = ServerConnections.currentApiClient();
+
+                        // Fetch the view html from the server and translate it
+                        const viewHtml = await apiClient.get(apiClient.getUrl(view + location.search))
+                            .then((html: string) => globalize.translateHtml(html));
+
+                        viewManager.loadView({
+                            ...viewOptions,
+                            view: viewHtml
+                        });
+                    }
+                });
+        };
+
+        loadPage();
+    }, [
+        view,
+        location.pathname,
+        location.search
+        // location.state is NOT included as a dependency here since dialogs will update state while the current view
+        // stays the same
+    ]);
+
+    return <></>;
+};
+
+export default ServerContentPage;

src/routes/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import ConnectionRequired from '../components/ConnectionRequired';
+import ServerContentPage from '../components/ServerContentPage';
 import { LEGACY_ADMIN_ROUTES, LEGACY_USER_ROUTES, toViewManagerPageRoute } from './legacyRoutes';
 import UserNew from './user/usernew';
 import Search from './search';
@@ -36,6 +37,10 @@ const AppRoutes = () => (
                 <Route path='userparentalcontrol.html' element={<UserParentalControl />} />
                 <Route path='userpassword.html' element={<UserPassword />} />
 
+                <Route path='configurationpage' element={
+                    <ServerContentPage view='/web/configurationpage' />
+                } />
+
                 {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
             </Route>
 

src/scripts/routes.js

@@ -118,15 +118,6 @@ import { appRouter } from '../components/appRouter';
         anonymous: true
     });
 
-    defineRoute({
-        path: '/configurationpage',
-        autoFocus: false,
-        enableCache: false,
-        enableContentQueryString: true,
-        roles: 'admin',
-        serverRequest: true
-    });
-
     console.groupEnd('defining core routes');
 
 /* eslint-enable indent */