add Error page

Signed-off-by: Vallari <[email protected]>

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
 import AppBar from "./components/AppBar";
@@ -9,6 +9,7 @@ import Runs from "./pages/Runs";
 import Run from "./pages/Run";
 import Job from "./pages/Job";
 import Queue from "./pages/Queue";
+import Error from "./pages/Error";
 
 import "./App.css";
 
@@ -41,6 +42,8 @@ function App(props: AppProps) {
           <Route path="/queue" element={<Queue />} />
           <Route path="/:name" element={<Run />} />
           <Route path="/:name/:job_id" element={<Job />} />
+          <Route path="/error" element={ <Error /> } /> 
+          <Route path="*" element={<Navigate to="/error" replace />} />
         </Routes>
       </div>
     </div>

src/pages/Error/index.tsx

@@ -0,0 +1,17 @@
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+
+
+export default function ErrorPage() {
+    return (
+        <div>
+            <Typography variant="overline" display="block" gutterBottom>
+                <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+                404 
+                <Divider orientation="vertical" variant="middle" flexItem />
+                This page could not be found.
+                </div>
+            </Typography>
+        </div>
+    )
+}

src/pages/Run/index.tsx

@@ -1,6 +1,6 @@
 import { useQueryParams, StringParam, NumberParam } from "use-query-params";
 import { styled, useTheme } from "@mui/material/styles";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
@@ -29,6 +29,7 @@ const Root = styled("div")(() => ({
 }));
 
 export default function Run() {
+  const navigate = useNavigate();
   const theme = useTheme();
   const [params, setParams] = useQueryParams({
     status: StringParam,
@@ -38,7 +39,7 @@ export default function Run() {
   const { name } = useParams<RunParams>();
   const query = useRun(name === undefined ? "" : name);
   if (query === null) return <Typography>404</Typography>;
-  if (query.isError) return null;
+  if (query.isError) return navigate('/error');
   const data: Run | undefined = query.data;
   const suite = data?.suite;
   const branch = query.data?.branch;