From cb198a9d04d2a4f2c14cf706a556ed75a935e706 Mon Sep 17 00:00:00 2001
From: Quentin BEY <quentin.bey@mail.numerique.gouv.fr>
Date: Fri, 9 May 2025 10:10:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9(frontend)=20restore=20user=20name?=
 =?UTF-8?q?=20/=20org=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This was added previously and while the organization is not displayed
elsewhere it's better to keep the information displayed somewhere.
---
 .../apps/desk/src/core/auth/UserInfo.tsx      | 20 +++++++++++++++++++
 .../apps/desk/src/features/header/Header.tsx  |  2 ++
 .../left-panel/components/LeftPanel.tsx       |  2 ++
 .../apps/e2e/__tests__/app-desk/siret.spec.ts | 13 ++++++------
 4 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 src/frontend/apps/desk/src/core/auth/UserInfo.tsx

diff --git a/src/frontend/apps/desk/src/core/auth/UserInfo.tsx b/src/frontend/apps/desk/src/core/auth/UserInfo.tsx
new file mode 100644
index 0000000..b7270cb
--- /dev/null
+++ b/src/frontend/apps/desk/src/core/auth/UserInfo.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { useAuthStore } from '@/core/auth';
+
+export const UserInfo = () => {
+  const { t } = useTranslation();
+  const { authenticated, userData } = useAuthStore();
+  const userName = userData?.name || userData?.email || t('No Username');
+  const organizationName = userData?.organization?.name || '';
+
+  return authenticated ? (
+    <Box $direction="column" $align="left">
+      <Text $theme="primary">
+        {userName}
+        {organizationName ? ` | ${organizationName}` : ''}
+      </Text>
+    </Box>
+  ) : null;
+};
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 5032ebc..c987ae2 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { default as IconRegie } from '@/assets/logo-regie.svg?url';
 import { Icon, StyledLink, Text } from '@/components/';
 import { ButtonLogin } from '@/core/auth';
+import { UserInfo } from '@/core/auth/UserInfo';
 import { useCunninghamTheme } from '@/cunningham';
 import { LanguagePicker } from '@/features/language';
 import { useLeftPanelStore } from '@/features/left-panel';
@@ -107,6 +108,7 @@ export const Header = () => {
             flexDirection: 'row',
           }}
         >
+          <UserInfo />
           <ButtonLogin />
           <LanguagePicker />
           <LaGaufre />
diff --git a/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx
index 0fe6285..672d346 100644
--- a/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/desk/src/features/left-panel/components/LeftPanel.tsx
@@ -4,6 +4,7 @@ import { createGlobalStyle } from 'styled-components';
 
 import { SeparatedSection } from '@/components/separators';
 import { ButtonLogin } from '@/core';
+import { UserInfo } from '@/core/auth/UserInfo';
 import { LanguagePicker } from '@/features/language';
 
 import { useLeftPanelStore } from '../stores';
@@ -99,6 +100,7 @@ export const LeftPanel = () => {
                   gap: 'var(--c--theme--spacings--sm)',
                 }}
               >
+                <UserInfo />
                 <ButtonLogin />
                 <LanguagePicker />
               </div>
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts
index 590cb48..57e4f88 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/siret.spec.ts
@@ -19,12 +19,11 @@ test.describe('OIDC interop with SIRET', () => {
   });
 });
 
-test.describe('When a commune, display commune name below user name', () => {
-  test('it checks the name is added below the user name', async ({ page }) => {
-    const logout = page.getByRole('button', {
-      name: 'Marie Delamairie',
-    });
-
-    await expect(logout.getByText('Merlaut')).toBeVisible();
+test.describe('When a commune, display commune name with user name', () => {
+  test('it checks the name is added with the user name', async ({ page }) => {
+    // check the name is displayed along with the organization name : name | org name
+    await expect(
+      page.getByRole('banner').getByText('Marie Delamairie | Merlaut'),
+    ).toBeVisible();
   });
 });