[studio] add admin screen #1505 (#1506)

* studio - admin view * studio - lint rules * studio - unit tests * studio - unit tests * studio - unit tests mock * studio - unit tests mock
agnesoft · Jan 19, 2025 · 1725025 · 1725025
1 parent 1a0a3f1
commit 1725025
Show file tree

Hide file tree

Showing 38 changed files with 696 additions and 194 deletions.
diff --git a/agdb_studio/.eslintrc.cjs b/agdb_studio/.eslintrc.cjs
@@ -3,6 +3,8 @@ module.exports = {
     root: true,
     extends: [
         "plugin:vue/vue3-essential",
+        "plugin:vue/vue3-strongly-recommended",
+        "plugin:vue/vue3-recommended",
         "eslint:recommended",
         "@vue/eslint-config-typescript",
         "@vue/eslint-config-prettier/skip-formatting",

diff --git a/agdb_studio/src/components/auth/LoginForm.spec.ts b/agdb_studio/src/components/auth/LoginForm.spec.ts
@@ -1,12 +1,19 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import LoginForm from "@/components/auth/LoginForm.vue";
 
-const { loginMock, logoutMock, pushMock } = vi.hoisted(() => {
+const { loginMock, logoutMock, pushMock, currentRoute } = vi.hoisted(() => {
     return {
         loginMock: vi.fn(),
         logoutMock: vi.fn(),
         pushMock: vi.fn(),
+        currentRoute: {
+            value: {
+                query: {
+                    redirect: "/home",
+                } as { redirect?: string },
+            },
+        },
     };
 });
 
@@ -22,6 +29,7 @@ vi.mock("@/router", () => {
     return {
         default: {
             push: pushMock,
+            currentRoute,
         },
     };
 });
@@ -30,10 +38,24 @@ describe("LoginForm", () => {
     beforeEach(() => {
         vi.clearAllMocks();
     });
-    it("runs successful login on click", async () => {
+    it("runs successful login on click and redirects from query", async () => {
+        loginMock.mockResolvedValue(true);
+
+        const wrapper = mount(LoginForm);
+        currentRoute.value.query.redirect = "/home";
+        await wrapper.find('input[type="text"]#username').setValue("test");
+        await wrapper.find('input[type="password"]#password').setValue("test");
+
+        await wrapper.find(".login-form>form").trigger("submit");
+
+        expect(loginMock).toHaveBeenCalled();
+        expect(pushMock).toHaveBeenCalledWith("/home");
+    });
+    it("runs successful login on click and redirects to home", async () => {
         loginMock.mockResolvedValue(true);
 
         const wrapper = mount(LoginForm);
+        currentRoute.value.query.redirect = undefined;
         await wrapper.find('input[type="text"]#username').setValue("test");
         await wrapper.find('input[type="password"]#password').setValue("test");
 

diff --git a/agdb_studio/src/components/auth/LoginForm.vue b/agdb_studio/src/components/auth/LoginForm.vue
@@ -21,7 +21,10 @@ const onLogin = async () => {
     clearError();
     login(username.value, password.value)
         .then(async () => {
-            await router.push({ name: "home" });
+            const redirect = router.currentRoute.value.query.redirect;
+            await router.push(
+                typeof redirect === "string" ? redirect : { name: "home" },
+            );
             loading.value = false;
         })
         .catch((e) => {
@@ -36,14 +39,14 @@ const onLogin = async () => {
         <form @submit.prevent="onLogin">
             <div>
                 <label for="username">Username:</label>
-                <input type="text" id="username" v-model="username" required />
+                <input id="username" v-model="username" type="text" required />
             </div>
             <div>
                 <label for="password">Password:</label>
                 <input
-                    type="password"
                     id="password"
                     v-model="password"
+                    type="password"
                     required
                 />
             </div>

diff --git a/agdb_studio/src/components/base/content/AgdbContent.vue b/agdb_studio/src/components/base/content/AgdbContent.vue
@@ -42,6 +42,8 @@ onMounted(() => {
                             inputs.get(part.input.key) !== undefined &&
                             part.input.type === 'select'
                         "
+                        :value="getInputValue(props.contentKey, part.input.key)"
+                        :name="part.input.key"
                         @change="
                             (event: Event) => {
                                 setInputValue(
@@ -51,27 +53,26 @@ onMounted(() => {
                                 );
                             }
                         "
-                        :value="getInputValue(props.contentKey, part.input.key)"
-                        :name="part.input.key"
                     >
                         <option
-                            v-for="(option, index) in part.input.options"
-                            :key="index"
+                            v-for="option in part.input.options"
+                            :key="option.value"
                             :value="option.value"
                         >
                             {{ option.label }}
                         </option>
                     </select>
                     <input
                         v-else-if="inputs.get(part.input.key) !== undefined"
-                        :name="part.input.key"
-                        :type="part.input.type"
                         :ref="
                             (el) => {
                                 if (part.input?.autofocus)
                                     autofocusElement = el;
                             }
                         "
+                        :name="part.input.key"
+                        :type="part.input.type"
+                        :value="getInputValue(props.contentKey, part.input.key)"
                         @input="
                             (event: Event) => {
                                 setInputValue(
@@ -81,7 +82,6 @@ onMounted(() => {
                                 );
                             }
                         "
-                        :value="getInputValue(props.contentKey, part.input.key)"
                     />
                     <FadeTransition>
                         <div v-if="part.input.error" class="error-message">

diff --git a/agdb_studio/src/components/base/dropdown/AgdbDropdown.vue b/agdb_studio/src/components/base/dropdown/AgdbDropdown.vue
@@ -16,15 +16,15 @@ const buttonRef = ref<HTMLElement>();
 
 <template>
     <div class="agdb-dropdown">
-        <button type="button" class="trigger" @click="toggle" ref="buttonRef">
+        <button ref="buttonRef" type="button" class="trigger" @click="toggle">
             <slot name="trigger"></slot>
         </button>
         <Teleport to="body">
             <SlideUpTransition>
                 <DropdownContent
+                    v-on-click-outside="close"
                     :button-ref="buttonRef"
                     :opened="opened"
-                    v-on-click-outside="close"
                     @close="close"
                 >
                     <slot name="content"></slot>

diff --git a/agdb_studio/src/components/base/dropdown/DropdownContent.vue b/agdb_studio/src/components/base/dropdown/DropdownContent.vue
@@ -3,9 +3,11 @@ import { computed, ref } from "vue";
 
 const props = defineProps({
     opened: { type: Boolean, required: true },
-    buttonRef: { type: HTMLElement, required: false },
+    buttonRef: { type: HTMLElement, required: false, default: null },
 });
 
+defineEmits(["close"]);
+
 const contentRef = ref<HTMLElement>();
 
 const contentStyle = computed(() => {
@@ -33,11 +35,11 @@ const contentStyle = computed(() => {
 
 <template>
     <div
-        class="content"
-        @click="$emit('close')"
         v-if="opened"
-        :style="contentStyle"
         ref="contentRef"
+        class="content"
+        :style="contentStyle"
+        @click="$emit('close')"
     >
         <slot></slot>
     </div>

diff --git a/agdb_studio/src/components/base/menu/AgdbMenu.vue b/agdb_studio/src/components/base/menu/AgdbMenu.vue
@@ -18,6 +18,8 @@ const openSubmenu = (key: string) => {
         <li
             v-for="action in props.actions"
             :key="action.key"
+            class="menu-item"
+            :data-key="action.key"
             @click.prevent="
                 (event: MouseEvent) => {
                     if (action.actions) {
@@ -26,9 +28,7 @@ const openSubmenu = (key: string) => {
                     action.action({ event });
                 }
             "
-            class="menu-item"
             @mouseover="openSubmenu(action.key)"
-            :data-key="action.key"
         >
             <a
                 href="#"
@@ -43,8 +43,8 @@ const openSubmenu = (key: string) => {
             </a>
             <SlideUpTransition>
                 <AgdbMenu
-                    class="sub-menu"
                     v-if="openedSubmenu === action.key && action.actions"
+                    class="sub-menu"
                     :actions="action.actions"
                 />
             </SlideUpTransition>

diff --git a/agdb_studio/src/components/base/modal/AgdbModal.vue b/agdb_studio/src/components/base/modal/AgdbModal.vue
@@ -27,33 +27,33 @@ watch(modalIsVisible, async () => {
             <header class="modal-header">
                 <h3>{{ modal.header }}</h3>
                 <button
-                    @click="closeModal"
                     class="button button-transparent"
                     data-testid="close-modal"
+                    @click="closeModal"
                 >
                     <ClCloseMd />
                 </button>
             </header>
             <form id="modal-form">
                 <AgdbContent
                     :content="modal.content"
-                    :contentKey="KEY_MODAL"
+                    :content-key="KEY_MODAL"
                     class="modal-body"
                 />
             </form>
             <footer class="modal-footer">
                 <button
                     v-for="button in buttons"
                     :key="button.text"
-                    @click.prevent="button.action"
-                    :class="button.className"
-                    :type="button.type ?? 'button'"
-                    :form="button.type === 'submit' ? 'modal-form' : undefined"
                     :ref="
                         (el) => {
                             if (button.type === 'submit') autofocusElement = el;
                         }
                     "
+                    :class="button.className"
+                    :type="button.type ?? 'button'"
+                    :form="button.type === 'submit' ? 'modal-form' : undefined"
+                    @click.prevent="button.action"
                 >
                     {{ button.text }}
                 </button>

diff --git a/agdb_studio/src/components/base/table/AgdbTable.vue b/agdb_studio/src/components/base/table/AgdbTable.vue
@@ -30,7 +30,7 @@ provide(INJECT_KEY_COLUMNS, columns);
 
 <template>
     <div class="agdb-table">
-        <AgdbTableHeader :tableKey="name" />
+        <AgdbTableHeader :table-key="name" />
         <template v-for="row in rows" :key="row[0]">
             <AgdbTableRow :row="row[1]" :columns="columns" />
         </template>

diff --git a/agdb_studio/src/components/base/table/AgdbTableRow.spec.ts b/agdb_studio/src/components/base/table/AgdbTableRow.spec.ts
@@ -1,13 +1,31 @@
 import { mount } from "@vue/test-utils";
 import AgdbTableRow from "./AgdbTableRow.vue";
 import { columnsMap, TABLE_NAME, tableConfig } from "@/tests/tableMocks";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import {
     INJECT_KEY_COLUMNS,
     INJECT_KEY_TABLE_NAME,
 } from "@/composables/table/constants";
 import { addTable } from "@/composables/table/tableConfig";
 
+const { fetchDbUsers, isDbRoleType } = vi.hoisted(() => {
+    return {
+        fetchDbUsers: vi.fn().mockResolvedValue({ data: [] }),
+        isDbRoleType: vi.fn().mockReturnValue(true),
+    };
+});
+
+vi.mock("@/composables/db/dbUsersStore", () => {
+    return {
+        useDbUsersStore: () => {
+            return {
+                fetchDbUsers,
+                isDbRoleType,
+            };
+        },
+    };
+});
+
 describe("TableRow", () => {
     addTable({
         name: TABLE_NAME,

diff --git a/agdb_studio/src/components/base/table/AgdbTableRow.vue b/agdb_studio/src/components/base/table/AgdbTableRow.vue
@@ -59,8 +59,8 @@ const toggleExpandRow = (): void => {
             </div>
             <div v-if="rowDetailsComponent">
                 <button
-                    @click="toggleExpandRow"
                     class="button button-transparent expand-row"
+                    @click="toggleExpandRow"
                 >
                     <AkChevronDownSmall v-if="!rowExpanded" />
                     <AkChevronUpSmall v-else />

diff --git a/agdb_studio/src/components/db/DbAddForm.vue b/agdb_studio/src/components/db/DbAddForm.vue
@@ -33,10 +33,10 @@ const add = (event: Event) => {
 <template>
     <div class="db-add-form">
         <h2>Add Database</h2>
-        <form @submit="add" id="db-add-form">
+        <form id="db-add-form" @submit="add">
             <input
-                type="text"
                 v-model="name"
+                type="text"
                 placeholder="Name"
                 name="db-name"
             />

diff --git a/agdb_studio/src/components/db/DbDetails.spec.ts b/agdb_studio/src/components/db/DbDetails.spec.ts
@@ -12,7 +12,7 @@ const {
     handleUsernameClick,
 } = vi.hoisted(() => {
     return {
-        fetchDbUsers: vi.fn(),
+        fetchDbUsers: vi.fn().mockResolvedValue({ data: [] }),
         isDbRoleType: vi.fn().mockReturnValue(true),
         handleRemoveUser: vi.fn(),
         handleAddUser: vi.fn(),

diff --git a/agdb_studio/src/components/db/DbDetails.vue b/agdb_studio/src/components/db/DbDetails.vue
@@ -9,6 +9,7 @@ const props = defineProps({
     row: {
         type: Object as PropType<TRow>,
         required: false,
+        default: undefined,
     },
 });
 
@@ -58,10 +59,10 @@ onMounted(() => {
             <li v-for="user in users" :key="user.username" class="user-item">
                 <span
                     class="username"
-                    @click="() => handleUsernameClick(user.username, user.role)"
                     :class="{
                         clickable: !isOwner(user.username) && canEditUsers,
                     }"
+                    @click="() => handleUsernameClick(user.username, user.role)"
                     >{{ user.username }}</span
                 >
                 <span class="role">
@@ -70,8 +71,8 @@ onMounted(() => {
                 <button
                     v-if="user.username !== dbParams.owner && canEditUsers"
                     class="button button-transparent remove-button"
-                    @click="handleRemoveUser(user.username)"
                     title="Remove user"
+                    @click="handleRemoveUser(user.username)"
                 >
                     <ClCloseMd class="remove-icon" />
                 </button>

diff --git a/agdb_studio/src/components/header/UserDropdown.spec.ts b/agdb_studio/src/components/header/UserDropdown.spec.ts
@@ -7,6 +7,7 @@ vi.mock("@/composables/user/account", () => {
     return {
         useAccount: () => ({
             username: "testUser",
+            admin: { value: false },
         }),
     };
 });

diff --git a/agdb_studio/src/components/header/UserDropdown.vue b/agdb_studio/src/components/header/UserDropdown.vue
@@ -9,13 +9,13 @@ const { username } = useAccount();
 
 <template>
     <AgdbDropdown>
-        <template v-slot:trigger>
+        <template #trigger>
             <div class="user-dropdown-trigger button">
                 <ClUser02 />
                 <span>{{ username }}</span>
             </div>
         </template>
-        <template v-slot:content>
+        <template #content>
             <UserMenu />
         </template>
     </AgdbDropdown>

diff --git a/agdb_studio/src/components/header/UserMenu.spec.ts b/agdb_studio/src/components/header/UserMenu.spec.ts
@@ -24,6 +24,7 @@ vi.mock("@/composables/user/account", () => {
     return {
         useAccount: () => ({
             username: "testUser",
+            admin: { value: false },
         }),
     };
 });