✨(app-desk) integrate modal to update roles

Integrate the design and functionality
for updating a member's role.
Managed use cases:
 - when the user is an admin
 - when the user is the last owner
 - when the user want to update other orner

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

@@ -41,11 +41,11 @@ test.describe('Team', () => {
     ).toBeVisible();
   });
 
-  test('checks the admin members is displayed correctly', async ({
+  test('checks the owner member is displayed correctly', async ({
     page,
     browserName,
   }) => {
-    await createTeam(page, 'team-admin', browserName, 1);
+    await createTeam(page, 'team-owner', browserName, 1);
 
     const table = page.getByLabel('List members card').getByRole('table');
 
@@ -62,4 +62,37 @@ test.describe('Team', () => {
     await expect(cells.nth(2)).toHaveText(`user@${browserName}.e2e`);
     await expect(cells.nth(3)).toHaveText('owner');
   });
+
+  test('try to update the owner role but cannot because it is the last owner', async ({
+    page,
+    browserName,
+  }) => {
+    await createTeam(page, 'team-owner-role', browserName, 1);
+
+    const table = page.getByLabel('List members card').getByRole('table');
+
+    const cells = table.getByRole('row').nth(1).getByRole('cell');
+    await expect(cells.nth(1)).toHaveText(
+      new RegExp(`E2E ${browserName}`, 'i'),
+    );
+    await cells.nth(4).getByLabel('Member options').click();
+    await page.getByText('Update the role').click();
+
+    await expect(
+      page.getByText('You are the last owner, you cannot change your role.'),
+    ).toBeVisible();
+
+    const radioGroup = page.getByLabel('Radio buttons to update the roles');
+
+    const radios = await radioGroup.getByRole('radio').all();
+    for (const radio of radios) {
+      await expect(radio).toBeDisabled();
+    }
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Validate',
+      }),
+    ).toBeDisabled();
+  });
 });