[studio] create 404 page #1515 (#1542)

studio - page not found

agdb_studio/src/router/router.spec.ts

@@ -94,4 +94,12 @@ describe("router", () => {
 
         expect(router.currentRoute.value.name).toBe("admin-users");
     });
+
+    it("loads the not found page", async () => {
+        isLoggedInMock.value = true;
+
+        await router.push("/not-found");
+
+        expect(router.currentRoute.value.name).toBe("not-found");
+    });
 });

agdb_studio/src/router/routes.ts

@@ -45,6 +45,11 @@ export const createRoutes = (): RouteRecordRaw[] => {
                         },
                     ],
                 },
+                {
+                    path: "/:pathMatch(.*)*",
+                    name: "not-found",
+                    component: () => import("@/views/NotFoundView.vue"),
+                },
             ],
         },
     ];

agdb_studio/src/views/NotFoundView.spec.ts

@@ -0,0 +1,14 @@
+import { vi, describe, it, beforeEach, expect } from "vitest";
+import NotFoundView from "./NotFoundView.vue";
+import { shallowMount } from "@vue/test-utils";
+
+describe("NotFoundView", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it("renders the not found view", () => {
+        const wrapper = shallowMount(NotFoundView);
+        expect(wrapper.text()).toContain("404");
+        expect(wrapper.text()).toContain("Page not found");
+    });
+});

agdb_studio/src/views/NotFoundView.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup></script>
+
+<template>
+    <div class="not-found">
+        <h1>404</h1>
+        <p>Page not found</p>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.not-found {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: calc(100vh - 10rem);
+    min-height: 10rem;
+    font-family: "Arial", sans-serif;
+    h1 {
+        font-size: 6rem;
+        margin: 0;
+        border-bottom: 2px solid var(--color-border);
+    }
+
+    p {
+        font-size: 1.5rem;
+        margin: 1rem;
+    }
+}
+</style>