change(ui): additional routes

frontend/app/AdditionalRoutes.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function AdditionalRoutes() {
+    return (
+        <></>
+    );
+}
+
+export default AdditionalRoutes;

frontend/app/Router.tsx

@@ -107,6 +107,7 @@ interface RouterProps extends RouteComponentProps, ConnectedProps<typeof connect
   };
   mstore: any;
   setJwt: (jwt: string) => any;
+  additionalRoutes?: React.ReactElement | null;
 }
 
 const Router: React.FC<RouterProps> = (props) => {
@@ -125,7 +126,8 @@ const Router: React.FC<RouterProps> = (props) => {
     setSessionPath,
     fetchSiteList,
     history,
-    match: { params: { siteId: siteIdFromPath } }
+    match: { params: { siteId: siteIdFromPath } },
+    additionalRoutes = null
   } = props;
 
   const checkJWT = () => {
@@ -298,6 +300,7 @@ const Router: React.FC<RouterProps> = (props) => {
                   <Redirect key={fr} exact strict from={fr} to={to} />
                 ))}
                 <Redirect to={withSiteId(SESSIONS_PATH, siteId)} />
+                {additionalRoutes && additionalRoutes}
               </Switch>
             </Suspense>
           </Loader>

frontend/app/initialize.tsx

@@ -1,70 +1,74 @@
 import './styles/index.scss';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import './init';
-import { Provider } from 'react-redux';
+import {Provider} from 'react-redux';
 import store from './store';
 import Router from './Router';
-import { StoreProvider, RootStore } from './mstore';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DndProvider } from 'react-dnd';
-import { ConfigProvider, theme, ThemeConfig } from 'antd';
+import {StoreProvider, RootStore} from './mstore';
+import {HTML5Backend} from 'react-dnd-html5-backend';
+import {DndProvider} from 'react-dnd';
+import {ConfigProvider, theme, ThemeConfig} from 'antd';
 import colors from 'App/theme/colors';
+import AdditionalRoutes from './AdditionalRoutes';
 
 // @ts-ignore
 window.getCommitHash = () => console.log(window.env.COMMIT_HASH);
 
 const customTheme: ThemeConfig = {
-  // algorithm: theme.compactAlgorithm,
-  components: {
-    Layout: {
-      bodyBg: colors['gray-lightest'],
-      headerBg: colors['gray-lightest'],
-      siderBg: colors['gray-lightest'],
-    },
-    Menu: {
-      colorPrimary: colors.teal,
-      colorBgContainer: colors['gray-lightest'],
-      colorFillTertiary: colors['gray-lightest'],
-      colorBgLayout: colors['gray-lightest'],
-      subMenuItemBg: colors['gray-lightest'],
+    // algorithm: theme.compactAlgorithm,
+    components: {
+        Layout: {
+            bodyBg: colors['gray-lightest'],
+            headerBg: colors['gray-lightest'],
+            siderBg: colors['gray-lightest'],
+        },
+        Menu: {
+            colorPrimary: colors.teal,
+            colorBgContainer: colors['gray-lightest'],
+            colorFillTertiary: colors['gray-lightest'],
+            colorBgLayout: colors['gray-lightest'],
+            subMenuItemBg: colors['gray-lightest'],
 
-      itemActiveBg: colors['active-blue'],
-      itemSelectedBg: colors['active-blue'],
+            itemActiveBg: colors['active-blue'],
+            itemSelectedBg: colors['active-blue'],
+        },
+        Button: {
+            colorPrimary: colors.teal
+        }
     },
-    Button: {
-      colorPrimary: colors.teal
+    token: {
+        colorBgBase: colors['gray-lightest'],
+        colorPrimary: colors.teal,
+        colorPrimaryActive: '#394EFF',
+        colorBgLayout: colors['gray-lightest'],
+        colorBgContainer: colors['white'],
+        colorLink: colors['teal'],
+        colorLinkHover: colors['teal-dark'],
+
+        borderRadius: 4,
+        fontSize: 14,
+        fontFamily: '\'Roboto\', \'ArialMT\', \'Arial\'',
     }
-  },
-  token: {
-    colorBgBase: colors['gray-lightest'],
-    colorPrimary: colors.teal,
-    colorPrimaryActive: '#394EFF',
-    colorBgLayout: colors['gray-lightest'],
-    colorBgContainer: colors['white'],
-    colorLink: colors['teal'],
-    colorLinkHover: colors['teal-dark'],
-
-    borderRadius: 4,
-    fontSize: 14,
-    fontFamily: '\'Roboto\', \'ArialMT\', \'Arial\'',
-  }
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-  const container = document.getElementById('app');
-  const root = createRoot(container);
+    const container = document.getElementById('app');
+    // @ts-ignore
+    const root = createRoot(container);
 
-  // const theme = window.localStorage.getItem('theme');
-  root.render(
-    <ConfigProvider theme={customTheme}>
-      <Provider store={store}>
-        <StoreProvider store={new RootStore()}>
-          <DndProvider backend={HTML5Backend}>
-            <Router />
-          </DndProvider>
-        </StoreProvider>
-      </Provider>
-    </ConfigProvider>
-  );
+
+    // const theme = window.localStorage.getItem('theme');
+    root.render(
+        <ConfigProvider theme={customTheme}>
+            <Provider store={store}>
+                <StoreProvider store={new RootStore()}>
+                    <DndProvider backend={HTML5Backend}>
+                        {/*@ts-ignore*/}
+                        <Router additionalRoutes={<AdditionalRoutes/>}/>
+                    </DndProvider>
+                </StoreProvider>
+            </Provider>
+        </ConfigProvider>
+    );
 });