sts-sponsors team mailing list archive

[Peter Makowski <mp+441350@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:add-404-element into maas-site-manager:main.

Commit message:
Add custom 404 element

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/441350

QA steps
- Navigate to nonexistant route (e.g. /nosuchpage)
- Make sure that the 404 page has been displayed.
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:add-404-element into maas-site-manager:main.

diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
new file mode 100644
index 0000000..eded7b7
--- /dev/null
+++ b/frontend/src/pages/404.tsx
@@ -0,0 +1,18 @@
+import { Col, Row, Strip } from "@canonical/react-components";
+import { useLocation } from "react-router-dom";
+
+const NotFound = () => {
+  const location = useLocation();
+  return (
+    <Strip>
+      <Row>
+        <Col emptyLarge={4} size={6}>
+          <h2>404: Page not found</h2>
+          <p>Can't find page for: {location.pathname}</p>
+        </Col>
+      </Row>
+    </Strip>
+  );
+};
+
+export default NotFound;
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index b1ca0de..8b6e071 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -3,6 +3,7 @@ import { createRoutesFromElements, Route, redirect } from "react-router-dom";
 import RequireLogin from "./RequireLogin";
 
 import MainLayout from "@/components/MainLayout";
+import NotFound from "@/pages/404";
 import Login from "@/pages/login";
 import Logout from "@/pages/logout";
 import Requests from "@/pages/requests";
@@ -11,6 +12,14 @@ import Tokens from "@/pages/tokens/tokens";
 
 export const routes = createRoutesFromElements(
   <Route element={<MainLayout />} path="/">
+    <Route
+      element={
+        <RequireLogin>
+          <NotFound />
+        </RequireLogin>
+      }
+      path="*"
+    />
     <Route index loader={() => redirect("sites")} />
     <Route element={<Logout />} path="logout" />
     <Route element={<Login />} path="login" />
diff --git a/frontend/tests/404.spec.ts b/frontend/tests/404.spec.ts
new file mode 100644
index 0000000..5a71b5f
--- /dev/null
+++ b/frontend/tests/404.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+import { adminAuthFile } from "./constants";
+
+test.use({ storageState: adminAuthFile });
+
+test("displays a 404 page correctly for nested routes", async ({ page }) => {
+  await page.goto("/no-such-page");
+  await expect(page).toHaveTitle(/MAAS Site Manager/);
+  await expect(page.getByText(/404: Page not found/)).toBeVisible();
+  await expect(page.getByText("Can't find page for: /no-such-page")).toBeVisible();
+});