Rename app-router to router and use new router

6 files changed, 60 insertions, 20 deletions

diff --git a/client/js/app/package.json b/client/js/app/package.json
index 8eebeb1dfee..8ea59b0cc35 100644
--- a/client/js/app/package.json
+++ b/client/js/app/package.json
@@ -33,7 +33,6 @@
     "husky": "^7",
     "prettier": "2",
     "pretty-quick": "^3",
-    "react-router": "^6",
     "react-router-dom": "^6",
     "vite": "^2"
   }
diff --git a/client/js/app/src/app/app.jsx b/client/js/app/src/app/app.jsx
index cb7441a2969..9fa912c89a5 100644
--- a/client/js/app/src/app/app.jsx
+++ b/client/js/app/src/app/app.jsx
@@ -1,25 +1,24 @@
 import React from 'react';
 import { BrowserRouter, Route } from 'react-router-dom';
-import { Error, Layout } from 'app/components';
+import { Layout } from 'app/components';
 import { Home } from 'app/pages/home/home';
 import { QueryBuilder } from 'app/pages/querybuilder/query-builder';
 import { QueryTracer } from 'app/pages/querytracer/query-tracer';
-import { AppProvider } from 'app/libs/app-provider';
-import { AppRouter } from 'app/libs/app-router';
+import { ThemeProvider } from 'app/libs/theme-provider';
+import { Router } from 'app/libs/router';
 
 export function App() {
   return (
     <BrowserRouter>
-      <AppProvider>
+      <ThemeProvider>
         <Layout>
-          <AppRouter>
+          <Router>
             <Route path="/" element={<Home />} />
             <Route path="querybuilder" element={<QueryBuilder />} />
             <Route path="querytracer" element={<QueryTracer />} />
-            <Route path="*" element={<Error code={404} />} />
-          </AppRouter>
+          </Router>
         </Layout>
-      </AppProvider>
+      </ThemeProvider>
     </BrowserRouter>
   );
 }
diff --git a/client/js/app/src/app/components/link/link.jsx b/client/js/app/src/app/components/link/link.jsx
index dc454b347d7..288174d21be 100644
--- a/client/js/app/src/app/components/link/link.jsx
+++ b/client/js/app/src/app/components/link/link.jsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { Link as InternalLink } from 'react-router-dom';
 import { Anchor } from '@mantine/core';
 
-// TODO: adapt it according to new Console link component
-
 export const isInternalLink = (link) => {
   if (!link) return false;
   return !/^[a-z]+:\/\//.test(link);
diff --git a/client/js/app/src/app/libs/app-router.jsx b/client/js/app/src/app/libs/app-router.jsx
deleted file mode 100644
index 2cb1c339bbf..00000000000
--- a/client/js/app/src/app/libs/app-router.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { Routes } from 'react-router';
-
-// TODO: add page title back once we fix in Console
-
-export function AppRouter(props) {
-  return <Routes {...props} />;
-}
diff --git a/client/js/app/src/app/libs/router.jsx b/client/js/app/src/app/libs/router.jsx
new file mode 100644
index 00000000000..df6df135ea9
--- /dev/null
+++ b/client/js/app/src/app/libs/router.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Routes, Route, useParams, Navigate } from 'react-router-dom';
+import { Error } from 'app/components';
+
+const mainTitle = 'Vespa Console';
+
+function TitledRoute({ element, title, default: isDefault, ...props }) {
+  const params = useParams();
+  const clone = React.cloneElement(element, Object.assign(props, params));
+  if (title != null) {
+    const titleStr = typeof title === 'function' ? title(params) : title;
+    document.title = titleStr.endsWith(mainTitle)
+      ? titleStr
+      : `${titleStr} - ${mainTitle}`;
+  } else if (isDefault) {
+    // Reset the title if title is not set and this is a default router
+    document.title = mainTitle;
+  }
+
+  return clone;
+}
+
+export function Router({ children }) {
+  // If there is only one route then this comes as an object.
+  if (!Array.isArray(children)) children = [children];
+  children = children.filter(({ props }) => props.enabled ?? true);
+
+  if (!children.some((child) => child.props.default))
+    children.push(<Error code={404} default />);
+
+  return (
+    <Routes>
+      {children.map(({ props, ...element }, i) => (
+        <Route
+          key={`${i}-${props.path}`}
+          path={props.default ? '*' : props.path}
+          element={
+            element.type === Redirect ? (
+              Object.assign({ props }, element)
+            ) : (
+              <TitledRoute element={element} {...props} />
+            )
+          }
+        />
+      ))}
+    </Routes>
+  );
+}
+
+export function Redirect({ to, replace }) {
+  return <Navigate {...{ to, replace }} />;
+}
diff --git a/client/js/app/yarn.lock b/client/js/app/yarn.lock
index b7f06cfefa7..f1cee14e50e 100644
--- a/client/js/app/yarn.lock
+++ b/client/js/app/yarn.lock
@@ -2072,7 +2072,7 @@ react-router-dom@^6:
     history "^5.2.0"
     react-router "6.3.0"
 
-react-router@6.3.0, react-router@^6:
+react-router@6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
   integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==