feat(KAN-49): rebuild user administration

2026-09-16 07:01:11 +00:00
parent 9faf02e2c4
commit 2acbdb4760
8 changed files with 1192 additions and 531 deletions
@@ -0,0 +1,25 @@
+<?php
+
+namespace Tests\Feature\Admin;
+
+use Symfony\Component\Process\Process;
+use Tests\TestCase;
+
+class UserManagementUiTest extends TestCase
+{
+    public function test_user_management_pages_render_responsive_actions_and_protected_forms(): void
+    {
+        $process = new Process(['node', 'tests/Fixtures/user-management.mjs'], base_path());
+        $process->setTimeout(60);
+        $process->run();
+
+        $this->assertTrue(
+            $process->isSuccessful(),
+            $process->getOutput().$process->getErrorOutput(),
+        );
+        $this->assertStringContainsString(
+            'User management rendering checks passed.',
+            $process->getOutput(),
+        );
+    }
+}
@@ -0,0 +1,21 @@
+import { createApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import { createAppearance } from '@/composables/useAppearance';
+import { createLocalization } from '@/lib/localization';
+import Create from '@/pages/admin/users/Create.vue';
+import Edit from '@/pages/admin/users/Edit.vue';
+import Index from '@/pages/admin/users/Index.vue';
+import '@/../css/app.css';
+
+const components = { Create, Edit, Index };
+
+createInertiaApp({
+    resolve: (name) => components[name],
+    setup({ el, App, props, plugin }) {
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(createLocalization())
+            .use(createAppearance())
+            .mount(el);
+    },
+});
@@ -0,0 +1,206 @@
+import assert from 'node:assert/strict';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import tailwind from '@tailwindcss/vite';
+import { createServer } from 'vite';
+import { createSSRApp, h } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import { createInertiaApp } from '@inertiajs/vue3';
+
+const serve = process.argv.includes('--serve');
+const server = await createServer({
+    configFile: false,
+    cacheDir: 'node_modules/.vite/user-management-fixture',
+    plugins: [vue(), ...(serve ? [tailwind()] : [])],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: serve
+        ? { host: '127.0.0.1', port: 4191, strictPort: true, hmr: false }
+        : { middlewareMode: true, hmr: false, watch: null },
+    appType: 'custom',
+});
+
+const admin = {
+    id: 1,
+    name: 'Alex Admin',
+    email: 'alex@example.test',
+    avatar: null,
+    avatar_color: '#10B981',
+    avatar_is_generated: true,
+    email_verified_at: null,
+    must_change_password_on_next_login: false,
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+};
+const member = {
+    ...admin,
+    id: 2,
+    name: 'Morgan Member',
+    email: 'morgan@example.test',
+    must_change_password_on_next_login: true,
+};
+const shared = {
+    name: 'KanbanGit',
+    errors: {},
+    sidebarOpen: true,
+    appearance: 'system',
+    auth: {
+        user: admin,
+        permissions: {
+            globalAdmin: true,
+            projectCreate: true,
+            canManageTeams: true,
+        },
+    },
+    navigation: { project: null },
+};
+const pages = {
+    index: {
+        component: 'Index',
+        url: '/admin/users',
+        props: {
+            ...shared,
+            directPermissions: {
+                1: ['global:admin', 'project:create'],
+                2: [],
+            },
+            permissionOptions: [
+                { value: 'global:admin', label: 'Global admin' },
+                { value: 'project:create', label: 'Create project' },
+            ],
+            users: [admin, member],
+            status: null,
+        },
+    },
+    create: {
+        component: 'Create',
+        url: '/admin/users/create',
+        props: shared,
+    },
+    edit: {
+        component: 'Edit',
+        url: '/admin/users/2/edit',
+        props: { ...shared, user: member },
+    },
+};
+
+function inertiaPage(page) {
+    return {
+        ...page,
+        version: null,
+        clearHistory: false,
+        encryptHistory: false,
+    };
+}
+
+async function render(path, page) {
+    const component = (await server.ssrLoadModule(path)).default;
+    const { createLocalization } = await server.ssrLoadModule(
+        '/resources/js/lib/localization.ts',
+    );
+    const { createAppearance } = await server.ssrLoadModule(
+        '/resources/js/composables/useAppearance.ts',
+    );
+
+    return (
+        await createInertiaApp({
+            page: inertiaPage(page),
+            resolve: () => component,
+            render: renderToString,
+            setup: ({ App, props, plugin }) =>
+                createSSRApp({ render: () => h(App, props) })
+                    .use(plugin)
+                    .use(createLocalization())
+                    .use(createAppearance()),
+        })
+    ).body;
+}
+
+if (serve) {
+    server.middlewares.use(async (request, response, next) => {
+        if (!request.url.startsWith('/admin/users')) {
+            return next();
+        }
+
+        const pathname = new URL(request.url, 'http://localhost').pathname;
+        const page = pathname.endsWith('/create')
+            ? pages.create
+            : pathname.endsWith('/edit')
+              ? pages.edit
+              : pages.index;
+        const completePage = inertiaPage(page);
+        response.setHeader('Vary', 'X-Inertia');
+
+        if (request.headers['x-inertia']) {
+            response.setHeader('X-Inertia', 'true');
+            response.setHeader('Content-Type', 'application/json');
+            response.end(JSON.stringify(completePage));
+            return;
+        }
+
+        const escaped = JSON.stringify(completePage)
+            .replaceAll('&', '&amp;')
+            .replaceAll('"', '&quot;')
+            .replaceAll('<', '&lt;');
+        response.setHeader('Content-Type', 'text/html');
+        response.end(
+            await server.transformIndexHtml(
+                request.url,
+                '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app" data-page="' +
+                    escaped +
+                    '"></div><script type="module" src="/tests/Fixtures/user-management-preview.mjs"></script></body></html>',
+            ),
+        );
+    });
+    await server.listen();
+    console.log('User management fixture ready.');
+} else {
+    try {
+        const indexHtml = await render(
+            '/resources/js/pages/admin/users/Index.vue',
+            pages.index,
+        );
+        assert.match(indexHtml, /Workspace administration/);
+        assert.match(indexHtml, /User management/);
+        assert.match(indexHtml, /Workspace users/);
+        assert.match(indexHtml, /Global administrators/);
+        assert.match(indexHtml, /Password changes pending/);
+        assert.equal(indexHtml.match(/data-managed-user/g)?.length, 2);
+        assert.match(indexHtml, /Alex Admin/);
+        assert.match(indexHtml, /Morgan Member/);
+        assert.match(indexHtml, /Manage access/);
+        assert.match(indexHtml, /Edit account details for Morgan Member/);
+        assert.match(indexHtml, /Password change required/);
+        assert.match(indexHtml, /No direct global permissions/);
+
+        const createHtml = await render(
+            '/resources/js/pages/admin/users/Create.vue',
+            pages.create,
+        );
+        assert.match(createHtml, /Create user/);
+        assert.match(createHtml, /Temporary password/);
+        assert.match(createHtml, /Confirm password/);
+        assert.match(createHtml, /Require a password change on next sign-in/);
+        assert.match(createHtml, /data-test="managed-user-submit"/);
+        assert.match(createHtml, /managed-user-password-confirmation-error/);
+
+        const editHtml = await render(
+            '/resources/js/pages/admin/users/Edit.vue',
+            pages.edit,
+        );
+        assert.match(editHtml, /Edit Morgan Member/);
+        assert.match(editHtml, /morgan@example\.test/);
+        assert.match(editHtml, /Leave both password fields empty/);
+        assert.match(editHtml, /Review changes/);
+        assert.match(editHtml, /value="Morgan Member"/);
+        assert.match(editHtml, /value="morgan@example\.test"/);
+
+        console.log('User management rendering checks passed.');
+    } finally {
+        await server.close();
+    }
+}