💄(teams) update team list page to match new UI

This is an attempt to quick fix the team page to match the new UI.

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

@@ -43,12 +43,21 @@ export const createTeam = async (
   length: number,
 ) => {
   const panel = page.getByLabel('Teams panel').first();
+  const buttonCreateHomepage = page.getByRole('button', {
+    name: 'Create a new team',
+  });
   const buttonCreate = page.getByRole('button', { name: 'Create the team' });
 
   const randomTeams = randomName(teamName, browserName, length);
 
   for (let i = 0; i < randomTeams.length; i++) {
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    if (i == 0) {
+      // for the first team, we need to click on the button in the homepage
+      await buttonCreateHomepage.click();
+    } else {
+      // for the other teams, we need to click on the button in the panel of the detail view
+      await panel.getByRole('button', { name: 'Add a team' }).click();
+    }
     await page.getByText('Team name').fill(randomTeams[i]);
     await expect(buttonCreate).toBeEnabled();
     await buttonCreate.click();

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

@@ -10,18 +10,14 @@ test.describe('Language', () => {
   });
 
   test('checks the language picker', async ({ page }) => {
-    await expect(
-      page.getByLabel('Teams panel', { exact: true }).getByText('Groups'),
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Teams' })).toBeVisible();
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('EN').click();
     await header.getByRole('option', { name: 'FR' }).click();
     await expect(header.getByRole('combobox').getByText('FR')).toBeVisible();
 
-    await expect(
-      page.getByLabel('Teams panel', { exact: true }).getByText('Groupes'),
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Équipes' })).toBeVisible();
   });
 
   test('checks lang attribute of html tag updates when user changes language', async ({

src/frontend/apps/e2e/__tests__/app-desk/oidc-identity-provider.spec.ts

@@ -22,7 +22,7 @@ test.describe('Login to people as Identity Provider', () => {
     await expect(page).toHaveURL('http://localhost:3000/', { timeout: 10000 });
 
     // check the user is logged in
-    await expect(page.getByText('Groups')).toBeVisible();
-    await expect(page.getByText('0 group to display.')).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Teams' })).toBeVisible();
+    await expect(page.getByText('No teams exist.')).toBeVisible();
   });
 });

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

@@ -61,9 +61,10 @@ test.describe('Teams Create', () => {
     page,
     browserName,
   }) => {
-    const panel = page.getByLabel('Teams panel').first();
-
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'Create a new team',
+    });
+    await buttonCreateHomepage.click();
 
     const teamName = `My routing team ${browserName}-${Math.floor(Math.random() * 1000)}`;
     await page.getByText('Team name').fill(teamName);
@@ -72,6 +73,7 @@ test.describe('Teams Create', () => {
     const elTeam = page.getByRole('heading', { name: teamName });
     await expect(elTeam).toBeVisible();
 
+    const panel = page.getByLabel('Teams panel').first();
     await panel.getByRole('button', { name: 'Add a team' }).click();
     await expect(elTeam).toBeHidden();
 
@@ -79,20 +81,6 @@ test.describe('Teams Create', () => {
     await expect(elTeam).toBeVisible();
   });
 
-  test('checks alias teams url with homepage', async ({ page }) => {
-    await expect(page).toHaveURL('/');
-
-    const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new team',
-    });
-
-    await expect(buttonCreateHomepage).toBeVisible();
-
-    await page.goto('/teams/');
-    await expect(buttonCreateHomepage).toBeVisible();
-    await expect(page).toHaveURL(/\/teams\//);
-  });
-
   test('checks 404 on teams/[id] page', async ({ page }) => {
     await page.goto('/teams/some-unknown-team');
     await expect(

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

@@ -9,55 +9,9 @@ test.beforeEach(async ({ page, browserName }) => {
 
 test.describe('Teams Panel', () => {
   test('checks all the elements are visible', async ({ page }) => {
-    const panel = page.getByLabel('Teams panel').first();
+    await expect(page.getByRole('heading', { name: 'Teams' })).toBeVisible();
 
-    await expect(panel.getByText('Groups')).toBeVisible();
-
-    await expect(
-      panel.getByRole('button', {
-        name: 'Sort the teams',
-      }),
-    ).toBeVisible();
-
-    await expect(
-      panel.getByRole('button', {
-        name: 'Add a team',
-      }),
-    ).toBeVisible();
-  });
-
-  test('checks the sort button', async ({ page }) => {
-    const responsePromiseSortDesc = page.waitForResponse(
-      (response) =>
-        response.url().includes('/teams/?ordering=-created_at') &&
-        response.status() === 200,
-    );
-
-    const responsePromiseSortAsc = page.waitForResponse(
-      (response) =>
-        response.url().includes('/teams/?ordering=created_at') &&
-        response.status() === 200,
-    );
-
-    const panel = page.getByLabel('Teams panel').first();
-
-    await panel
-      .getByRole('button', {
-        name: 'Sort the teams by creation date ascendent',
-      })
-      .click();
-
-    const responseSortAsc = await responsePromiseSortAsc;
-    expect(responseSortAsc.ok()).toBeTruthy();
-
-    await panel
-      .getByRole('button', {
-        name: 'Sort the teams by creation date descendent',
-      })
-      .click();
-
-    const responseSortDesc = await responsePromiseSortDesc;
-    expect(responseSortDesc.ok()).toBeTruthy();
+    await expect(page.getByTestId('button-new-team')).toBeVisible();
   });
 
   test('checks the hover and selected state', async ({ page, browserName }) => {