fix(core): display user name dynamically (#4248)

apps/core/src/adapters/cloud/ui.tsx

@@ -6,6 +6,8 @@ import type {
 import { initEmptyPage } from '@toeverything/infra/blocksuite';
 import { lazy, useCallback } from 'react';
 
+import type { OnLoadEditor } from '../../components/page-detail-editor';
+import { useCurrentUser } from '../../hooks/affine/use-current-user';
 import { useIsWorkspaceOwner } from '../../hooks/affine/use-is-workspace-owner';
 import { useWorkspace } from '../../hooks/use-workspace';
 import {
@@ -32,12 +34,28 @@ export const UI = {
     if (!page) {
       throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
     }
+    // this should be safe because we are under cloud workspace adapter
+    const currentUser = useCurrentUser();
+    const onLoad = useCallback<OnLoadEditor>(
+      (...args) => {
+        const dispose = onLoadEditor(...args);
+        workspace.blockSuiteWorkspace.awarenessStore.awareness.setLocalStateField(
+          'user',
+          {
+            name: currentUser.name,
+          }
+        );
+        return dispose;
+      },
+      [currentUser, workspace, onLoadEditor]
+    );
+
     return (
       <>
         <PageDetailEditor
           pageId={currentPageId}
           onInit={useCallback(async page => initEmptyPage(page), [])}
-          onLoad={onLoadEditor}
+          onLoad={onLoad}
           workspace={workspace.blockSuiteWorkspace}
         />
       </>

apps/core/src/components/page-detail-editor.tsx

@@ -35,12 +35,14 @@ import * as styles from './page-detail-editor.css';
 import { pluginContainer } from './page-detail-editor.css';
 import { TrashButtonGroup } from './pure/trash-button-group';
 
+export type OnLoadEditor = (page: Page, editor: EditorContainer) => () => void;
+
 export interface PageDetailEditorProps {
   isPublic?: boolean;
   workspace: Workspace;
   pageId: string;
   onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
-  onLoad?: (page: Page, editor: EditorContainer) => () => void;
+  onLoad?: OnLoadEditor;
 }
 
 const EditorWrapper = memo(function EditorWrapper({

apps/core/src/pages/workspace/detail-page.tsx

@@ -16,7 +16,6 @@ import {
   getCurrentStore,
 } from '@toeverything/infra/atom';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { getSession } from 'next-auth/react';
 import { type ReactElement, useCallback } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
 import { redirect } from 'react-router-dom';
@@ -139,11 +138,6 @@ export const loader: LoaderFunction = async args => {
   } else {
     return redirect('/404');
   }
-  const session = await getSession();
-  const name = session?.user.name;
-  currentWorkspace.awarenessStore.awareness.setLocalStateField('user', {
-    name: name ?? 'Anonymous User',
-  });
   return null;
 };
 

tests/affine-cloud/e2e/collaboration.spec.ts

@@ -71,7 +71,10 @@ test.describe('collaboration', () => {
     }
   });
 
-  test('can collaborate with other user', async ({ page, browser }) => {
+  test('can collaborate with other user and name should display when editing', async ({
+    page,
+    browser,
+  }) => {
     await page.reload();
     await waitForEditorLoad(page);
     await createLocalWorkspace(
@@ -103,6 +106,36 @@ test.describe('collaboration', () => {
     {
       const title = getBlockSuiteEditorTitle(page2);
       expect(await title.innerText()).toBe('TEST TITLE');
+      const typingPromise = Promise.all([
+        page.keyboard.press('Enter', { delay: 50 }),
+        page.keyboard.type('TEST CONTENT', { delay: 50 }),
+      ]);
+      // username should be visible when editing
+      await expect(page2.getByText(user.name)).toBeVisible();
+      await typingPromise;
+    }
+
+    // change username
+    await clickSideBarSettingButton(page);
+    await clickUserInfoCard(page);
+    const input = page.getByTestId('user-name-input');
+    await input.clear();
+    await input.type('TEST USER', {
+      delay: 50,
+    });
+    await page.getByTestId('save-user-name').click({
+      delay: 50,
+    });
+    await page.keyboard.press('Escape', {
+      delay: 50,
+    });
+    const title = getBlockSuiteEditorTitle(page);
+    await title.focus();
+
+    {
+      await expect(page2.getByText('TEST USER')).toBeVisible({
+        timeout: 2000,
+      });
     }
   });