🛂(app-desk) add TeamActions component

TeamActions is a component that control the actions
that a member can performed on the team.
It contains a dropdown menu that contains the actions:
- Edit Team
- Remove Team

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

@@ -46,3 +46,44 @@ export const createTeam = async (
 
   return randomTeams;
 };
+
+export const addNewMember = async (
+  page: Page,
+  index: number,
+  role: 'Admin' | 'Owner' | 'Member',
+  fillText: string = 'test',
+) => {
+  const responsePromiseSearchUser = page.waitForResponse(
+    (response) =>
+      response.url().includes(`/users/?q=${fillText}`) &&
+      response.status() === 200,
+  );
+  await page.getByLabel('Add members to the team').click();
+  const inputSearch = page.getByLabel(/Find a member to add to the team/);
+
+  // Select a new user
+  await inputSearch.fill(fillText);
+
+  // Intercept response
+  const responseSearchUser = await responsePromiseSearchUser;
+  const users = (await responseSearchUser.json()).results as {
+    name: string;
+  }[];
+
+  // Choose user
+  await page.getByRole('option', { name: users[index].name }).click();
+
+  // Choose a role
+  await page.getByRole('radio', { name: role }).click();
+
+  await page.getByRole('button', { name: 'Validate' }).click();
+
+  const table = page.getByLabel('List members card').getByRole('table');
+
+  await expect(table.getByText(users[index].name)).toBeVisible();
+  await expect(
+    page.getByText(`Member ${users[index].name} added to the team`),
+  ).toBeVisible();
+
+  return users[index].name;
+};

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

@@ -44,7 +44,8 @@ test.describe('Team', () => {
   test('it updates the team name', async ({ page, browserName }) => {
     await createTeam(page, 'team-update-name', browserName, 1);
 
-    await page.getByLabel(`Open the team options modal`).click();
+    await page.getByLabel(`Open the team options`).click();
+    await page.getByRole('button', { name: `Update the team` }).click();
 
     const teamName = randomName('new-team-update-name', browserName, 1)[0];
     await page.getByText('New name...', { exact: true }).fill(teamName);

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

@@ -0,0 +1,78 @@
+import { expect, test } from '@playwright/test';
+
+import { addNewMember, createTeam, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Teams Delete', () => {
+  test('it deletes the team when we are owner', async ({
+    page,
+    browserName,
+  }) => {
+    await createTeam(page, 'team-update-name', browserName, 1);
+
+    await page.getByLabel(`Open the team options`).click();
+    await page.getByRole('button', { name: `Delete the team` }).click();
+    await page.getByRole('button', { name: `Confirm deletion` }).click();
+    await expect(page.getByText(`The team has been removed.`)).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: `Create a new team` }),
+    ).toBeVisible();
+  });
+
+  test('it cannot delete the team when we are admin', async ({
+    page,
+    browserName,
+  }) => {
+    await createTeam(page, 'team-update-name', browserName, 1);
+
+    await addNewMember(page, 0, 'Owner');
+
+    // Change role to Admin
+    const table = page.getByLabel('List members card').getByRole('table');
+    const myCells = table
+      .getByRole('row')
+      .filter({ hasText: new RegExp(`E2E ${browserName}`, 'i') })
+      .getByRole('cell');
+    await myCells.nth(4).getByLabel('Member options').click();
+
+    await page.getByText('Update the role').click();
+    const radioGroup = page.getByLabel('Radio buttons to update the roles');
+    await radioGroup.getByRole('radio', { name: 'Admin' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    // Delete the team button should be hidden
+    await page.getByLabel(`Open the team options`).click();
+    await expect(
+      page.getByRole('button', { name: `Delete the team` }),
+    ).toBeHidden();
+  });
+
+  test('it cannot delete the team when we are member', async ({
+    page,
+    browserName,
+  }) => {
+    await createTeam(page, 'team-update-name', browserName, 1);
+
+    await addNewMember(page, 0, 'Owner');
+
+    // Change role to Admin
+    const table = page.getByLabel('List members card').getByRole('table');
+    const myCells = table
+      .getByRole('row')
+      .filter({ hasText: new RegExp(`E2E ${browserName}`, 'i') })
+      .getByRole('cell');
+    await myCells.nth(4).getByLabel('Member options').click();
+
+    await page.getByText('Update the role').click();
+    const radioGroup = page.getByLabel('Radio buttons to update the roles');
+    await radioGroup.getByRole('radio', { name: 'Member' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    // Option button should be hidden
+    await expect(page.getByLabel(`Open the team options`)).toBeHidden();
+  });
+});