From f0c609ef0b26e26aaf44ff5d8ba7cff7ad017eee Mon Sep 17 00:00:00 2001
From: Quentin BEY <quentin.bey@mail.numerique.gouv.fr>
Date: Tue, 6 May 2025 16:17:40 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20create=20team=20?=
 =?UTF-8?q?button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button to create a new team was not displayed properly anymore.
---
 .../teams-panel/__tests__/PanelTeams.test.tsx |  5 ++++
 .../teams-panel/components/PanelActions.tsx   | 23 +++++++++----------
 .../apps/e2e/__tests__/app-desk/common.ts     |  2 +-
 .../__tests__/app-desk/teams-create.spec.ts   |  4 ++--
 .../__tests__/app-desk/teams-panel.spec.ts    |  6 ++---
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx b/src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx
index 5b74e05..3379ff5 100644
--- a/src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx
@@ -18,6 +18,11 @@ jest.mock('next/router', () => ({
   }),
 }));
 
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useRouter: () => jest.fn(),
+}));
+
 describe('PanelTeams', () => {
   afterEach(() => {
     fetchMock.restore();
diff --git a/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx b/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
index dea3ad2..2aa34a3 100644
--- a/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
@@ -1,9 +1,10 @@
+import { useRouter as useNavigate } from 'next/navigation';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import IconAdd from '@/assets/icons/icon-add.svg';
 import IconSort from '@/assets/icons/icon-sort.svg';
-import { Box, BoxButton, StyledLink } from '@/components';
+import { Box, BoxButton } from '@/components';
 import { useAuthStore } from '@/core/auth';
 import { useCunninghamTheme } from '@/cunningham';
 import { TeamsOrdering } from '@/features/teams/team-management/api';
@@ -15,6 +16,7 @@ export const PanelActions = () => {
   const { changeOrdering, ordering } = useTeamStore();
   const { colorsTokens } = useCunninghamTheme();
   const { userData } = useAuthStore();
+  const navigate = useNavigate();
 
   const can_create = userData?.abilities?.teams.can_create ?? false;
 
@@ -48,17 +50,14 @@ export const PanelActions = () => {
         <IconSort width={30} height={30} aria-hidden="true" />
       </BoxButton>
       {can_create && (
-        <StyledLink href="/teams/create">
-          <BoxButton
-            as="span"
-            $margin={{ all: 'auto' }}
-            aria-label={t('Add a team')}
-            $color={colorsTokens()['primary-600']}
-            tabIndex={-1}
-          >
-            <IconAdd width={27} height={27} aria-hidden="true" />
-          </BoxButton>
-        </StyledLink>
+        <BoxButton
+          $margin={{ all: 'auto' }}
+          aria-label={t('Add a team')}
+          $color={colorsTokens()['primary-600']}
+          onClick={() => void navigate.push('/teams/create')}
+        >
+          <IconAdd width={27} height={27} aria-hidden="true" />
+        </BoxButton>
       )}
     </Box>
   );
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/common.ts b/src/frontend/apps/e2e/__tests__/app-desk/common.ts
index cb841d1..f99a426 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/common.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/common.ts
@@ -48,7 +48,7 @@ export const createTeam = async (
   const randomTeams = randomName(teamName, browserName, length);
 
   for (let i = 0; i < randomTeams.length; i++) {
-    await panel.getByRole('link', { name: 'Add a team' }).click();
+    await panel.getByRole('button', { name: 'Add a team' }).click();
     await page.getByText('Team name').fill(randomTeams[i]);
     await expect(buttonCreate).toBeEnabled();
     await buttonCreate.click();
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
index b60645f..c27975b 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
@@ -63,7 +63,7 @@ test.describe('Teams Create', () => {
   }) => {
     const panel = page.getByLabel('Teams panel').first();
 
-    await panel.getByRole('link', { name: 'Add a team' }).click();
+    await panel.getByRole('button', { name: 'Add a team' }).click();
 
     const teamName = `My routing team ${browserName}-${Math.floor(Math.random() * 1000)}`;
     await page.getByText('Team name').fill(teamName);
@@ -72,7 +72,7 @@ test.describe('Teams Create', () => {
     const elTeam = page.getByRole('heading', { name: teamName });
     await expect(elTeam).toBeVisible();
 
-    await panel.getByRole('link', { name: 'Add a team' }).click();
+    await panel.getByRole('button', { name: 'Add a team' }).click();
     await expect(elTeam).toBeHidden();
 
     await panel.locator('li').getByText(teamName).click();
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
index 0274970..63266bd 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts
@@ -20,7 +20,7 @@ test.describe('Teams Panel', () => {
     ).toBeVisible();
 
     await expect(
-      panel.getByRole('link', {
+      panel.getByRole('button', {
         name: 'Add a team',
       }),
     ).toBeVisible();
@@ -67,11 +67,11 @@ test.describe('Teams Panel', () => {
     const selectedTeam = panel.locator('li').nth(0);
     await expect(selectedTeam).toHaveCSS(
       'background-color',
-      'rgb(202, 202, 251)',
+      'rgb(133, 133, 246)',
     );
 
     const hoverTeam = panel.locator('li').nth(1);
     await hoverTeam.hover();
-    await expect(hoverTeam).toHaveCSS('background-color', 'rgb(227, 227, 253)');
+    await expect(hoverTeam).toHaveCSS('background-color', 'rgb(202, 202, 251)');
   });
 });