⚗️(frontend) show username on AccountDropDown

- show username instead of "My account"
numerique-gouv · Sep 19, 2024 · 49ce06e · 49ce06e
1 parent a7afa68
commit 49ce06e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to
 
 - ✨(domains) add endpoint to list and retrieve domain accesses @sdemagny #404
 - 🍱(dev) embark dimail-api as container by @mjeammet #366
+- ⚗️(frontend) show username on AccountDropDown #412
 
 ## [1.1.0] - 2024-09-10
 

diff --git a/secrets b/secrets
diff --git a/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx b/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx
@@ -7,32 +7,38 @@ import { useAuthStore } from '@/core/auth';
 
 export const AccountDropdown = () => {
   const { t } = useTranslation();
-  const { logout } = useAuthStore();
+  const { userData, logout } = useAuthStore();
 
+  const userName = userData?.name || t('No Username');
   return (
     <DropButton
-      aria-label={t('My account')}
+      aria-label={userName}
       button={
         <Box $flex $direction="row" $align="center">
-          <Text $theme="primary">{t('My account')}</Text>
+          <Text $theme="primary">{userName}</Text>
           <Text className="material-icons" $theme="primary" aria-hidden="true">
             arrow_drop_down
           </Text>
         </Box>
       }
     >
-      <Button
-        onClick={logout}
-        color="primary-text"
-        icon={
-          <span className="material-icons" aria-hidden="true">
-            logout
-          </span>
-        }
-        aria-label={t('Logout')}
-      >
-        <Text $weight="normal">{t('Logout')}</Text>
-      </Button>
+      <Box $css="display: flex; direction: column; gap: 0.5rem">
+        <Box>
+          <Button
+            onClick={logout}
+            key="logout"
+            color="primary-text"
+            icon={
+              <span className="material-icons" aria-hidden="true">
+                logout
+              </span>
+            }
+            aria-label={t('Logout')}
+          >
+            <Text $weight="normal">{t('Logout')}</Text>
+          </Button>
+        </Box>
+      </Box>
     </DropButton>
   );
 };
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
@@ -93,9 +93,9 @@
       "Member icon": "Icône de membre",
       "Member {{name}} added to the team": "Membre {{name}} ajouté au groupe",
       "More info?": "Plus d'infos ?",
-      "My account": "Mon compte",
       "Names": "Noms",
       "New name...": "Nouveau nom...",
+      "No Username": "Aucun nom d'utilisateur",
       "No domains exist.": "Aucun domaine existant.",
       "No mail box was created with this mail domain.": "Aucune boîte mail n'a été créée avec ce nom de domaine.",
       "Nothing exceptional, no special privileges related to a .gouv.fr.": "Rien d'exceptionnel, pas de privilèges spéciaux liés à un .gouv.fr.",

diff --git a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
@@ -37,13 +37,13 @@ test.describe('Header', () => {
     ).toBeVisible();
 
     await expect(header.getByRole('combobox').getByText('EN')).toBeVisible();
-    await expect(header.getByText('My account')).toBeVisible();
+    await expect(header.getByText('No Username')).toBeVisible();
   });
 
   test('checks logout button', async ({ page }) => {
     await page
       .getByRole('button', {
-        name: 'My account',
+        name: 'No Username',
       })
       .click();