feat(KAN-47): redesign teams and membership management

# Conflicts: # resources/js/locales/en.ts
2026-09-16 09:51:26 +02:00
parent 0a2807a28c
commit 1d9df6897d
9 changed files with 1134 additions and 336 deletions
@@ -0,0 +1,200 @@
+import assert from 'node:assert/strict';
+import process from 'node:process';
+const { chromium } = await import(
+    process.env.PLAYWRIGHT_MODULE ?? 'playwright'
+);
+const browser = await chromium.launch({ channel: 'chrome', headless: true });
+const context = await browser.newContext({ reducedMotion: 'reduce' });
+const page = await context.newPage();
+page.setDefaultTimeout(10000);
+const errors = [];
+page.on('pageerror', (error) => errors.push(error.message));
+const base = 'http://127.0.0.1:4197';
+const result = (value) =>
+    context.addCookies([{ name: 'teams_result', value, url: base }]);
+const visit = async (query = '') => {
+    await result('success');
+    await page.goto(base + '/teams?reset' + query);
+    await page.getByRole('heading', { name: 'Teams', exact: true }).waitFor();
+};
+const button = (name) => page.getByRole('button', { name, exact: true });
+const dialog = () => page.getByRole('dialog');
+const state = (value) =>
+    dialog()
+        .locator('[data-form-state="' + value + '"]')
+        .waitFor({ state: 'visible' });
+const noOverflow = async () =>
+    assert.equal(
+        await page.evaluate(
+            () => document.documentElement.scrollWidth <= innerWidth,
+        ),
+        true,
+    );
+const save = async (label) => {
+    const request = page.waitForRequest((r) =>
+        ['POST', 'PATCH'].includes(r.method()),
+    );
+    await dialog().getByRole('button', { name: label, exact: true }).click();
+    return (await request).postDataJSON();
+};
+try {
+    for (const width of [1440, 390, 320]) {
+        await page.setViewportSize({ width, height: 900 });
+        for (const theme of ['light', 'dark']) {
+            await page.emulateMedia({ colorScheme: theme });
+            await visit();
+            await noOverflow();
+            await page.screenshot({
+                path: '/private/tmp/kan47-' + width + '-' + theme + '.png',
+                fullPage: true,
+            });
+            const trigger = button('Manage members of Platform team');
+            await trigger.focus();
+            await page.keyboard.press('Enter');
+            await dialog().waitFor();
+            await page.keyboard.press('Tab');
+            assert.equal(
+                await dialog().evaluate((el) =>
+                    el.contains(document.activeElement),
+                ),
+                true,
+            );
+            await noOverflow();
+            await page.screenshot({
+                path:
+                    '/private/tmp/kan47-members-' +
+                    width +
+                    '-' +
+                    theme +
+                    '.png',
+                fullPage: true,
+            });
+            await page.keyboard.press('Escape');
+            await dialog().waitFor({ state: 'hidden' });
+            assert.equal(
+                await trigger.evaluate((el) => document.activeElement === el),
+                true,
+            );
+        }
+    }
+    await visit('&manager');
+    assert.equal(await button('Create team').count(), 0);
+    await visit('&empty');
+    await page.getByText('No teams to manage', { exact: true }).waitFor();
+    await visit();
+    await page.getByLabel('Search teams', { exact: true }).fill('missing');
+    await page.getByText('No matching teams', { exact: true }).waitFor();
+    await button('Clear search').click();
+    await button('Create team').click();
+    await page.getByLabel('Team name', { exact: true }).fill('New team');
+    await result('validation');
+    assert.deepEqual(await save('Create team'), { name: 'New team' });
+    await state('validation');
+    assert.equal(
+        await page.getByLabel('Team name', { exact: true }).inputValue(),
+        'New team',
+    );
+    await page
+        .getByText('This team name is already taken.', { exact: true })
+        .waitFor();
+    await result('success');
+    await save('Create team');
+    await dialog().waitFor({ state: 'hidden' });
+    await page
+        .getByRole('heading', { name: 'New team', exact: true })
+        .waitFor();
+
+    await button('Manage members of Platform team').click();
+    const person = (name) =>
+        dialog().getByRole('checkbox', { name: new RegExp(name) });
+    await page.getByLabel('Find people').fill('sam@');
+    await person('Sam Taylor').check();
+    await page.getByLabel('Find people').fill('');
+    assert.equal(await person('Alex Morgan').isChecked(), true);
+    let dismissed = false;
+    page.once('dialog', async (d) => {
+        dismissed = true;
+        await d.dismiss();
+    });
+    await dialog().getByRole('button', { name: 'Cancel', exact: true }).click();
+    assert.equal(dismissed, true);
+    assert.equal(await dialog().isVisible(), true);
+    await result('validation');
+    assert.deepEqual(await save('Save members'), { user_ids: [1, 2] });
+    await state('validation');
+    await page
+        .getByText('This user is unavailable.', { exact: true })
+        .waitFor();
+    assert.equal(await person('Sam Taylor').isChecked(), true);
+    await page.route('**/teams/1/members', (route) => route.abort('failed'));
+    await save('Save members');
+    await state('network');
+    await page.unroute('**/teams/1/members');
+    await result('server');
+    await save('Save members');
+    await state('server');
+    await result('success');
+    await dialog()
+        .getByRole('button', { name: 'Try again', exact: true })
+        .click();
+    await dialog().waitFor({ state: 'hidden' });
+    await button('Manage members of Platform team').click();
+    await person('Alex Morgan').uncheck();
+    await person('Sam Taylor').uncheck();
+    assert.deepEqual(await save('Save members'), { user_ids: [] });
+    await dialog().waitFor({ state: 'hidden' });
+
+    await button('Manage permissions for Platform team').click();
+    assert.equal(
+        await dialog()
+            .getByRole('button', { name: 'Save permissions', exact: true })
+            .isDisabled(),
+        true,
+    );
+    await page.getByLabel('User', { exact: true }).selectOption('2');
+    assert.equal(await person('Team invite').isChecked(), true);
+    await person('Team manage').check();
+    page.once('dialog', (d) => d.dismiss());
+    await page.getByLabel('User', { exact: true }).selectOption('3');
+    assert.equal(
+        await page.getByLabel('User', { exact: true }).inputValue(),
+        '2',
+    );
+    await result('validation');
+    assert.deepEqual(await save('Save permissions'), {
+        permissions: ['team:invite', 'team:manage'],
+    });
+    await state('validation');
+    await page
+        .getByText('This permission is unavailable.', { exact: true })
+        .waitFor();
+    await result('forbidden');
+    await save('Save permissions');
+    await state('server');
+    await page
+        .getByText('You no longer have permission', { exact: true })
+        .waitFor();
+    assert.equal(
+        await dialog()
+            .getByRole('button', { name: 'Try again', exact: true })
+            .count(),
+        0,
+    );
+    assert.equal(await person('Team manage').isChecked(), true);
+    await result('success');
+    await save('Save permissions');
+    await dialog().waitFor({ state: 'hidden' });
+    await button('Manage permissions for Platform team').click();
+    await page.getByLabel('User', { exact: true }).selectOption('2');
+    assert.equal(await person('Team manage').isChecked(), true);
+    await person('Team invite').uncheck();
+    await person('Team manage').uncheck();
+    assert.deepEqual(await save('Save permissions'), { permissions: [] });
+    await dialog().waitFor({ state: 'hidden' });
+    assert.deepEqual(errors, []);
+    console.log(
+        'Teams browser checks passed: creation, membership, permissions, empty selections, validation, network/server/403, draft protection, focus, keyboard, themes and mobile.',
+    );
+} finally {
+    await browser.close();
+}
@@ -0,0 +1,15 @@
+import { createApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import '../../resources/css/app.css';
+import Teams from '../../resources/js/pages/teams/Index.vue';
+import { createAppearance } from '../../resources/js/composables/useAppearance';
+import { createLocalization } from '../../resources/js/lib/localization';
+createInertiaApp({
+    resolve: () => Teams,
+    setup: ({ el, App, props, plugin }) =>
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(createLocalization())
+            .use(createAppearance())
+            .mount(el),
+});
@@ -0,0 +1,220 @@
+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/teams-fixture',
+    plugins: [vue(), ...(serve ? [tailwind()] : [])],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: serve
+        ? { host: '127.0.0.1', port: 4197, strictPort: true, hmr: false }
+        : { middlewareMode: true, hmr: false, watch: null },
+    appType: 'custom',
+});
+const users = [
+    { id: 1, name: 'Alex Morgan', email: 'alex@example.test', avatar: null },
+    { id: 2, name: 'Sam Taylor', email: 'sam@example.test', avatar: null },
+    {
+        id: 3,
+        name: 'Jordan Longname With Several Names',
+        email: 'jordan.long.email.address@example.test',
+        avatar: null,
+    },
+];
+function initial() {
+    return {
+        canCreateTeams: true,
+        users,
+        status: null,
+        teams: [
+            { id: 1, name: 'Platform team', user_ids: [1], users: [users[0]] },
+            { id: 2, name: 'Delivery team', user_ids: [], users: [] },
+        ],
+        teamPermissions: { 1: { 2: ['team:invite'] } },
+        permissionOptions: ['invite', 'manage', 'admin'].map((name) => ({
+            value: 'team:' + name,
+            label: 'Team ' + name,
+        })),
+    };
+}
+const makePage = (extra = {}) => ({
+    component: 'Teams',
+    url: '/teams',
+    version: null,
+    clearHistory: false,
+    encryptHistory: false,
+    props: {
+        name: 'KanbanGit',
+        errors: {},
+        sidebarOpen: true,
+        appearance: 'system',
+        auth: {
+            user: users[0],
+            permissions: {
+                globalAdmin: false,
+                projectCreate: false,
+                canManageTeams: true,
+            },
+        },
+        navigation: { project: null },
+        ...initial(),
+        ...extra,
+    },
+});
+if (serve) {
+    let data = initial();
+    server.middlewares.use(async (request, response, next) => {
+        if (!request.url.startsWith('/teams')) {
+            return next();
+        }
+        const url = new URL(request.url, 'http://localhost');
+        if (url.searchParams.has('reset')) {
+            data = initial();
+        }
+        if (url.searchParams.has('manager')) {
+            data.canCreateTeams = false;
+        }
+        if (url.searchParams.has('empty')) {
+            data.teams = [];
+        }
+        let errors = {};
+        if (request.method !== 'GET') {
+            const result =
+                request.headers.cookie?.match(/teams_result=(\w+)/)?.[1] ??
+                'success';
+            if (['server', 'forbidden'].includes(result)) {
+                response.statusCode = result === 'forbidden' ? 403 : 503;
+                response.end('Simulated failure');
+                return;
+            }
+            let body = '';
+            for await (const chunk of request) {
+                body += chunk;
+            }
+            const submitted = JSON.parse(body || '{}');
+            if (result === 'validation') {
+                errors = url.pathname.endsWith('/members')
+                    ? { 'user_ids.0': 'This user is unavailable.' }
+                    : url.pathname.includes('/permissions/')
+                      ? { 'permissions.0': 'This permission is unavailable.' }
+                      : { name: 'This team name is already taken.' };
+            } else if (request.method === 'POST') {
+                data.teams.push({
+                    id: 3,
+                    name: submitted.name,
+                    user_ids: [],
+                    users: [],
+                });
+            } else if (url.pathname.endsWith('/members')) {
+                const team = data.teams.find(
+                    (team) => team.id === Number(url.pathname.split('/')[2]),
+                );
+                team.user_ids = submitted.user_ids;
+                team.users = users.filter((user) =>
+                    team.user_ids.includes(user.id),
+                );
+            } else {
+                const [, , teamId, , , userId] = url.pathname.split('/');
+                data.teamPermissions[teamId] ??= {};
+                data.teamPermissions[teamId][userId] = submitted.permissions;
+            }
+            if (Object.keys(errors).length === 0) {
+                data.status = 'Saved';
+            }
+        }
+        const page = makePage({ ...data, errors });
+        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 escaped = JSON.stringify(page)
+            .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/teams-preview.mjs"></script></body></html>',
+            ),
+        );
+    });
+    await server.listen();
+    console.log('Teams fixture ready.');
+} else {
+    try {
+        const { createLocalization } = await server.ssrLoadModule(
+            '/resources/js/lib/localization.ts',
+        );
+        const { createAppearance } = await server.ssrLoadModule(
+            '/resources/js/composables/useAppearance.ts',
+        );
+        const { en } = await server.ssrLoadModule(
+            '/resources/js/locales/en.ts',
+        );
+        const component = (
+            await server.ssrLoadModule('/resources/js/pages/teams/Index.vue')
+        ).default;
+        const render = async (extra = {}, locale = createLocalization()) =>
+            (
+                await createInertiaApp({
+                    page: makePage(extra),
+                    resolve: () => component,
+                    render: renderToString,
+                    setup: ({ App, props, plugin }) =>
+                        createSSRApp({ render: () => h(App, props) })
+                            .use(plugin)
+                            .use(locale)
+                            .use(createAppearance()),
+                })
+            ).body;
+        const html = await render();
+        assert.match(html, /Platform team/);
+        assert.match(html, /1 member/);
+        assert.match(html, /0 members/);
+        assert.match(html, /Manage members of Platform team/);
+        assert.match(html, /Manage permissions for Platform team/);
+        assert.match(html, /No members yet/);
+        assert.match(html, /Create team/);
+        assert.doesNotMatch(html, /Global admin|Hold Cmd|<select/);
+        assert.doesNotMatch(
+            await render({ canCreateTeams: false }),
+            /Create team/,
+        );
+        assert.match(await render({ teams: [] }), /No teams to manage/);
+        const translated = await render(
+            {},
+            createLocalization(
+                { locale: 'de' },
+                {
+                    de: {
+                        ...en,
+                        'navigation.teams': 'Arbeitsgruppen',
+                        'teams.create': 'Team anlegen',
+                    },
+                },
+            ),
+        );
+        assert.match(translated, /Arbeitsgruppen/);
+        assert.match(translated, /Team anlegen/);
+        console.log('Teams presentation checks passed.');
+    } finally {
+        await server.close();
+    }
+}