Add example of builtin template, fix SubRoute

client/src/lib/page-common.js

@@ -2,7 +2,7 @@
 
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Navigate, Route, Routes, useLocation, useNavigate, useParams} from "react-router-dom";
+import {Link, Navigate, Route, Routes, useLocation, useNavigate, useParams} from "react-router-dom";
 import {withAsyncErrorHandler, withErrorHandling} from "./error-handling";
 import axios from "../lib/axios";
 import {getUrl} from "./urls";
@@ -192,7 +192,7 @@ export function getRoutes(structure, parentRoute) {
 
             const route = {
                 path: (pathWithParams === '' ? '/' : pathWithParams),
-                exact: true,//!entry.structure && entry.exact !== false,
+                exact: !entry.structure && entry.exact !== false,
                 structure: entry.structure,
                 panelComponent: entry.panelComponent,
                 panelRender: entry.panelRender,
@@ -395,15 +395,12 @@ class SubRoute extends Component {
                 // TODO: update the following code for the new react router (v6), see also root-trusted.js (`getStructure`)
                 const subStructure = route.structure(resolved, permissions, params);
                 const routes = getRoutes(subStructure, route);
-                const childRoute = routes[0];
+                // in ReactRouter v6, absolute paths don't work in nested Routes (https://github.com/remix-run/react-router/discussions/9841), so we need to use relative paths here
+                routes.forEach(r => {
+                    r.path = r.path.replace(route.path, '');  // remove the parent route path
+                });
                 return (
-                    <Route
-                        key={childRoute.path}
-                        path={childRoute.path}
-                        element={renderRouteComponent(childRoute)}
-                    >
-                    </Route>
-                    /*<Routes>
+                    <Routes>
                         {routes.map(childRoute => (
                             <Route
                                 key={childRoute.path}
@@ -412,7 +409,8 @@ class SubRoute extends Component {
                             >
                             </Route>
                         ))}
-                    </Routes>*/
+                        <Route path="*" element={<NoMatch/>} />
+                    </Routes>
                 );
             } else {
                 return this.props.loadingMessageFn();
@@ -473,3 +471,7 @@ export const withPageHelpers = createComponentMixin({
         return {};
     }
 });
+
+export function NoMatch() {
+    return <div className={"p-3"}>Page not found. <Link to={"/"}>Back to Home</Link></div>;
+}

client/src/lib/page.js

@@ -13,10 +13,11 @@ import interoperableErrors from "../../../shared/interoperable-errors";
 import {ActionLink, Button, DismissibleAlert, DropdownActionLink, Icon} from "./bootstrap-components";
 import ivisConfig from "ivisConfig";
 import styles from "./styles.scss";
-import {getRoutes, RenderRoute, Resolver, SectionContentContext, withPageHelpers} from "./page-common";
+import {getRoutes, RenderRoute, Resolver, SectionContentContext, withPageHelpers, NoMatch} from "./page-common";
 import {getBaseDir} from "./urls";
 import {createComponentMixin, withComponentMixins} from "./decorator-helpers";
 import {getLang} from "../../../shared/langs";
+import _ from "lodash";
 
 export { withPageHelpers }
 
@@ -280,7 +281,8 @@ class PanelRoute extends Component {
                     resolved,
                     permissions,
                     setPanelInFullScreen: this.setPanelInFullScreen,
-                    panelInFullScreen: this.state.panelInFullScreen
+                    panelInFullScreen: this.state.panelInFullScreen,
+                    params: _.omit(params, "*"),  // the trailing space in ':panelId/*' is matched incorrectly, so we remove it here
                 };
 
                 let panel;
@@ -504,7 +506,9 @@ class SectionContentBase extends Component {
                 <Routes>{routes.map(x => {
                     return this.renderRoute(x);
                 })
-                }</Routes>
+                }
+                <Route path="*" element={<NoMatch />} />
+                </Routes>
             </SectionContentContext.Provider>
         );
     }

client/src/root-trusted.js

