add react-router 7 (#724)

ui100/package-lock.json

@@ -14,6 +14,7 @@
         "@mui/material": "^6.1.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router": "^7.0.1",
         "reagraph": "^4.21.0"
       },
       "devDependencies": {
@@ -1850,6 +1851,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/draco3d": {
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
@@ -2495,6 +2502,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -4168,6 +4184,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.1.tgz",
+      "integrity": "sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4377,6 +4417,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4599,6 +4645,12 @@
         "zustand": "^4.3.2"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

ui100/package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^6.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router": "^7.0.1",
     "reagraph": "^4.21.0"
   },
   "devDependencies": {

ui100/src/ApiConsole.tsx

@@ -26,7 +26,7 @@ const ApiConsole = () => {
             let cfg = new Configuration({
                 headers: {
                     // ignorable token, local development environment
-                    "X-TOKEN": "q9bwDQqMQ6K6"
+                    "X-TOKEN": "8TPUmoBHMdA8"
                 }
             });
             let api = new MetadataApi(cfg);

ui100/src/main.tsx

@@ -4,11 +4,16 @@ import {createRoot} from "react-dom/client";
 import ApiConsole from "./ApiConsole.tsx";
 import {ThemeProvider} from "@mui/material";
 import {theme} from "./model/theme.ts";
+import {BrowserRouter, Route, Routes} from "react-router";
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <ThemeProvider theme={theme}>
-            <ApiConsole />
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/" element={<ApiConsole />} />
+                </Routes>
+            </BrowserRouter>
         </ThemeProvider>
     </StrictMode>
 );