Add NotFound component and 404 redirect (#440)

* Add NotFound component and 404 redirect

* fix TS

* use theme colors and fix catch-all path for MemoryRouter

src/App.tsx

@@ -12,7 +12,7 @@ import {
   prefDefault,
   prefGlobal
 } from "./preferences";
-import { routes } from "./routes";
+import { createRoutes } from "./routes";
 
 import { store } from "./store";
 import { condaStoreTheme, grayscaleTheme } from "./theme";
@@ -72,8 +72,8 @@ export class App<
 
     const router =
       routerType === "memory"
-        ? createMemoryRouter(routes, { initialEntries: ["/"] })
-        : createBrowserRouter(routes, { basename });
+        ? createMemoryRouter(createRoutes("memory"), { initialEntries: ["/"] })
+        : createBrowserRouter(createRoutes("browser"), { basename });
 
     return (
       <PrefContext.Provider value={this.state.pref}>

src/components/NoEnvironmentSelected.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+export function NoEnvironmentSelected() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%"
+      }}
+      data-testid="no-environment-selected"
+    >
+      <Typography sx={{ fontSize: "18px", color: "secondary.dark" }}>
+        Select an environment to show details
+      </Typography>
+    </Box>
+  );
+}

src/components/NotFound.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+export function NotFound() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%"
+      }}
+    >
+      <Typography
+        variant="h1"
+        sx={{ fontSize: "18px", color: "secondary.dark" }}
+      >
+        404 - Not found
+      </Typography>
+    </Box>
+  );
+}

src/layouts/PageLayout.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect, RefObject } from "react";
-import { Outlet, useOutletContext, useParams } from "react-router-dom";
+import { Outlet, useOutletContext } from "react-router-dom";
 import Box from "@mui/material/Box";
-import { Typography } from "@mui/material";
 import { Popup } from "../components";
 import { Environments } from "../features/environments";
 import { StyledScrollContainer } from "../styles";
@@ -21,8 +20,6 @@ export const PageLayout = () => {
     setRefreshEnvironments(true);
   }, [notification]);
 
-  const { namespaceName } = useParams();
-
   return (
     <Box
       sx={{
@@ -46,24 +43,7 @@ export const PageLayout = () => {
           overflowY: "scroll"
         }}
       >
-        {namespaceName ? (
-          <Outlet context={scrollRef} />
-        ) : (
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100%"
-            }}
-            data-testid="no-environment-selected"
-          >
-            <Typography sx={{ fontSize: "18px", color: "#333" }}>
-              Select an environment to show details
-            </Typography>
-          </Box>
-        )}
+        <Outlet context={scrollRef} />
       </StyledScrollContainer>
       <Popup
         isVisible={notification.show}

src/routes.tsx

@@ -1,26 +1,58 @@
 import React from "react";
+import { useHref, Navigate } from "react-router-dom";
 
 import { PageLayout } from "./layouts";
 import { EnvironmentDetails } from "./features/environmentDetails";
 import { EnvironmentCreate } from "./features/environmentCreate";
+import { NoEnvironmentSelected } from "./components/NoEnvironmentSelected";
+import { NotFound } from "./components/NotFound";
 
 /**
  * Define URL routes for the single page app
  */
 
-export const routes = [
-  {
-    path: "/",
-    element: <PageLayout />,
-    children: [
-      {
-        path: ":namespaceName/new-environment",
-        element: <EnvironmentCreate />
-      },
-      {
-        path: ":namespaceName/:environmentName",
-        element: <EnvironmentDetails />
-      }
-    ]
-  }
-];
+const HardRedirectNotFound = () => {
+  // useHref takes into account React Router basename option. So if basename is
+  // set to "/conda-store", the hook will return "/conda-store/not-found"
+  const url = useHref("/not-found");
+  window.location.replace(url);
+  return null;
+};
+
+export function createRoutes(routerType: "browser" | "memory") {
+  return [
+    {
+      path: "/",
+      element: <PageLayout />,
+      children: [
+        {
+          index: true,
+          element: <NoEnvironmentSelected />
+        },
+        {
+          path: ":namespaceName/new-environment",
+          element: <EnvironmentCreate />
+        },
+        {
+          path: ":namespaceName/:environmentName",
+          element: <EnvironmentDetails />
+        },
+        {
+          path: "not-found",
+          element: <NotFound />
+        }
+      ]
+    },
+    // If no route matches, send the user to a route on the server that will
+    // return a proper 404 HTTP status code.
+    {
+      path: "*",
+      element:
+        routerType === "browser" ? (
+          <HardRedirectNotFound />
+        ) : (
+          <Navigate to="/not-found" replace={true} />
+        )
+    }
+  ];
+}