diff --git a/src/components/ServerContentPage.tsx b/src/components/ServerContentPage.tsx new file mode 100644 index 0000000000..f5c705cf6f --- /dev/null +++ b/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 = ({ 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; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index b5bb779534..4c90fe2dd8 100644 --- a/src/routes/index.tsx +++ b/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 = () => ( } /> } /> + + } /> + {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)} diff --git a/src/scripts/routes.js b/src/scripts/routes.js index 5932f2a782..f1574dd53e 100644 --- a/src/scripts/routes.js +++ b/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 */