✨(app-desk) integrate member list design

Integrate the member list design in the team page
based on the mockup.

src/frontend/apps/e2e/__tests__/app-desk/common.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { Page, expect } from '@playwright/test';
 
 export const keyCloakSignIn = async (page: Page, browserName: string) => {
   const title = await page.locator('h1').first().textContent({
@@ -17,3 +17,29 @@ export const keyCloakSignIn = async (page: Page, browserName: string) => {
     await page.click('input[type="submit"]', { force: true });
   }
 };
+
+export const createTeam = async (
+  page: Page,
+  teamName: string,
+  browserName: string,
+  length: number,
+) => {
+  const panel = page.getByLabel('Teams panel').first();
+  const buttonCreate = page.getByRole('button', { name: 'Create the team' });
+
+  const randomTeams = Array.from({ length }, (_el, index) => {
+    return `${teamName}-${browserName}-${Math.floor(Math.random() * 10000)}-${index}`;
+  });
+
+  for (let i = 0; i < randomTeams.length; i++) {
+    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await page.getByText('Team name').fill(randomTeams[i]);
+    await expect(buttonCreate).toBeEnabled();
+    await buttonCreate.click();
+    await expect(
+      panel.locator('li').nth(0).getByText(randomTeams[i]),
+    ).toBeVisible();
+  }
+
+  return randomTeams;
+};

src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts

@@ -56,7 +56,8 @@ test.describe('Menu', () => {
       const buttonMenu = menu.getByLabel(`${name} button`);
       await buttonMenu.click();
 
-      // eslint-disable-next-line playwright/no-conditional-in-test
+      /* eslint-disable playwright/no-conditional-expect */
+      /* eslint-disable playwright/no-conditional-in-test */
       if (isDefault) {
         await expect(
           page.getByRole('button', {
@@ -73,6 +74,8 @@ test.describe('Menu', () => {
         const reg = new RegExp(name.toLowerCase());
         await expect(page).toHaveURL(reg);
       }
+      /* eslint-enable playwright/no-conditional-expect */
+      /* eslint-enable playwright/no-conditional-in-test */
     });
   }
 });

src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { keyCloakSignIn } from './common';
+import { createTeam, keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page, browserName }) => {
   await page.goto('/');
@@ -12,13 +12,9 @@ test.describe('Team', () => {
     page,
     browserName,
   }) => {
-    const panel = page.getByLabel('Teams panel').first();
-
-    await panel.getByRole('button', { name: 'Add a team' }).click();
-
-    const teamName = `My new team ${browserName}-${Math.floor(Math.random() * 1000)}`;
-    await page.getByText('Team name').fill(teamName);
-    await page.getByRole('button', { name: 'Create the team' }).click();
+    const teamName = (
+      await createTeam(page, 'team-top-box', browserName, 1)
+    ).shift();
 
     await expect(page.getByLabel('icon group')).toBeVisible();
     await expect(
@@ -44,4 +40,35 @@ test.describe('Team', () => {
       page.getByText(`Last update at ${todayFormated}`),
     ).toBeVisible();
   });
+
+  test('checks the datagrid members', async ({ page, browserName }) => {
+    await createTeam(page, 'team-admin', browserName, 1);
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    const thead = table.locator('thead');
+    await expect(thead.getByText(/Names/i)).toBeVisible();
+    await expect(thead.getByText(/Emails/i)).toBeVisible();
+    await expect(thead.getByText(/Roles/i)).toBeVisible();
+
+    const rows = table.getByRole('row');
+    expect(await rows.count()).toBe(21);
+
+    await expect(
+      rows.nth(1).getByRole('cell').nth(0).getByLabel('Member icon'),
+    ).toBeVisible();
+
+    const textCellName = await rows
+      .nth(1)
+      .getByRole('cell')
+      .nth(1)
+      .textContent();
+    expect(textCellName).toEqual(expect.any(String));
+    await expect(rows.nth(1).getByRole('cell').nth(2)).toContainText('@');
+    expect(
+      ['owner', 'member', 'admin'].includes(
+        (await rows.nth(1).getByRole('cell').nth(3).textContent()) as string,
+      ),
+    ).toBeTruthy();
+  });
 });

src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts

@@ -1,34 +1,8 @@
-import { Page, expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 import { waitForElementCount } from '../helpers';
 
-import { keyCloakSignIn } from './common';
-
-const createTeam = async (
-  page: Page,
-  teamName: string,
-  browserName: string,
-  length: number,
-) => {
-  const panel = page.getByLabel('Teams panel').first();
-  const buttonCreate = page.getByRole('button', { name: 'Create the team' });
-
-  const randomTeams = Array.from({ length }, (_el, index) => {
-    return `${teamName}-${browserName}-${Math.floor(Math.random() * 10000)}-${index}`;
-  });
-
-  for (let i = 0; i < randomTeams.length; i++) {
-    await panel.getByRole('button', { name: 'Add a team' }).click();
-    await page.getByText('Team name').fill(randomTeams[i]);
-    await expect(buttonCreate).toBeEnabled();
-    await buttonCreate.click();
-    await expect(
-      panel.locator('li').nth(0).getByText(randomTeams[i]),
-    ).toBeVisible();
-  }
-
-  return randomTeams;
-};
+import { createTeam, keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page, browserName }) => {
   await page.goto('/');