✨(frontend) show names in mailbox table

- show a concatenation of first and last names for each row in mailbox table - update related e2e tests
numerique-gouv · Aug 8, 2024 · 7916f7d · 7916f7d
1 parent 45dbdd6
commit 7916f7d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx
@@ -1,3 +1,5 @@
+import { UUID } from 'crypto';
+
 import {
   Button,
   DataGrid,
@@ -17,7 +19,11 @@ import { MailDomain, MailDomainMailbox } from '../types';
 
 import { CreateMailboxForm } from './forms/CreateMailboxForm';
 
-export type ViewMailbox = { email: string; id: string };
+export type ViewMailbox = {
+  name: string;
+  email: string;
+  id: UUID;
+};
 
 // FIXME : ask Cunningham to export this type
 type SortModelItem = {
@@ -69,13 +75,15 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
     mailDomain && data?.results?.length
       ? data.results.map((mailbox: MailDomainMailbox) => ({
           email: `${mailbox.local_part}@${mailDomain.name}`,
+          name: `${mailbox.first_name} ${mailbox.last_name}`,
           id: mailbox.id,
         }))
       : [];
 
   useEffect(() => {
     setPagesCount(data?.count ? Math.ceil(data.count / pageSize) : 0);
   }, [data?.count, pageSize, setPagesCount]);
+
   return isLoading ? (
     <Box $align="center" $justify="center" $height="100%">
       <Loader />
@@ -88,19 +96,35 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
           closeModal={() => setIsCreateMailboxFormVisible(false)}
         />
       ) : null}
+
       <TopBanner
         name={mailDomain.name}
         setIsFormVisible={setIsCreateMailboxFormVisible}
-        abilities={mailDomain.abilities}
+        abilities={mailDomain?.abilities}
       />
+
       <Card
         $padding={{ bottom: 'small' }}
         $margin={{ all: 'big', top: 'none' }}
         $overflow="auto"
       >
         {error && <TextErrors causes={error.cause} />}
+
         <DataGrid
           columns={[
+            {
+              field: 'name',
+              headerName: t('Names'),
+              renderCell: ({ row }) => (
+                <Text
+                  $weight="bold"
+                  $theme="primary"
+                  $css="text-transform: capitalize;"
+                >
+                  {row.name}
+                </Text>
+              ),
+            },
             {
               field: 'email',
               headerName: t('Emails'),

diff --git a/src/frontend/apps/desk/src/features/mail-domains/types.tsx b/src/frontend/apps/desk/src/features/mail-domains/types.tsx
@@ -19,5 +19,7 @@ export interface MailDomain {
 export interface MailDomainMailbox {
   id: UUID;
   local_part: string;
+  first_name: string;
+  last_name: string;
   secondary_email: string;
 }
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/mail-domain.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/mail-domain.spec.ts
@@ -163,11 +163,15 @@ test.describe('Mail domain', () => {
       domainFr: {
         page1: Array.from({ length: 20 }, (_, i) => ({
           id: `456ac6ca-0402-4615-8005-69bc1efde${i}f`,
+          first_name: 'john',
+          last_name: 'doe',
           local_part: `local_part-${i}`,
           secondary_email: `secondary_email-${i}`,
         })),
         page2: Array.from({ length: 2 }, (_, i) => ({
           id: `456ac6ca-0402-4615-8005-69bc1efde${i}d`,
+          first_name: 'john',
+          last_name: 'doe',
           local_part: `local_part-${i}`,
           secondary_email: `secondary_email-${i}`,
         })),
@@ -235,6 +239,10 @@ test.describe('Mail domain', () => {
       page.getByRole('heading', { name: 'domain.fr' }),
     ).toBeVisible();
 
+    await expect(
+      page.getByRole('button', { name: /Names/ }).first(),
+    ).toBeVisible();
+
     await expect(
       page.getByRole('button', { name: /Emails/ }).first(),
     ).toBeVisible();
@@ -249,6 +257,12 @@ test.describe('Mail domain', () => {
       ),
     );
 
+    const table = page.locator('table');
+    await expect(table).toBeVisible();
+
+    const tdNames = await table.getByText('John Doe').all();
+    expect(tdNames.length).toEqual(20);
+
     await expect(
       page.locator('.c__pagination__list').getByRole('button', { name: '1' }),
     ).toBeVisible();