Added Router to the Workflows Dashboard app

frontend/.devcontainer/devcontainer.json

@@ -5,7 +5,8 @@
     "ghcr.io/devcontainers/features/common-utils:2.4.2": {
       "username": "none",
       "upgradePackages": false
-    }
+    },
+    "git-lfs": "latest"
   },
   "customizations": {
     "vscode": {

frontend/dashboard/package.json

@@ -25,10 +25,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-relay": "18.1.0",
+    "react-router-dom": "^6.28.0",
     "relay-runtime": "18.1.0",
-    "workflows-lib": "*",
-    "relay-workflows-lib": "*"
-
+    "relay-workflows-lib": "*",
+    "workflows-lib": "*"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

frontend/dashboard/src/errorpage.tsx

@@ -0,0 +1,27 @@
+import { useRouteError, isRouteErrorResponse } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  let errorMessage: string;
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error.data?.message || error.statusText;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  } else if (typeof error == 'string') {
+    errorMessage = error;
+  } else {
+    console.error(error);
+    errorMessage = 'Unknown error';
+  }
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{errorMessage}</i>
+      </p>
+    </div>
+  );
+}

frontend/dashboard/src/main.tsx

@@ -2,13 +2,31 @@ import { RelayEnvironmentProvider } from "react-relay";
 import { RelayEnvironment } from "./RelayEnvironment";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import {
+  createBrowserRouter,
+  RouterProvider
+} from "react-router-dom";
 import "./index.css";
 import App from "./App.tsx";
+import WorkflowsList from "./routes/workflows.tsx";
+import ErrorPage from "./errorpage.tsx";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    errorElement: <ErrorPage />
+  },
+  {
+    path: "workflows",
+    element: <WorkflowsList />
+  }
+]);
 
 createRoot(document.getElementById("root")!).render(
   <RelayEnvironmentProvider environment={RelayEnvironment}>
     <StrictMode>
-      <App />
+      <RouterProvider router={router} />
     </StrictMode>
   </RelayEnvironmentProvider>
 );

frontend/dashboard/src/routes/workflows.tsx

@@ -0,0 +1,11 @@
+
+function WorkflowsList() {
+
+  return (
+    <>
+    <h1>List of Workflows</h1>
+    </>
+  )
+}
+
+export default WorkflowsList

frontend/yarn.lock

@@ -922,6 +922,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@remix-run/[email protected]":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.21.0.tgz#c65ae4262bdcfe415dbd4f64ec87676e4a56e2b5"
+  integrity sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==
+
 "@rollup/pluginutils@^5.0.2":
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
@@ -3962,6 +3967,21 @@ react-resizable@^3.0.5:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
+react-router-dom@^6.28.0:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.28.0.tgz#f73ebb3490e59ac9f299377062ad1d10a9f579e6"
+  integrity sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==
+  dependencies:
+    "@remix-run/router" "1.21.0"
+    react-router "6.28.0"
+
+[email protected]:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.28.0.tgz#29247c86d7ba901d7e5a13aa79a96723c3e59d0d"
+  integrity sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==
+  dependencies:
+    "@remix-run/router" "1.21.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"