💄(app-desk) integrate the create team design

- Integrate the create team design based from the
mockup
- Manage the different states of the create team

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

@@ -0,0 +1,61 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Teams', () => {
+  test('checks all the create team elements are visible', async ({ page }) => {
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'Create a new team',
+    });
+    await buttonCreateHomepage.click();
+    await expect(buttonCreateHomepage).toBeHidden();
+
+    const card = page.getByLabel('Create new team card').first();
+
+    await expect(card.getByLabel('Team name')).toBeVisible();
+
+    await expect(card.getByLabel('icon group')).toBeVisible();
+
+    await expect(
+      card.getByRole('heading', {
+        name: 'Name the team',
+        level: 3,
+      }),
+    ).toBeVisible();
+
+    await expect(
+      card.getByRole('button', {
+        name: 'Create the team',
+      }),
+    ).toBeVisible();
+
+    await expect(
+      card.getByRole('button', {
+        name: 'Cancel',
+      }),
+    ).toBeVisible();
+  });
+
+  test('checks the cancel button interaction', async ({ page }) => {
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'Create a new team',
+    });
+    await buttonCreateHomepage.click();
+    await expect(buttonCreateHomepage).toBeHidden();
+
+    const card = page.getByLabel('Create new team card').first();
+
+    await card
+      .getByRole('button', {
+        name: 'Cancel',
+      })
+      .click();
+
+    await expect(buttonCreateHomepage).toBeVisible();
+  });
+});

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

@@ -10,7 +10,7 @@ test.beforeEach(async ({ page, browserName }) => {
 });
 
 test.describe.configure({ mode: 'serial' });
-test.describe('Teams', () => {
+test.describe('Teams Panel', () => {
   test('001 - checks all the elements are visible', async ({ page }) => {
     const panel = page.getByLabel('Teams panel').first();
 
@@ -35,10 +35,10 @@ test.describe('Teams', () => {
     ).toBeVisible();
   });
 
-  test('002 - check sort button', async ({ page, browserName }) => {
+  test('002 - checks the sort button', async ({ page, browserName }) => {
     const panel = page.getByLabel('Teams panel').first();
 
-    await page.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('button', { name: 'Add a team' }).click();
 
     const randomTeams = Array.from({ length: 3 }, () => {
       return `team-sort-${browserName}-${Math.floor(Math.random() * 1000)}`;
@@ -46,7 +46,7 @@ test.describe('Teams', () => {
 
     for (let i = 0; i < 3; i++) {
       await page.getByText('Team name').fill(`${randomTeams[i]}-${i}`);
-      await page.getByRole('button', { name: 'Create a team' }).click();
+      await page.getByRole('button', { name: 'Create the team' }).click();
       await expect(
         panel.locator('li').nth(0).getByText(`${randomTeams[i]}-${i}`),
       ).toBeVisible();
@@ -65,18 +65,18 @@ test.describe('Teams', () => {
     }
   });
 
-  test('003 - check the infinite scrool', async ({ page, browserName }) => {
+  test('003 - checks the infinite scrool', async ({ page, browserName }) => {
     test.setTimeout(90000);
     const panel = page.getByLabel('Teams panel').first();
 
-    await page.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('button', { name: 'Add a team' }).click();
 
     const randomTeams = Array.from({ length: 40 }, () => {
       return `team-infinite-${browserName}-${Math.floor(Math.random() * 10000)}`;
     });
     for (let i = 0; i < 40; i++) {
       await page.getByText('Team name').fill(`${randomTeams[i]}-${i}`);
-      await page.getByRole('button', { name: 'Create Team' }).click();
+      await page.getByRole('button', { name: 'Create the team' }).click();
       await expect(
         panel.locator('li').getByText(`${randomTeams[i]}-${i}`),
       ).toBeVisible();