From e9f173636b4def1c0c40de182ed51160f6b40f07 Mon Sep 17 00:00:00 2001
From: Benedikt Daurer <benedikt.daurer@diamond.ac.uk>
Date: Wed, 13 Nov 2024 12:21:35 +0000
Subject: [PATCH] Added Router to the Workflows Dashboard app

---
 frontend/.devcontainer/devcontainer.json    |  3 ++-
 frontend/dashboard/package.json             |  6 ++---
 frontend/dashboard/src/errorpage.tsx        | 27 +++++++++++++++++++++
 frontend/dashboard/src/main.tsx             | 20 ++++++++++++++-
 frontend/dashboard/src/routes/workflows.tsx | 11 +++++++++
 frontend/yarn.lock                          | 20 +++++++++++++++
 6 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 frontend/dashboard/src/errorpage.tsx
 create mode 100644 frontend/dashboard/src/routes/workflows.tsx

diff --git a/frontend/.devcontainer/devcontainer.json b/frontend/.devcontainer/devcontainer.json
index a316ed3c..453cdd64 100644
--- a/frontend/.devcontainer/devcontainer.json
+++ b/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": {
diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json
index 7a937884..733fe70a 100644
--- a/frontend/dashboard/package.json
+++ b/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",
diff --git a/frontend/dashboard/src/errorpage.tsx b/frontend/dashboard/src/errorpage.tsx
new file mode 100644
index 00000000..10109a18
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/frontend/dashboard/src/main.tsx b/frontend/dashboard/src/main.tsx
index 51f77803..808aa4e7 100644
--- a/frontend/dashboard/src/main.tsx
+++ b/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>
 );
diff --git a/frontend/dashboard/src/routes/workflows.tsx b/frontend/dashboard/src/routes/workflows.tsx
new file mode 100644
index 00000000..682ca4d8
--- /dev/null
+++ b/frontend/dashboard/src/routes/workflows.tsx
@@ -0,0 +1,11 @@
+
+function WorkflowsList() {
+
+  return (
+    <>
+    <h1>List of Workflows</h1>
+    </>
+  )
+}
+
+export default WorkflowsList
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7af1699f..2c09a9c1 100644
--- a/frontend/yarn.lock
+++ b/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/router@1.21.0":
+  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"
+
+react-router@6.28.0:
+  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"