fix: workspace storage settings issues (#3055)

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>