fix: workspace storage settings issues (#3055)

.husky/pre-commit

@@ -10,6 +10,9 @@ yarn -T run build:infra
 # generate prisma client type
 yarn workspace @affine/server prisma generate
 
+# generate i18n
+yarn i18n-codegen gen
+
 # lint staged files
 yarn exec lint-staged
 

apps/electron/e2e/workspace.spec.ts

@@ -17,11 +17,13 @@ test('check workspace has a DB file', async ({ appInfo, workspace }) => {
   expect(await fs.exists(dbPath)).toBe(true);
 });
 
-test.skip('move workspace db file', async ({ page, appInfo, workspace }) => {
+test('move workspace db file', async ({ page, appInfo, workspace }) => {
   const w = await workspace.current();
-  const settingButton = page.getByTestId('slider-bar-workspace-setting-button');
-  // goto settings
-  await settingButton.click();
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await expect(page.getByTestId('setting-modal')).toBeVisible();
+
+  // goto workspace setting
+  await page.getByTestId('workspace-list-item').click();
 
   const tmpPath = path.join(appInfo.sessionData, w.id + '-tmp-dir');
 
@@ -42,21 +44,24 @@ test.skip('move workspace db file', async ({ page, appInfo, workspace }) => {
   expect(files.some(f => f.endsWith('.affine'))).toBe(true);
 });
 
-test.skip('export then add', async ({ page, appInfo, workspace }) => {
+test('export then add', async ({ page, appInfo, workspace }) => {
   const w = await workspace.current();
-  const settingButton = page.getByTestId('slider-bar-workspace-setting-button');
-  // goto settings
-  await settingButton.click();
+
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await expect(page.getByTestId('setting-modal')).toBeVisible();
 
   const originalId = w.id;
 
   const newWorkspaceName = 'new-test-name';
 
+  // goto workspace setting
+  await page.getByTestId('workspace-list-item').click();
+
   // change workspace name
   await page.getByTestId('workspace-name-input').fill(newWorkspaceName);
   await page.getByTestId('save-workspace-name').click();
   await page.waitForSelector('text="Update workspace name success"');
-  await page.click('[data-tab-key="export"]');
+  await page.waitForTimeout(500);
 
   const tmpPath = path.join(appInfo.sessionData, w.id + '-tmp.db');
 
@@ -73,10 +78,11 @@ test.skip('export then add', async ({ page, appInfo, workspace }) => {
 
   expect(await fs.exists(tmpPath)).toBe(true);
 
+  await page.getByTestId('modal-close-button').click();
+
   // add workspace
   // we are reusing the same db file so that we don't need to maintain one
   // in the codebase
-
   await page.getByTestId('current-workspace').click();
   await page.getByTestId('add-or-new-workspace').click();
 

apps/electron/src/helper/db/workspace-db-adapter.ts

@@ -52,9 +52,11 @@ export class WorkspaceSQLiteDB extends BaseSQLiteAdapter {
   };
 
   setupListener(docId?: string) {
+    logger.debug('WorkspaceSQLiteDB: setupListener', this.workspaceId, docId);
     const doc = this.getDoc(docId);
     if (doc) {
       const onUpdate = async (update: Uint8Array, origin: YOrigin) => {
+        logger.debug('onUpdate', this.workspaceId, docId, update.length);
         const insertRows = [{ data: update, docId }];
         if (origin === 'renderer') {
           await this.addUpdateToSQLite(insertRows);
@@ -68,7 +70,11 @@ export class WorkspaceSQLiteDB extends BaseSQLiteAdapter {
           logger.debug('external update', this.workspaceId);
         }
       };
+      doc.subdocs.forEach(subdoc => {
+        this.setupListener(subdoc.guid);
+      });
       const onSubdocs = ({ added }: { added: Set<Y.Doc> }) => {
+        logger.info('onSubdocs', this.workspaceId, docId, added);
         added.forEach(subdoc => {
           this.setupListener(subdoc.guid);
         });

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

@@ -1,18 +1,20 @@
-import { Button, toast } from '@affine/component';
+import { Button, FlexWrapper, toast, Tooltip } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useMemo } from 'react';
 import { type FC, useCallback, useEffect, useState } from 'react';
 
 import type { AffineOfficialWorkspace } from '../../../shared';
+import * as style from './style.css';
 
-const useShowOpenDBFile = (workspaceId: string) => {
-  const [show, setShow] = useState(false);
+const useDBFileSecondaryPath = (workspaceId: string) => {
+  const [path, setPath] = useState<string | undefined>(undefined);
   useEffect(() => {
     if (window.apis && window.events && environment.isDesktop) {
       window.apis?.workspace
         .getMeta(workspaceId)
         .then(meta => {
-          setShow(!!meta.secondaryDBPath);
+          setPath(meta.secondaryDBPath);
         })
         .catch(err => {
           console.error(err);
@@ -20,12 +22,12 @@ const useShowOpenDBFile = (workspaceId: string) => {
       return window.events.workspace.onMetaChange((newMeta: any) => {
         if (newMeta.workspaceId === workspaceId) {
           const meta = newMeta.meta;
-          setShow(!!meta.secondaryDBPath);
+          setPath(meta.secondaryDBPath);
         }
       });
     }
   }, [workspaceId]);
-  return show;
+  return path;
 };
 
 export const StoragePanel: FC<{
@@ -33,7 +35,7 @@ export const StoragePanel: FC<{
 }> = ({ workspace }) => {
   const workspaceId = workspace.id;
   const t = useAFFiNEI18N();
-  const showOpenFolder = useShowOpenDBFile(workspaceId);
+  const secondaryPath = useDBFileSecondaryPath(workspaceId);
 
   const [moveToInProgress, setMoveToInProgress] = useState<boolean>(false);
   const onRevealDBFile = useCallback(() => {
@@ -65,23 +67,57 @@ export const StoragePanel: FC<{
       });
   }, [moveToInProgress, t, workspaceId]);
 
-  if (!showOpenFolder) {
-    return null;
-  }
+  const rowContent = useMemo(
+    () =>
+      secondaryPath ? (
+        <FlexWrapper justifyContent="space-between">
+          <Tooltip
+            zIndex={1000}
+            content={t['com.affine.settings.storage.db-location.change-hint']()}
+            placement="top-start"
+          >
+            <Button
+              data-testid="move-folder"
+              className={style.urlButton}
+              size="middle"
+              onClick={handleMoveTo}
+            >
+              {secondaryPath}
+            </Button>
+          </Tooltip>
+          <Button
+            size="small"
+            data-testid="reveal-folder"
+            data-disabled={moveToInProgress}
+            onClick={onRevealDBFile}
+          >
+            {t['Open folder']()}
+          </Button>
+        </FlexWrapper>
+      ) : (
+        <Button
+          size="small"
+          data-testid="move-folder"
+          data-disabled={moveToInProgress}
+          onClick={handleMoveTo}
+        >
+          {t['Move folder']()}
+        </Button>
+      ),
+    [handleMoveTo, moveToInProgress, onRevealDBFile, secondaryPath, t]
+  );
+
   return (
     <SettingRow
       name={t['Storage']()}
-      desc={t['Storage Folder Hint']()}
-      spreadCol={false}
+      desc={t[
+        secondaryPath
+          ? 'com.affine.settings.storage.description-alt'
+          : 'com.affine.settings.storage.description'
+      ]()}
+      spreadCol={!secondaryPath}
     >
-      <Button
-        data-testid="move-folder"
-        data-disabled={moveToInProgress}
-        onClick={handleMoveTo}
-      >
-        {t['Move folder']()}
-      </Button>
-      <Button onClick={onRevealDBFile}>{t['Open folder']()}</Button>
+      {rowContent}
     </SettingRow>
   );
 };

apps/web/src/components/affine/new-workspace-setting-detail/style.css.ts

@@ -43,12 +43,15 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
 
 export const urlButton = style({
   width: 'calc(100% - 64px - 15px)',
+  justifyContent: 'left',
+  textAlign: 'left',
 });
 globalStyle(`${urlButton} span`, {
   width: '100%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  fontWeight: '500',
 });
 
 export const fakeWrapper = style({

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

@@ -125,6 +125,7 @@ const WorkspaceListItem = ({
       className={clsx(sidebarSelectItem, { active: isActive })}
       title={workspaceName}
       onClick={onClick}
+      data-testid="workspace-list-item"
     >
       <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
       <span className="setting-name">{workspaceName}</span>

apps/web/src/components/root-app-sidebar/index.tsx

@@ -184,7 +184,11 @@ export const RootAppSidebar = ({
             </RouteMenuLinkItem>
           )}
           {runtimeConfig.enableNewSettingModal ? (
-            <MenuItem icon={<SettingsIcon />} onClick={onOpenSettingModal}>
+            <MenuItem
+              data-testid="slider-bar-workspace-setting-button"
+              icon={<SettingsIcon />}
+              onClick={onOpenSettingModal}
+            >
               <span data-testid="settings-modal-trigger">
                 {t['Settings']()}
               </span>

packages/component/src/ui/modal/modal-close-button.tsx

@@ -27,11 +27,11 @@ export const ModalCloseButton = ({
   ...props
 }: ModalCloseButtonProps) => {
   return absolute ? (
-    <StyledIconButton {...props}>
+    <StyledIconButton data-testid="modal-close-button" {...props}>
       <CloseIcon />
     </StyledIconButton>
   ) : (
-    <IconButton {...props}>
+    <IconButton data-testid="modal-close-button" {...props}>
       <CloseIcon />
     </IconButton>
   );

packages/i18n/src/resources/de.json

@@ -280,7 +280,8 @@
   "UNKNOWN_ERROR": "Unbekannter Fehler",
   "Open folder hint": "Prüfe, wo sich der Speicherordner befindet.",
   "Storage Folder": "Speicherordner",
-  "Storage Folder Hint": "Speicherort überprüfen oder ändern.",
+  "com.affine.settings.storage.description": "Speicherort überprüfen oder ändern.",
+  "com.affine.settings.storage.description-alt": "Speicherort überprüfen oder ändern.",
   "Sync across devices with AFFiNE Cloud": "Geräteübergreifende Synchronisierung mit AFFiNE Cloud",
   "Name Your Workspace": "Workspace benennen",
   "Update Available": "Update verfügbar",

packages/i18n/src/resources/en.json

@@ -23,6 +23,9 @@
   "com.affine.settings.about.update.download.message": "Automatically download updates (to this device).",
   "com.affine.settings.about.update.check.message": "Automatically check for new updates periodically.",
   "com.affine.settings.about.message": "Information about AFFiNE",
+  "com.affine.settings.storage.description": "Check or change storage location",
+  "com.affine.settings.storage.description-alt": "Check or change storage location. Click path to edit location.",
+  "com.affine.settings.storage.db-location.change-hint": "Click to move storage location.",
   "com.affine.pageMode": "Page Mode",
   "com.affine.edgelessMode": "Edgeless Mode",
   "com.affine.onboarding.title1": "Hyper merged whiteboard and docs",
@@ -281,7 +284,6 @@
   "Loading Page": "Loading Page",
   "Favorite pages for easy access": "Favourite pages for easy access",
   "emptySharedPages": "Shared pages will appear here.",
-  "Storage Folder Hint": "Check or change storage location. Click path to edit location.",
   "You cannot delete the last workspace": "You cannot delete the last workspace",
   "Synced with AFFiNE Cloud": "Synced with AFFiNE Cloud",
   "Recent": "Recent",
@@ -305,8 +307,8 @@
   "DB_FILE_ALREADY_LOADED": "Database file already loaded",
   "UNKNOWN_ERROR": "Unknown error",
   "Default Location": "Default Location",
-  "Open folder": "Open folder",
-  "Move folder": "Move folder",
+  "Open folder": "Open",
+  "Move folder": "Move",
   "Set database location": "Set database location",
   "Move folder hint": "Select a new storage location.",
   "Storage Folder": "Storage Folder",

packages/i18n/src/resources/fr.json

@@ -298,7 +298,8 @@
   "UNKNOWN_ERROR": "Erreur inconnue",
   "Restart Install Client Update": "Redémarrez pour installer la mise à jour",
   "Save": "Enregistrer",
-  "Storage Folder Hint": "Vérifier ou changer l'emplacement du lieu de stockage",
+  "com.affine.settings.storage.description": "Vérifier ou changer l'emplacement du lieu de stockage",
+  "com.affine.settings.storage.description-alt": "Vérifier ou changer l'emplacement du lieu de stockage",
   "Use on current device only": "Utiliser seulement sur l'appareil actuel",
   "Default db location hint": "Par défaut, elle sera enregistrée sous {{location}}",
   "FILE_ALREADY_EXISTS": "Fichier déjà existant",

packages/i18n/src/resources/ja.json

@@ -212,7 +212,8 @@
   "Sync across devices with AFFiNE Cloud": "AFFiNEクラウドでデバイス間を同期する",
   "Stop publishing": "公開をやめる",
   "Storage Folder": "ストレージフォルダー",
-  "Storage Folder Hint": "保存場所を確認または変更する",
+  "com.affine.settings.storage.description": "保存場所を確認または変更する",
+  "com.affine.settings.storage.description-alt": "保存場所を確認または変更する",
   "Upload": "アップロード",
   "Update Available": "アップデート可能",
   "Update workspace name success": "ワークスペース名の更新に成功",

packages/i18n/src/resources/zh-Hans.json

@@ -377,7 +377,8 @@
   "Shared Pages Description": "公开分享页面需要 AFFiNE Cloud 服务。",
   "Shared Pages In Public Workspace Description": "整个工作区已在网络上发布，可以通过<1>工作区设置</1>进行编辑。",
   "Storage Folder": "存储文件夹",
-  "Storage Folder Hint": "检查或更改存储位置。",
+  "com.affine.settings.storage.description": "检查或更改存储位置。",
+  "com.affine.settings.storage.description-alt": "检查或更改存储位置。点击路径调整存储位置。",
   "Successfully deleted": "成功删除。",
   "Sync across devices with AFFiNE Cloud": "使用 AFFiNE Cloud 在多个设备间进行同步",
   "Synced with AFFiNE Cloud": "AFFiNE Cloud 同步完成",