fix: workspace name should change in the setting panel (#3039)

apps/web/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -4,7 +4,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DoneIcon } from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { type FC, useCallback, useState } from 'react';
+import { type FC, useCallback, useRef, useState } from 'react';
 
 import type { AffineOfficialWorkspace } from '../../../shared';
 import { Upload } from '../../pure/file-upload';
@@ -37,12 +37,17 @@ export const ProfilePanel: FC<{
   const [, update] = useBlockSuiteWorkspaceAvatarUrl(
     workspace.blockSuiteWorkspace
   );
+
+  const [prevName, setPrevName] = useState(
+    workspace.blockSuiteWorkspace.meta.name
+  );
   const [name, setName] = useBlockSuiteWorkspaceName(
     workspace.blockSuiteWorkspace
   );
 
   const [input, setInput] = useState<string>(name);
 
+  const inputRef = useRef<HTMLInputElement>(null);
   const handleUpdateWorkspaceName = useCallback(
     (name: string) => {
       setName(name);
@@ -51,6 +56,13 @@ export const ProfilePanel: FC<{
     [setName, t]
   );
 
+  if (prevName !== name) {
+    setPrevName(name);
+    if (inputRef.current) {
+      inputRef.current.value = name;
+    }
+  }
+
   return (
     <div className={style.profileWrapper}>
       <div className={style.avatarWrapper}>
@@ -69,6 +81,7 @@ export const ProfilePanel: FC<{
       </div>
       <div className={style.profileHandlerWrapper}>
         <Input
+          ref={inputRef}
           width={280}
           height={32}
           defaultValue={input}

apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -128,7 +128,11 @@ const WorkspaceListItem = ({
     >
       <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
       <span className="setting-name">{workspaceName}</span>
-      {isCurrent ? <div className="current-label">Current</div> : null}
+      {isCurrent ? (
+        <div className="current-label" data-testid="current-workspace-label">
+          Current
+        </div>
+      ) : null}
     </div>
   );
 };

tests/parallels/settings.spec.ts

@@ -9,6 +9,7 @@ import {
   openSettingModal,
   openShortcutsPanel,
 } from '../libs/setting';
+import { createWorkspace } from '../libs/workspace';
 
 test('Open settings modal', async ({ page }) => {
   await openHomePage(page);
@@ -69,3 +70,21 @@ test('Open about panel', async ({ page }) => {
   const title = await page.getByTestId('about-title');
   await expect(title).toBeVisible();
 });
+
+test('Different workspace should have different name in the setting panel', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await createWorkspace({ name: 'New Workspace 2' }, page);
+  await createWorkspace({ name: 'New Workspace 3' }, page);
+  await openSettingModal(page);
+  await page.getByTestId('current-workspace-label').click();
+  expect(await page.getByTestId('workspace-name-input').inputValue()).toBe(
+    'New Workspace 3'
+  );
+  await page.getByText('New Workspace 2').click();
+  expect(await page.getByTestId('workspace-name-input').inputValue()).toBe(
+    'New Workspace 2'
+  );
+});