@@ -83,34 +83,32 @@ import ivisConfig from "ivisConfig";
 import {TranslationRoot} from "./lib/i18n";
 
 import {SignalSetKind} from "../../shared/signal-sets";
-import {TaskSource, isBuiltinSource} from "../../shared/tasks";
-import {LegendPosition, StaticPieChart} from "./ivis/PieChart";
+import {isBuiltinSource} from "../../shared/tasks";
+
+import "./templates/builtin-templates-root"
 
 emCommonDefaults.setDefaults(em);
 
 const getStructure = t => {
-    let panelStructureSpec = {
+    let panelStructureSpec = (isFullscreen) => ({
         title: resolved => resolved.panel.name,
         link: params => `/workspaces/${params.workspaceId}/${params.panelId}`,
         resolve: {
             panel: params => `rest/panels/${params.panelId}`
         },
-        panelRender: props => <WorkspacePanel panel={props.resolved.panel}/>
+        panelRender: props => <WorkspacePanel panel={props.resolved.panel}/>,
 
-        /* TODO: update the following code for the new react router (v6), see also page-common.js (`SubRoute`)
-        structure: (resolved, params) => {
+        structure: (resolved, permissions, params) => {
             if (resolved.panel.template) {
-                console.log("resolved.panel.template ok")
                 return {
                     panelRender: props => <WorkspacePanel panel={resolved.panel}/>
                 }
             } else {
-                console.log("failed to resolved.panel.template")
                 const panelStructure = em.get('client.builtinTemplates.routes.' + resolved.panel.builtin_template);
-                return panelStructure(resolved.panel, t, `/workspaces/${params.workspaceId}/${params.panelId}`);
+                return panelStructure(resolved.panel, t, `/workspaces/${params.workspaceId}/${params.panelId}`, isFullscreen);
             }
-        }*/
-    };
+        }
+    });
 
     function getSignalChildren() {
         return{
@@ -223,15 +221,13 @@ const getStructure = t => {
                         link: params => `/workspaces/${params.workspaceId}`,
                         panelRender: props => <WorkspacesPanelsOverview workspace={props.resolved.workspace}/>,
                         children: {
-                            ':panelId': {
-                                ...panelStructureSpec,
-                                children: {
-                                    'fullscreen': {
-                                        ...panelStructureSpec,
-                                        panelInFullScreen: true,
-                                        link: params => `/workspaces/${params.workspaceId}/${params.panelId}/fullscreen`,
-                                    }
-                                }
+                            ':panelId/fullscreen/*': {
+                                ...panelStructureSpec(true),
+                                panelInFullScreen: true,
+                                link: params => `/workspaces/${params.workspaceId}/${params.panelId}/fullscreen`,
+                            },
+                            ':panelId/*': {
+                                ...panelStructureSpec(false),
                             },
                         }
                     },

client/src/templates/HelloWorld.js

@@ -0,0 +1,18 @@
+'use strict';
+
+import React, {Component} from "react";
+import {withComponentMixins} from "../lib/decorator-helpers";
+import {withErrorHandling} from "../lib/error-handling";
+import {withPageHelpers} from "../lib/page";
+
+@withComponentMixins([
+    withErrorHandling,
+    withPageHelpers,
+])
+export default class HelloWorld extends Component {
+    render() {
+      return (
+          <div>{this.props.message}</div>
+      );
+    }
+}

client/src/templates/builtin-templates-root.js

@@ -0,0 +1,17 @@
+'use strict';
+
+import em from '../lib/extension-manager';
+import React from "react";
+import HelloWorld from "./HelloWorld";
+
+em.set('client.builtinTemplates.routes.hello', (panel, t, panelUrl, isFullscreen) => ({
+    // resolve: { ... },
+    panelRender: props => <HelloWorld panel={panel} panelUrl={panelUrl} message={panel.params.message} />,  // message from panel configuration
+    children: {
+        ':message': {
+            link: params => `${panelUrl}/${params.message}`,
+            panelRender: props => <HelloWorld panel={panel} panelUrl={panelUrl} message={props.params.message} />,  // message from url parameter
+            panelInFullScreen: isFullscreen,
+        }
+    }
+}));