✨(frontend) display full name if available

We can get the full name from the OIDC, so we should
display it if available.

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 - 📝Contributing.md #352
 - 🌐(frontend) add localization to editor #268
 - ✨Public and restricted doc editable #357
+- ✨(frontend) Add full name if available #380
 
 ## Fixed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -21,6 +21,7 @@ test.describe('Doc Header', () => {
           role: 'owner',
           user: {
             email: 'super@owner.com',
+            full_name: 'Super Owner',
           },
         },
         {
@@ -65,7 +66,7 @@ test.describe('Doc Header', () => {
       card.getByText('Created at 09/01/2021, 11:00 AM'),
     ).toBeVisible();
     await expect(
-      card.getByText('Owners: super@owner.com / super2@owner.com'),
+      card.getByText('Owners: Super Owner / super2@owner.com'),
     ).toBeVisible();
     await expect(card.getByText('Your role: Owner')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -25,6 +25,7 @@ test.describe('Document list members', () => {
             user: {
               id: `fc092149-cafa-4ffa-a29d-e4b18af751-${pageId}-${i}`,
               email: `impress@impress.world-page-${pageId}-${i}`,
+              full_name: `Impress World Page ${pageId}-${i}`,
             },
             team: '',
             role: 'editor',
@@ -58,9 +59,11 @@ test.describe('Document list members', () => {
     await waitForElementCount(list.locator('li'), 21, 10000);
 
     expect(await list.locator('li').count()).toBeGreaterThan(20);
+    await expect(list.getByText(`Impress World Page 1-16`)).toBeVisible();
     await expect(
       list.getByText(`impress@impress.world-page-1-16`),
     ).toBeVisible();
+    await expect(list.getByText(`Impress World Page 2-15`)).toBeVisible();
     await expect(
       list.getByText(`impress@impress.world-page-2-15`),
     ).toBeVisible();

src/frontend/apps/impress/src/core/auth/api/types.ts

@@ -8,4 +8,6 @@
 export interface User {
   id: string;
   email: string;
+  full_name: string;
+  short_name: string;
 }

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -104,7 +104,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
                   )
                   .map((access, index, accesses) => (
                     <Fragment key={`access-${index}`}>
-                      {access.user.email}{' '}
+                      {access.user.full_name || access.user.email}{' '}
                       {index < accesses.length - 1 ? ' / ' : ''}
                     </Fragment>
                   ))}

src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx

@@ -84,9 +84,10 @@ export const MemberItem = ({
           $css={`flex: ${isSmallMobile ? '100%' : '70%'};`}
         >
           <IconBG iconName="account_circle" $size="2rem" />
-          <Text $justify="center" $css="flex:1;">
-            {access.user.email}
-          </Text>
+          <Box $justify="center" $css="flex:1;">
+            {access.user.full_name && <Text>{access.user.full_name}</Text>}
+            <Text>{access.user.email}</Text>
+          </Box>
           <Box
             $direction="row"
             $gap="1rem"

src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts

@@ -213,6 +213,8 @@ export class ApiPlugin implements WorkboxPlugin {
           user: {
             id: 'dummy-id',
             email: 'dummy-email',
+            full_name: 'dummy-full-name',
+            short_name: 'dummy-short-name',
           },
           abilities: {
             destroy: false,