✨(frontend) add modal to delete a member

Add modal to delete a member.

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

@@ -86,15 +86,18 @@ export const addNewMember = async (
   page: Page,
   index: number,
   role: 'Admin' | 'Owner' | 'Member',
-  fillText: string = 'test',
+  fillText: string = 'user',
 ) => {
   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/);
+
+  await page.getByLabel('Open the document options').click();
+  await page.getByRole('button', { name: 'Add members' }).click();
+
+  const inputSearch = page.getByLabel(/Find a member to add to the document/);
 
   // Select a new user
   await inputSearch.fill(fillText);
@@ -102,23 +105,18 @@ export const addNewMember = async (
   // Intercept response
   const responseSearchUser = await responsePromiseSearchUser;
   const users = (await responseSearchUser.json()).results as {
-    name: string;
+    email: string;
   }[];
 
   // Choose user
-  await page.getByRole('option', { name: users[index].name }).click();
+  await page.getByRole('option', { name: users[index].email }).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(page.getByText(`User added to the document.`)).toBeVisible();
 
-  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;
+  return users[index].email;
 };

src/frontend/apps/e2e/__tests__/app-impress/pad-member-delete.spec.ts

@@ -0,0 +1,199 @@
+import { expect, test } from '@playwright/test';
+
+import { addNewMember, createPad, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Members Delete', () => {
+  test('it cannot delete himself when it is the last owner', async ({
+    page,
+    browserName,
+  }) => {
+    await createPad(page, 'member-delete-1', browserName, 1);
+
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Manage members' }).click();
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    const cells = table.getByRole('row').nth(1).getByRole('cell');
+    await expect(cells.nth(0)).toHaveText(
+      new RegExp(`user@${browserName}.e2e`, 'i'),
+    );
+    await cells.nth(2).getByLabel('Member options').click();
+    await page.getByLabel('Open the modal to delete this member').click();
+
+    await expect(
+      page.getByText(
+        'You are the last owner, you cannot be removed from your document.',
+      ),
+    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Validate' })).toBeDisabled();
+  });
+
+  test('it deletes himself when it is not the last owner', async ({
+    page,
+    browserName,
+  }) => {
+    await createPad(page, 'member-delete-2', browserName, 1);
+
+    await addNewMember(page, 0, 'Owner');
+
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Manage members' }).click();
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    // find row where regexp match the name
+    const cells = table
+      .getByRole('row')
+      .filter({ hasText: new RegExp(`user@${browserName}.e2e`, 'i') })
+      .getByRole('cell');
+    await cells.nth(2).getByLabel('Member options').click();
+    await page.getByLabel('Open the modal to delete this member').click();
+
+    await page.getByRole('button', { name: 'Validate' }).click();
+    await expect(
+      page.getByText(`The member has been removed from the document`),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: `Create a new document` }),
+    ).toBeVisible();
+  });
+
+  test('it cannot delete owner member', async ({ page, browserName }) => {
+    await createPad(page, 'member-delete-3', browserName, 1);
+
+    const username = await addNewMember(page, 0, 'Owner');
+
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Manage members' }).click();
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    // find row where regexp match the name
+    const cells = table
+      .getByRole('row')
+      .filter({ hasText: username })
+      .getByRole('cell');
+    await cells.getByLabel('Member options').click();
+    await page.getByLabel('Open the modal to delete this member').click();
+
+    await expect(
+      page.getByText(`You cannot remove other owner.`),
+    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Validate' })).toBeDisabled();
+  });
+
+  test('it deletes admin member', async ({ page, browserName }) => {
+    await createPad(page, 'member-delete-4', browserName, 1);
+
+    const username = await addNewMember(page, 0, 'Admin');
+
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Manage members' }).click();
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    // find row where regexp match the name
+    const cells = table
+      .getByRole('row')
+      .filter({ hasText: username })
+      .getByRole('cell');
+    await cells.getByLabel('Member options').click();
+    await page.getByLabel('Open the modal to delete this member').click();
+
+    await page.getByRole('button', { name: 'Validate' }).click();
+    await expect(
+      page.getByText(`The member has been removed from the document`),
+    ).toBeVisible();
+    await expect(table.getByText(username)).toBeHidden();
+  });
+
+  test('it cannot delete owner member when admin', async ({
+    page,
+    browserName,
+  }) => {
+    await createPad(page, 'member-delete-5', browserName, 1);
+
+    const username = await addNewMember(page, 0, 'Owner');
+
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Manage members' }).click();
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    // find row where regexp match the name
+    const myCells = table
+      .getByRole('row')
+      .filter({ hasText: new RegExp(`user@${browserName}.e2e`, 'i') })
+      .getByRole('cell');
+    await myCells.getByLabel('Member options').click();
+
+    // Change role to Admin
+    await page.getByText('Update role').click();
+    const radioGroup = page.getByLabel('Radio buttons to update the roles');
+    await radioGroup.getByRole('radio', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    const cells = table
+      .getByRole('row')
+      .filter({ hasText: username })
+      .getByRole('cell');
+    await expect(cells.getByLabel('Member options')).toBeHidden();
+  });
+
+  test('it deletes admin member when admin', async ({ page, browserName }) => {
+    await createPad(page, 'member-delete-6', browserName, 1);
+
+    // To not be the only owner
+    await addNewMember(page, 0, 'Owner');
+
+    const username = await addNewMember(page, 1, 'Admin');
+
+    await expect(
+      page.getByText(`User added to the document.`).last(),
+    ).toBeHidden({
+      timeout: 5000,
+    });
+
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Manage members' }).click();
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    // find row where regexp match the name
+    const myCells = table
+      .getByRole('row')
+      .filter({ hasText: new RegExp(`user@${browserName}.e2e`, 'i') })
+      .getByRole('cell');
+    await myCells.getByLabel('Member options').click();
+
+    // Change role to Admin
+    await page.getByText('Update role').click();
+    const radioGroup = page.getByLabel('Radio buttons to update the roles');
+    await radioGroup.getByRole('radio', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    await expect(page.getByText(`The role has been updated`)).toBeVisible();
+    await expect(page.getByText(`The role has been updated`)).toBeHidden({
+      timeout: 5000,
+    });
+
+    const cells = table
+      .getByRole('row')
+      .filter({ hasText: new RegExp(username, 'i') })
+      .getByRole('cell');
+    await cells.nth(2).getByLabel('Member options').click();
+    await page.getByLabel('Open the modal to delete this member').click();
+
+    await page.getByRole('button', { name: 'Validate' }).click();
+    await expect(
+      page.getByText(`The member has been removed from the document`),
+    ).toBeVisible();
+    await expect(table.getByText(username)).toBeHidden();
+  });
+});