feat(KAN-19): add responsive permission-aware navigation

2026-09-11 14:16:43 +02:00
parent de6f4e5b2f
commit 4adda6e53b
28 changed files with 1547 additions and 428 deletions
@@ -0,0 +1,88 @@
+import { fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import tailwind from '@tailwindcss/vite';
+import { createServer } from 'vite';
+
+const server = await createServer({
+    configFile: false,
+    plugins: [vue(), tailwind()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: { host: '127.0.0.1', port: 4175, strictPort: true, hmr: false },
+    appType: 'custom',
+});
+
+server.middlewares.use(async (request, response, next) => {
+    const url = new URL(request.url, 'http://localhost');
+    if (
+        !/^\/(dashboard|projects|project-templates|teams|admin|settings)(\/|$)/.test(
+            url.pathname,
+        )
+    ) {
+        return next();
+    }
+    const reader =
+        request.headers.cookie?.includes('navigation_test_role=reader') ??
+        false;
+    const project = url.pathname.startsWith('/projects/7')
+        ? {
+              id: 7,
+              name: 'Engineering · Platform and developer experience',
+              key: 'ENG',
+              canManage: !reader,
+              canCreateTickets: !reader,
+          }
+        : null;
+    const page = {
+        component: 'NavigationPreview',
+        url: request.url,
+        version: null,
+        clearHistory: false,
+        encryptHistory: false,
+        props: {
+            name: 'KanbanGit',
+            sidebarOpen: !request.headers.cookie?.includes(
+                'sidebar_state=false',
+            ),
+            auth: {
+                permissions: {
+                    globalAdmin: !reader,
+                    projectCreate: !reader,
+                    canManageTeams: !reader,
+                },
+                user: {
+                    id: 1,
+                    name: 'Alex Morgan',
+                    email: 'alex@example.test',
+                    avatar: null,
+                },
+            },
+            navigation: { project },
+        },
+    };
+    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(page));
+        return;
+    }
+    const escapedPage = JSON.stringify(page)
+        .replaceAll('&', '&amp;')
+        .replaceAll('"', '&quot;')
+        .replaceAll('<', '&lt;');
+    const html =
+        '<!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="' +
+        escapedPage +
+        '"></div><script type="module" src="/tests/Fixtures/navigation-preview.mjs"></script></body></html>';
+    response.setHeader('Content-Type', 'text/html');
+    response.end(await server.transformIndexHtml(request.url, html));
+});
+
+await server.listen();
+console.log(
+    'Navigation fixture ready at http://127.0.0.1:4175/projects/7/board',
+);