✨(frontend) allow group members filtering

- add title above the list of members
- allow members filtering  with an input
- updates translations and related tests
- add global useDebounce hook to prevent
spamming API with useless requests on
inputs sending requests on value change
- add component and e2e tests

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

@@ -16,6 +16,9 @@ test.describe('Team', () => {
       await createTeam(page, 'team-top-box', browserName, 1)
     ).shift();
 
+    await expect(page.getByText('Group members')).toBeVisible();
+    await expect(page.getByLabel('Filter member list')).toBeVisible();
+
     await expect(
       page.getByRole('heading', {
         name: teamName,
@@ -54,4 +57,19 @@ test.describe('Team', () => {
     await expect(page.getByText('The team has been updated.')).toBeVisible();
     await expect(page.getByText(`Group details`)).toBeVisible();
   });
+
+  test('sorts group members by search term', async ({
+    page,
+    browserName,
+    request,
+  }) => {
+    await createTeam(page, 'team-to-sort', browserName, 1);
+
+    await page.getByLabel(`Open the team options`).click();
+    await page.getByLabel('Filter member list').fill('term-to-search');
+
+    const response = await request.get('teams/?page=1&q=term-to-search');
+
+    expect(response.ok()).toBeTruthy();
+  });
 });