fix: should not show open folder if it is not moved (#2299)

apps/web/src/components/affine/create-workspace-modal/index.tsx

@@ -118,10 +118,7 @@ interface SetDBLocationContentProps {
   onConfirmLocation: (dir?: string) => void;
 }
 
-const SetDBLocationContent = ({
-  onConfirmLocation,
-}: SetDBLocationContentProps) => {
-  const t = useAFFiNEI18N();
+const useDefaultDBLocation = () => {
   const [defaultDBLocation, setDefaultDBLocation] = useState('');
 
   useEffect(() => {
@@ -130,20 +127,40 @@ const SetDBLocationContent = ({
     });
   }, []);
 
+  return defaultDBLocation;
+};
+
+const SetDBLocationContent = ({
+  onConfirmLocation,
+}: SetDBLocationContentProps) => {
+  const t = useAFFiNEI18N();
+  const defaultDBLocation = useDefaultDBLocation();
+  const [opening, setOpening] = useState(false);
+
+  const handleSelectDBFileLocation = async () => {
+    if (opening) {
+      return;
+    }
+    setOpening(true);
+    const result = await window.apis?.dialog.selectDBFileLocation();
+    setOpening(false);
+    if (result?.filePath) {
+      onConfirmLocation(result.filePath);
+    } else if (result?.error) {
+      toast(t[result.error]());
+    }
+  };
+
   return (
     <div className={style.content}>
       <div className={style.contentTitle}>{t['Set database location']()}</div>
       <p>{t['Workspace database storage description']()}</p>
       <div className={style.buttonGroup}>
         <Button
+          disabled={opening}
           data-testid="create-workspace-customize-button"
           type="light"
-          onClick={async () => {
-            const result = await window.apis?.dialog.selectDBFileLocation();
-            if (result) {
-              onConfirmLocation(result.filePath);
-            }
-          }}
+          onClick={handleSelectDBFileLocation}
         >
           {t['Customize']()}
         </Button>

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

@@ -6,8 +6,10 @@ import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   flexDirection: 'column',
-  padding: '52px 52px 0 52px',
+  marginTop: '52px',
+  padding: '0 52px 52px 52px',
   height: 'calc(100vh - 52px)',
+  overflow: 'auto',
 });
 
 export const sidebar = style({
@@ -15,7 +17,6 @@ export const sidebar = style({
 });
 
 export const content = style({
-  overflow: 'auto',
   flex: 1,
   marginTop: '40px',
 });
@@ -157,7 +158,10 @@ export const indicator = style({
 
 export const tabButtonWrapper = style({
   display: 'flex',
-  position: 'relative',
+  position: 'sticky',
+  top: '0',
+  background: 'var(--affine-background-primary-color)',
+  zIndex: 1,
 });
 
 export const storageTypeWrapper = style({
@@ -176,6 +180,10 @@ export const storageTypeWrapper = style({
     '&:not(:last-child)': {
       marginBottom: '12px',
     },
+    '&[data-disabled="true"]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
   },
 });
 

apps/web/src/components/affine/workspace-setting-detail/panel/export/index.tsx

@@ -15,8 +15,13 @@ export const ExportPanel = () => {
         disabled={!environment.isDesktop || !id}
         data-testid="export-affine-backup"
         onClick={async () => {
-          if (id && (await window.apis?.dialog.saveDBFileAs(id))) {
-            toast(t['Export success']());
+          if (id) {
+            const result = await window.apis?.dialog.saveDBFileAs(id);
+            if (result?.error) {
+              toast(t[result.error]());
+            } else if (!result?.canceled) {
+              toast(t['Export success']());
+            }
           }
         }}
       >

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -12,7 +12,7 @@ import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-s
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import clsx from 'clsx';
 import type React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useIsWorkspaceOwner } from '../../../../../hooks/affine/use-is-workspace-owner';
 import { Upload } from '../../../../pure/file-upload';
@@ -23,6 +23,26 @@ import { CameraIcon } from './icons';
 import { WorkspaceLeave } from './leave';
 import { StyledInput } from './style';
 
+const useDBFilePathMeta = (workspaceId: string) => {
+  const [meta, setMeta] = useState<{
+    path: string;
+    realPath: string;
+  }>();
+  useEffect(() => {
+    if (window.apis && window.events) {
+      window.apis.db.getDBFilePath(workspaceId).then(meta => {
+        setMeta(meta);
+      });
+      return window.events.db.onDBFilePathChange(meta => {
+        if (meta.workspaceId === workspaceId) {
+          setMeta(meta);
+        }
+      });
+    }
+  }, [workspaceId]);
+  return meta;
+};
+
 export const GeneralPanel: React.FC<PanelProps> = ({
   workspace,
   onDeleteWorkspace,
@@ -36,11 +56,36 @@ export const GeneralPanel: React.FC<PanelProps> = ({
   const isOwner = useIsWorkspaceOwner(workspace);
   const t = useAFFiNEI18N();
 
+  const dbPathMeta = useDBFilePathMeta(workspace.id);
+  const showOpenFolder =
+    environment.isDesktop && dbPathMeta?.path !== dbPathMeta?.realPath;
+
   const handleUpdateWorkspaceName = (name: string) => {
     setName(name);
     toast(t['Update workspace name success']());
   };
 
+  const [moveToInProgress, setMoveToInProgress] = useState<boolean>(false);
+
+  const handleMoveTo = async () => {
+    if (moveToInProgress) {
+      return;
+    }
+    try {
+      setMoveToInProgress(true);
+      const result = await window.apis?.dialog.moveDBFile(workspace.id);
+      if (!result?.error && !result?.canceled) {
+        toast(t['Move folder success']());
+      } else if (result?.error) {
+        toast(t[result.error]());
+      }
+    } catch (err) {
+      toast(t['UNKNOWN_ERROR']());
+    } finally {
+      setMoveToInProgress(false);
+    }
+  };
+
   const [, update] = useBlockSuiteWorkspaceAvatarUrl(
     workspace.blockSuiteWorkspace
   );
@@ -128,34 +173,33 @@ export const GeneralPanel: React.FC<PanelProps> = ({
           </div>
 
           <div className={style.col}>
-            <div
-              className={style.storageTypeWrapper}
-              onClick={() => {
-                if (environment.isDesktop) {
-                  window.apis?.dialog.revealDBFile(workspace.id);
-                }
-              }}
-            >
-              <FolderIcon color="var(--affine-primary-color)" />
-              <div className={style.storageTypeLabelWrapper}>
-                <div className={style.storageTypeLabel}>
-                  {t['Open folder']()}
-                </div>
-                <div className={style.storageTypeLabelHint}>
-                  {t['Open folder hint']()}
+            {showOpenFolder && (
+              <div
+                className={style.storageTypeWrapper}
+                onClick={() => {
+                  if (environment.isDesktop) {
+                    window.apis?.dialog.revealDBFile(workspace.id);
+                  }
+                }}
+              >
+                <FolderIcon color="var(--affine-primary-color)" />
+                <div className={style.storageTypeLabelWrapper}>
+                  <div className={style.storageTypeLabel}>
+                    {t['Open folder']()}
+                  </div>
+                  <div className={style.storageTypeLabelHint}>
+                    {t['Open folder hint']()}
+                  </div>
                 </div>
+                <ArrowRightSmallIcon color="var(--affine-primary-color)" />
               </div>
-              <ArrowRightSmallIcon color="var(--affine-primary-color)" />
-            </div>
+            )}
 
             <div
               data-testid="move-folder"
+              data-disabled={moveToInProgress}
               className={style.storageTypeWrapper}
-              onClick={async () => {
-                if (await window.apis?.dialog.moveDBFile(workspace.id)) {
-                  toast(t['Move folder success']());
-                }
-              }}
+              onClick={handleMoveTo}
             >
               <MoveToIcon color="var(--affine-primary-color)" />
               <div className={style.storageTypeLabelWrapper}>