feat: add not_found route (#194)

* feat: add not_found route

* leftover

Author: peppescg

icons/FlipBackward.svg

@@ -0,0 +1,13 @@
+import { render } from "./lib/test-utils";
+import Page from "./Page";
+
+test("render NotFound route", () => {
+  const { getByText, getByRole } = render(<Page />, {
+    routeConfig: {
+      initialEntries: ["/fake-route"],
+    },
+  });
+
+  expect(getByText(/Oops! There's nothing here/i)).toBeVisible();
+  expect(getByRole("button", { name: "Home" })).toBeVisible();
+});

src/Page.test.tsx

@@ -8,6 +8,7 @@ import { RouteChat } from "./routes/route-chat";
 import { RouteDashboard } from "./routes/route-dashboard";
 import { RouteCertificateSecurity } from "./routes/route-certificate-security";
 import { RouteWorkspaceCreation } from "./routes/route-workspace-creation";
+import { RouteNotFound } from "./routes/route-not-found";
 
 export default function Page() {
   return (
@@ -23,6 +24,7 @@ export default function Page() {
         path="/certificates/security"
         element={<RouteCertificateSecurity />}
       />
+      <Route path="*" element={<RouteNotFound />} />
     </Routes>
   );
 }

src/Page.tsx

@@ -0,0 +1,34 @@
+interface EmptyStateProps {
+  children?: React.ReactNode;
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  illustration?: React.ReactNode;
+}
+
+export function EmptyState({
+  illustration,
+  title,
+  children,
+  description,
+}: EmptyStateProps) {
+  return (
+    <>
+      <div className="my-4">
+        {illustration != null && (
+          <div className="m-auto flex w-full justify-center pb-2">
+            {illustration}
+          </div>
+        )}
+        <div className="mb-1 text-center text-xl font-medium text-gray-900">
+          {title}
+        </div>
+        <div className="m-auto mb-6 text-center font-normal text-secondary">
+          {description}
+        </div>
+        {children != null && (
+          <div className="flex justify-center">{children}</div>
+        )}
+      </div>
+    </>
+  );
+}

src/components/EmptyState.tsx

@@ -1,6 +1,5 @@
 export { default as Continue } from "./Continue";
 export { default as Copilot } from "./Copilot";
 export { default as Discord } from "./Discord";
-export { default as FlipBackward } from "./FlipBackward";
 export { default as Github } from "./Github";
 export { default as Youtube } from "./Youtube";

src/components/icons/FlipBackward.tsx

@@ -0,0 +1,22 @@
+import { EmptyState } from "@/components/EmptyState";
+import { IllustrationError, Button } from "@stacklok/ui-kit";
+import { useNavigate } from "react-router-dom";
+import { FlipBackward } from "@untitled-ui/icons-react";
+
+export function RouteNotFound() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      <EmptyState
+        title="Oops! There's nothing here"
+        description="Either the page you were looking for doesn’t exist or the link may be broken."
+        illustration={<IllustrationError className="w-1/2" />}
+      >
+        <Button variant="primary" onPress={() => navigate("/")}>
+          <FlipBackward /> Home
+        </Button>
+      </EmptyState>
+    </div>
+  );
+}