🥅(frontend) improve add member form error handling

- translate known errors, including already existing
group error, and directly display the other ones
- add component tests
- update translations

Closes issue #293

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 
 - 📈(monitoring) configure sentry monitoring #378
 - 🥅(frontend) improve api error handling #355
+- 🥅(frontend) improve add & update group forms error handling #387
 
 ### Changed
 

src/frontend/apps/desk/src/features/teams/team-management/components/CardCreateTeam.tsx

@@ -14,6 +14,7 @@ import { InputTeamName } from './InputTeamName';
 export const CardCreateTeam = () => {
   const { t } = useTranslation();
   const router = useRouter();
+
   const {
     mutate: createTeam,
     isError,
@@ -24,6 +25,7 @@ export const CardCreateTeam = () => {
       router.push(`/teams/${team.id}`);
     },
   });
+
   const [teamName, setTeamName] = useState('');
   const { colorsTokens } = useCunninghamTheme();
 

src/frontend/apps/desk/src/features/teams/team-management/components/InputTeamName.tsx

@@ -1,7 +1,9 @@
 import { Input, Loader } from '@openfun/cunningham-react';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { APIError } from '@/api';
+import { parseAPIError } from '@/api/parseAPIError';
 import { Box, TextErrors } from '@/components';
 
 interface InputTeamNameProps {
@@ -21,14 +23,53 @@ export const InputTeamName = ({
   label,
   setTeamName,
 }: InputTeamNameProps) => {
+  const { t } = useTranslation();
   const [isInputError, setIsInputError] = useState(isError);
 
+  const getCauses = (error: APIError): string[] => {
+    const handledCauses: string[] = [];
+    const unhandledCauses = parseAPIError({
+      error,
+      errorParams: {
+        slug: {
+          causes: ['Team with this Slug already exists.'],
+          handleError: () => {
+            handledCauses.push(
+              t(
+                'This name is already used for another group. Please enter another one.',
+              ),
+            );
+          },
+        },
+      },
+      serverErrorParams: {
+        defaultMessage: t(
+          'Your request cannot be processed because the server is experiencing an error. If the problem ' +
+            'persists, please contact our support to resolve the issue: suiteterritoriale@anct.gouv.fr',
+        ),
+      },
+    });
+
+    let causes: string[] = [];
+
+    if (handledCauses?.length) {
+      causes = [...handledCauses];
+    }
+    if (unhandledCauses?.length) {
+      causes = [...causes, ...unhandledCauses];
+    }
+
+    return causes;
+  };
+
   useEffect(() => {
     if (isError) {
       setIsInputError(true);
     }
   }, [isError]);
 
+  const causes = error ? getCauses(error) : undefined;
+
   return (
     <>
       <Input
@@ -42,7 +83,7 @@ export const InputTeamName = ({
         }}
         state={isInputError ? 'error' : 'default'}
       />
-      {isError && error && <TextErrors causes={error.cause} />}
+      {isError && causes && <TextErrors causes={causes} />}
       {isPending && (
         <Box $align="center">
           <Loader />

src/frontend/apps/desk/src/features/teams/team-management/components/__tests__/CardCreateTeam.test.tsx

@@ -0,0 +1,149 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import React from 'react';
+
+import { AppWrapper } from '@/tests/utils';
+
+import { CardCreateTeam } from '../CardCreateTeam';
+
+const mockPush = jest.fn();
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+describe('CardCreateTeam', () => {
+  const renderCardCreateTeam = () =>
+    render(<CardCreateTeam />, { wrapper: AppWrapper });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('renders all the elements', () => {
+    renderCardCreateTeam();
+
+    expect(screen.getByLabelText('Create new team card')).toBeInTheDocument();
+    expect(screen.getByText('Create a new group')).toBeInTheDocument();
+    expect(screen.getByLabelText('Team name')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Create the team')).toBeInTheDocument();
+  });
+
+  it('handles input for team name and enables submit button', async () => {
+    const user = userEvent.setup();
+    renderCardCreateTeam();
+
+    const teamNameInput = screen.getByLabelText('Team name');
+    const createButton = screen.getByText('Create the team');
+
+    expect(createButton).toBeDisabled();
+
+    await user.type(teamNameInput, 'New Team');
+    expect(createButton).toBeEnabled();
+  });
+
+  it('creates a team successfully and redirects', async () => {
+    fetchMock.post('end:teams/', {
+      id: '270328ea-c2c0-4f74-a449-5cdc976dcdb6',
+      name: 'New Team',
+    });
+
+    const user = userEvent.setup();
+    renderCardCreateTeam();
+
+    const teamNameInput = screen.getByLabelText('Team name');
+    const createButton = screen.getByText('Create the team');
+
+    await user.type(teamNameInput, 'New Team');
+    await user.click(createButton);
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(
+        '/teams/270328ea-c2c0-4f74-a449-5cdc976dcdb6',
+      );
+    });
+
+    expect(fetchMock.calls()).toHaveLength(1);
+    expect(fetchMock.lastCall()?.[0]).toContain('/teams/');
+    expect(fetchMock.lastCall()?.[1]?.body).toEqual(
+      JSON.stringify({ name: 'New Team' }),
+    );
+  });
+
+  it('displays an error message when team name already exists', async () => {
+    fetchMock.post('end:teams/', {
+      body: {
+        cause: ['Team with this Slug already exists.'],
+      },
+      status: 400,
+    });
+
+    const user = userEvent.setup();
+    renderCardCreateTeam();
+
+    const teamNameInput = screen.getByLabelText('Team name');
+    const createButton = screen.getByText('Create the team');
+
+    await user.type(teamNameInput, 'Existing Team');
+    await user.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/This name is already used for another group/i),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('handles server error gracefully', async () => {
+    fetchMock.post('end:/teams/', {
+      body: {},
+      status: 500,
+    });
+
+    const user = userEvent.setup();
+    renderCardCreateTeam();
+
+    const teamNameInput = screen.getByLabelText('Team name');
+    const createButton = screen.getByText('Create the team');
+
+    await user.type(teamNameInput, 'Server Error Team');
+    await user.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          /Your request cannot be processed because the server is experiencing an error/i,
+        ),
+      ).toBeInTheDocument();
+    });
+
+    expect(fetchMock.calls()).toHaveLength(1);
+    expect(fetchMock.lastCall()?.[0]).toContain('/teams/');
+    expect(fetchMock.lastCall()?.[1]?.body).toEqual(
+      JSON.stringify({ name: 'Server Error Team' }),
+    );
+  });
+
+  it('disables create button when API request is pending', async () => {
+    // Never resolves
+    fetchMock.post('end:teams/', new Promise(() => {}));
+
+    const user = userEvent.setup();
+    renderCardCreateTeam();
+
+    const teamNameInput = screen.getByLabelText('Team name');
+    const createButton = screen.getByText('Create the team');
+
+    await user.type(teamNameInput, 'Pending Team');
+    await user.click(createButton);
+
+    expect(createButton).toBeDisabled();
+  });
+});

src/frontend/apps/desk/src/i18n/translations.json

@@ -147,6 +147,7 @@
       "This domain name is deactivated. No new mailboxes can be created.": "Ce nom de domaine est désactivé. Aucune nouvelle boîte mail ne peut être créée.",
       "This email prefix is already used.": "Ce préfixe d'email est déjà utilisé.",
       "This mail domain is already used. Please, choose another one.": "Ce domaine de messagerie est déjà utilisé. Veuillez en choisir un autre.",
+      "This name is already used for another group. Please enter another one.": "Un autre groupe utilise déjà ce nom. Veuillez en saisir un autre.",
       "This procedure is to be used in the following case: you have reported to the website \n            manager an accessibility defect which prevents you from accessing content or one of the \n            portal's services and you have not obtained a satisfactory response.": "Cette procédure est à utiliser dans le cas suivant : vous avez signalé au responsable du site internet un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante.",
       "This site does not display a cookie consent banner, why?": "Ce site n'affiche pas de bannière de consentement des cookies, pourquoi?",
       "This site places a small text file (a \"cookie\") on your computer when you visit it.": "Ce site place un petit fichier texte (un « cookie ») sur votre ordinateur lorsque vous le visitez.",

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

@@ -108,7 +108,9 @@ test.describe('Teams Create', () => {
     await page.getByRole('button', { name: 'Create the team' }).click();
 
     await expect(
-      page.getByText('Team with this Slug already exists.'),
+      page.getByText(
+        'This name is already used for another group. Please enter another one.',
+      ),
     ).toBeVisible();
   });