feat: introduce new version of NotFoundPage

src/__tests__/RouteSelector.spec.jsx

@@ -134,8 +134,7 @@ jest.mock("layouts/Folders", () => {
 
 jest.mock("layouts/NotFoundPage", () => {
   return {
-    __esModule: true,
-    default: () => {
+    NotFoundPage: () => {
       return <div>{NOT_FOUND_LAYOUT_TEXT}</div>
     },
   }

src/assets/images/NotFoundSubmarineImage.tsx

@@ -0,0 +1,169 @@
+export const NotFoundSubmarineImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="400"
+      height="400"
+      viewBox="0 0 401 400"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M354.948 212.937C354.949 210.016 353.789 207.215 351.724 205.15C349.659 203.085 346.858 201.925 343.937 201.926H110.638C85.7411 201.926 65.5581 222.109 65.5581 247.006C65.5581 271.903 85.7411 292.086 110.638 292.086H285.862C298.884 292.086 309.441 281.529 309.441 268.507C309.442 257.079 317.637 247.297 328.888 245.293L338.398 243.599C347.98 241.886 354.954 233.549 354.948 223.815V212.937Z"
+        fill="#ADC9FA"
+        stroke="#272D41"
+      />
+      <path
+        d="M279.653 201.789H140.861L148.478 187.328C152.077 180.502 159.158 176.229 166.874 176.227H258.857C270.332 176.227 279.633 185.528 279.633 197.003L279.653 201.789Z"
+        fill="#ADC9FA"
+        stroke="#272D41"
+      />
+      <circle
+        cx="219.602"
+        cy="246.998"
+        r="23.4965"
+        fill="white"
+        stroke="#272D41"
+      />
+      <circle
+        cx="219.602"
+        cy="246.999"
+        r="19.1022"
+        fill="#7CA9F7"
+        stroke="#272D41"
+      />
+      <path
+        d="M367.884 200.477C367.884 203.546 365.979 216.078 363.627 216.078C361.275 216.078 359.366 203.534 359.366 200.477C359.366 197.419 361.263 194.906 363.615 194.906C365.967 194.906 367.884 197.407 367.884 200.477Z"
+        fill="#272D41"
+        stroke="#272D41"
+      />
+      <path
+        d="M359.354 240.477C359.354 237.407 361.264 224.875 363.616 224.875C365.968 224.875 367.873 237.419 367.873 240.477C367.873 243.534 365.968 246.039 363.616 246.039C361.264 246.039 359.354 243.55 359.354 240.477Z"
+        fill="#272D41"
+        stroke="#272D41"
+      />
+      <path
+        d="M354.948 218.277H370.628C371.843 218.277 372.827 219.262 372.827 220.476C372.827 221.691 371.843 222.676 370.628 222.676H354.948V218.277H354.948Z"
+        fill="#272D41"
+        stroke="#272D41"
+      />
+      <circle
+        cx="169.305"
+        cy="187.633"
+        r="5.08424"
+        fill="white"
+        stroke="#272D41"
+      />
+      <circle
+        cx="195.965"
+        cy="187.633"
+        r="5.08424"
+        fill="white"
+        stroke="#272D41"
+      />
+      <path d="M333.141 244.524H277.179H333.141Z" fill="white" />
+      <path d="M333.141 244.524H277.179" stroke="#272D41" />
+      <path
+        d="M222.617 265.857C225.004 265.477 227.296 264.646 229.371 263.407L208.466 231.479C206.502 232.89 204.824 234.661 203.519 236.696L222.617 265.857Z"
+        fill="white"
+      />
+      <path
+        d="M212.652 229.209L233.134 260.487C234.457 259.155 235.58 257.638 236.466 255.983L218.112 227.959C216.24 228.104 214.4 228.525 212.652 229.209Z"
+        fill="white"
+      />
+      <circle cx="219.602" cy="246.999" r="19.1022" stroke="#272D41" />
+      <circle
+        cx="140.998"
+        cy="246.998"
+        r="23.4965"
+        fill="white"
+        stroke="#272D41"
+      />
+      <circle
+        cx="140.999"
+        cy="246.999"
+        r="19.1022"
+        fill="#7CA9F7"
+        stroke="#272D41"
+      />
+      <path
+        d="M144.013 265.857C146.401 265.477 148.694 264.646 150.771 263.407L129.862 231.482C127.898 232.894 126.22 234.664 124.915 236.7L144.013 265.857Z"
+        fill="white"
+      />
+      <path
+        d="M134.041 229.209L154.523 260.487C155.848 259.158 156.971 257.64 157.855 255.983L139.505 227.959C137.632 228.104 135.79 228.525 134.041 229.209Z"
+        fill="white"
+      />
+      <circle cx="140.998" cy="246.997" r="19.1022" stroke="#272D41" />
+      <path d="M88.5056 286.276V207.719" stroke="#272D41" />
+      <path
+        d="M174.389 38.2617V78.3868H216.097C220.841 78.3868 224.686 82.2321 224.686 86.9756V176.226H243.11V53.044C243.11 44.8815 236.494 38.2639 228.332 38.2617L174.389 38.2617Z"
+        fill="#272D41"
+        stroke="#272D41"
+      />
+      <path
+        d="M187.611 81.9588C192.26 81.9588 196.027 71.3748 196.027 58.3251C196.027 45.2754 192.26 34.6875 187.611 34.6875H173.362V81.9588H187.611Z"
+        fill="white"
+        stroke="#272D41"
+      />
+      <ellipse
+        cx="172.715"
+        cy="58.3251"
+        rx="8.42016"
+        ry="23.6376"
+        fill="#7CA9F7"
+        stroke="#272D41"
+      />
+      <path d="M172.742 34.6865L18.561 13.8008" stroke="#272D41" />
+      <path d="M172.743 81.957L21.0347 109.718" stroke="#272D41" />
+      <rect
+        x="254.094"
+        y="185.846"
+        width="14.0179"
+        height="6.87176"
+        rx="3.43588"
+        stroke="#272D41"
+      />
+      <path
+        d="M41.9204 134.455C57.3966 134.455 57.3966 142.15 72.8884 142.15C88.3802 142.15 88.3646 134.455 103.856 134.455C119.348 134.455 119.336 142.15 134.824 142.15C150.312 142.15 150.304 134.455 165.792 134.455C181.28 134.455 181.272 142.15 196.76 142.15C212.248 142.15 212.24 134.455 227.728 134.455C243.216 134.455 243.208 142.15 258.696 142.15C274.184 142.15 274.176 134.455 289.664 134.455C305.152 134.455 305.145 142.15 320.632 142.15C336.12 142.15 336.112 134.455 351.6 134.455C367.088 134.455 367.08 142.15 382.568 142.15"
+        stroke="#272D41"
+      />
+      <path d="M224.687 167.315H238.701" stroke="#272D41" />
+      <path
+        d="M21.0347 350.195L40.3485 310.246C42.3657 306.069 46.2701 303.117 50.8394 302.316C55.4086 301.515 60.0841 302.962 63.402 306.204C68.5701 311.25 69.2069 319.342 64.8916 325.134L54.3507 339.281C50.1759 344.887 55.3307 352.637 62.1163 350.951L76.3733 347.423C78.3524 346.933 80.4457 347.276 82.1651 348.372C83.8845 349.468 85.0796 351.22 85.4716 353.221L86.9103 360.575C87.3352 362.758 86.7623 365.016 85.3484 366.733C83.9344 368.45 81.8273 369.445 79.6034 369.446H79.0938C71.1989 369.446 68.7332 380.116 75.8284 383.581L81.2223 386.2"
+        stroke="#272D41"
+      />
+      <path
+        d="M21.0347 321.89L32.3556 286.002C33.5186 282.316 36.3363 279.385 39.9735 278.078C43.6106 276.77 47.6497 277.236 50.8933 279.338L61.4342 286.167"
+        stroke="#272D41"
+      />
+      <path
+        d="M316.481 376.855V343.735C316.482 337.803 319.417 332.255 324.321 328.917L340.13 318.137C344.325 315.276 347.111 310.773 347.798 305.742L351.667 277.365L359.115 315.958C360.431 322.768 357.703 329.727 352.11 333.829C347.503 337.208 344.78 342.58 344.779 348.294V376.855"
+        stroke="#272D41"
+      />
+      <path
+        d="M300.539 376.855V352.096C300.545 341.033 305.74 330.613 314.572 323.951C323.397 317.286 328.586 306.868 328.59 295.809V287.848C328.59 278.497 332.304 269.529 338.915 262.916L341.232 260.6"
+        stroke="#272D41"
+      />
+      <path
+        d="M367.884 376.855V359.956C367.885 351.822 370.431 343.892 375.167 337.279C379.905 330.666 382.452 322.736 382.451 314.602V260.6L372.282 295.488C371.142 299.395 367.561 302.083 363.49 302.085"
+        stroke="#272D41"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M196.102 330.96C196.102 330.96 171.367 316.394 160.1 321.889C148.834 327.385 174.942 333.708 190.88 321.889C198.575 313.646 196.102 330.96 196.102 330.96V330.96Z"
+        stroke="#272D41"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M248.199 357.342C248.199 357.342 232.491 348.095 225.333 351.584C218.175 355.073 234.741 359.091 244.882 351.584C249.767 346.347 248.199 357.342 248.199 357.342Z"
+        stroke="#272D41"
+      />
+      <path d="M23.7827 374.108L48.2435 330.961" stroke="#272D41" />
+      <path d="M33.9512 379.603L65.5581 366.412" stroke="#272D41" />
+    </svg>
+  )
+}

src/layouts/NotFoundPage/NotFoundPage.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from "@storybook/react"
+import { MemoryRouter, Route } from "react-router-dom"
+
+import { NotFoundPage } from "./NotFoundPage"
+
+const NotFoundPageMeta = {
+  title: "pages/NotFound",
+  component: NotFoundPage,
+} as Meta<typeof NotFoundPage>
+
+const Template: StoryFn<typeof NotFoundPage> = NotFoundPage
+
+export const WithinSite = Template.bind({})
+WithinSite.decorators = [
+  (Story) => {
+    return (
+      <MemoryRouter initialEntries={["/sites/storybook/notfound"]}>
+        <Route path="/sites/:siteName/notfound">
+          <Story />
+        </Route>
+      </MemoryRouter>
+    )
+  },
+]
+
+export const Generic = Template.bind({})
+Generic.decorators = [
+  (Story) => {
+    return (
+      <MemoryRouter initialEntries={["/notfound"]}>
+        <Route path="/notfound">
+          <Story />
+        </Route>
+      </MemoryRouter>
+    )
+  },
+]
+
+export default NotFoundPageMeta

src/layouts/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,58 @@
+import {
+  Button,
+  Grid,
+  GridItem,
+  GridProps,
+  Text,
+  VStack,
+} from "@chakra-ui/react"
+import { Link as RouterLink, useLocation } from "react-router-dom"
+
+import { NotFoundSubmarineImage } from "assets/images/NotFoundSubmarineImage"
+
+const GRID_LAYOUT: Pick<
+  GridProps,
+  "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns"
+> = {
+  gridTemplateAreas: `"buffer"
+                      "content"`,
+  gridTemplateColumns: "1fr",
+  gridTemplateRows: "4rem 1fr",
+}
+
+export const NotFoundPage = (): JSX.Element => {
+  const { pathname } = useLocation()
+  const pathTokens = pathname.split("/")
+  const siteName =
+    pathTokens.length > 3 && pathTokens[1] === "sites" ? pathTokens[2] : ""
+
+  return (
+    <Grid {...GRID_LAYOUT} bgColor="base.canvas.brand-subtle" minH="100vh">
+      <GridItem area="buffer" />
+      <GridItem area="content">
+        <VStack spacing="1rem">
+          <NotFoundSubmarineImage />
+          <VStack spacing="0.5rem" mt="1rem">
+            <Text
+              textStyle="subhead-1"
+              fontWeight="medium"
+              color="base.content.strong"
+            >
+              The page you are looking for does not exist anymore.
+            </Text>
+            <Text textStyle="body-2" color="base.content.default">
+              Try refreshing your page when you return.
+            </Text>
+          </VStack>
+          <Button
+            as={RouterLink}
+            to={siteName ? `/sites/${siteName}/workspace` : "/sites"}
+            mb="8rem"
+          >
+            Back to dashboard
+          </Button>
+        </VStack>
+      </GridItem>
+    </Grid>
+  )
+}

src/layouts/NotFoundPage/index.ts

@@ -0,0 +1 @@
+export * from "./NotFoundPage"

src/routing/RouteSelector.jsx

@@ -17,7 +17,7 @@ import { Folders } from "layouts/Folders"
 import { LoginPage } from "layouts/Login"
 import { SgidLoginCallbackPage } from "layouts/Login/SgidLoginCallbackPage"
 import { Media } from "layouts/Media"
-import NotFoundPage from "layouts/NotFoundPage"
+import { NotFoundPage } from "layouts/NotFoundPage"
 import { ResourceCategory } from "layouts/ResourceCategory"
 import { ResourceRoom } from "layouts/ResourceRoom"
 import { ReviewRequestDashboard } from "layouts/ReviewRequest/Dashboard"