fix: cleanup workspace when switch setting panel (#3072)

apps/web/src/adapters/local/index.tsx

@@ -113,7 +113,6 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
         <NewWorkspaceSettingDetail
           onDeleteWorkspace={onDeleteWorkspace}
           workspace={currentWorkspace}
-          key={currentWorkspace.id}
           onTransferWorkspace={onTransformWorkspace}
         />
       );

apps/web/src/atoms/index.ts

@@ -15,6 +15,8 @@ export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspace'> & {
 };
 
 export const openSettingModalAtom = atom<SettingAtom>({
+  activeTab: 'appearance',
+  workspace: null,
   open: false,
 });
 

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

@@ -23,11 +23,11 @@ import { WorkSpaceSetting } from './workspace-setting';
 
 type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
 export type SettingProps = {
-  activeTab?: ActiveTab;
+  activeTab: ActiveTab;
-  workspace?: AllWorkspace;
+  workspace: AllWorkspace | null;
   onSettingClick: (params: {
     activeTab: ActiveTab;
-    workspace?: AllWorkspace;
+    workspace: AllWorkspace | null;
   }) => void;
 };
 export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
@@ -52,6 +52,7 @@ export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
     (key: GeneralSettingKeys) => {
       onSettingClick({
         activeTab: key,
+        workspace: null,
       });
     },
     [onSettingClick]
@@ -66,7 +67,7 @@ export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
     [onSettingClick]
   );
   const onAccountSettingClick = useCallback(() => {
-    onSettingClick({ activeTab: 'account' });
+    onSettingClick({ activeTab: 'account', workspace: null });
   }, [onSettingClick]);
 
   return (
@@ -86,7 +87,7 @@ export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
         <div className="wrapper">
           <div className="content">
             {activeTab === 'workspace' && workspace ? (
-              <WorkSpaceSetting workspace={workspace} />
+              <WorkSpaceSetting key={workspace.id} workspace={workspace} />
             ) : null}
             {generalSettingList.find(v => v.key === activeTab) ? (
               <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />

apps/web/src/components/pure/help-island/index.tsx

@@ -31,24 +31,7 @@ export const HelpIsland = ({
   const [, setOpenOnboarding] = useAtom(openOnboardingModalAtom);
   const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
   const [spread, setShowSpread] = useState(false);
-  // const { triggerShortcutsModal, triggerContactModal } = useModal();
-  // const blockHub = useGlobalState(store => store.blockHub);
   const t = useAFFiNEI18N();
-  //
-  // useEffect(() => {
-  //   blockHub?.blockHubStatusUpdated.on(status => {
-  //     if (status) {
-  //       setShowSpread(false);
-  //     }
-  //   });
-  //   return () => {
-  //     blockHub?.blockHubStatusUpdated.dispose();
-  //   };
-  // }, [blockHub]);
-  //
-  // useEffect(() => {
-  //   spread && blockHub?.toggleMenu(false);
-  // }, [blockHub, spread]);
 
   const [openShortCut, setOpenShortCut] = useState(false);
 
@@ -58,6 +41,7 @@ export const HelpIsland = ({
     setOpenSettingModalAtom({
       open: true,
       activeTab: 'about',
+      workspace: null,
     });
   }, [setOpenSettingModalAtom]);
 

apps/web/src/layouts/workspace-layout.tsx

@@ -40,7 +40,6 @@ import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
 
 import { WorkspaceAdapters } from '../adapters/workspace';
-import type { SettingAtom } from '../atoms';
 import {
   openQuickSearchModalAtom,
   openSettingModalAtom,
@@ -72,11 +71,6 @@ const QuickSearchModal = lazy(() =>
     default: module.QuickSearchModal,
   }))
 );
-const SettingModal = lazy(() =>
-  import('../components/affine/setting-modal').then(module => ({
-    default: module.SettingModal,
-  }))
-);
 
 function DefaultProvider({ children }: PropsWithChildren) {
   return <>{children}</>;
@@ -101,37 +95,6 @@ export const QuickSearch: FC = () => {
     />
   );
 };
-export const Setting: FC = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
-  const [{ open, workspace, activeTab }, setOpenSettingModalAtom] =
-    useAtom(openSettingModalAtom);
-  const blockSuiteWorkspace = currentWorkspace?.blockSuiteWorkspace;
-
-  const onSettingClick = useCallback(
-    ({
-      activeTab,
-      workspace,
-    }: Pick<SettingAtom, 'activeTab' | 'workspace'>) => {
-      setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace }));
-    },
-    [setOpenSettingModalAtom]
-  );
-
-  if (!blockSuiteWorkspace) {
-    return null;
-  }
-  return (
-    <SettingModal
-      open={open}
-      activeTab={activeTab || 'appearance'}
-      workspace={workspace}
-      onSettingClick={onSettingClick}
-      setOpen={open => {
-        setOpenSettingModalAtom(prev => ({ ...prev, open }));
-      }}
-    />
-  );
-};
 
 export const AllWorkspaceContext = ({
   children,
@@ -358,7 +321,11 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
 
   const handleOpenSettingModal = useCallback(() => {
-    setOpenSettingModalAtom({ activeTab: 'appearance', open: true });
+    setOpenSettingModalAtom({
+      activeTab: 'appearance',
+      workspace: null,
+      open: true,
+    });
   }, [setOpenSettingModalAtom]);
 
   const resizing = useAtomValue(appSidebarResizingAtom);
@@ -448,7 +415,6 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
       </DndContext>
       <QuickSearch />
       {runtimeConfig.enableNotificationCenter && <NotificationCenter />}
-      <Setting />
     </>
   );
 };

apps/web/src/providers/modal-provider.tsx

@@ -3,12 +3,14 @@ import {
   rootCurrentWorkspaceIdAtom,
   rootWorkspacesMetadataAtom,
 } from '@affine/workspace/atom';
+import { assertExists } from '@blocksuite/global/utils';
 import { arrayMove } from '@dnd-kit/sortable';
 import { useAtom, useSetAtom } from 'jotai';
 import { useRouter } from 'next/router';
-import type { ReactElement } from 'react';
+import type { FC, ReactElement } from 'react';
 import { lazy, Suspense, useCallback, useTransition } from 'react';
 
+import type { SettingAtom } from '../atoms';
 import {
   openCreateWorkspaceModalAtom,
   openDisableCloudAlertModalAtom,
@@ -16,10 +18,17 @@ import {
   openSettingModalAtom,
   openWorkspacesModalAtom,
 } from '../atoms';
+import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspaces } from '../hooks/use-workspaces';
 import type { AllWorkspace } from '../shared';
 
+const SettingModal = lazy(() =>
+  import('../components/affine/setting-modal').then(module => ({
+    default: module.SettingModal,
+  }))
+);
+
 const WorkspaceListModal = lazy(() =>
   import('../components/pure/workspace-list-modal').then(module => ({
     default: module.WorkspaceListModal,
@@ -46,7 +55,40 @@ const OnboardingModal = lazy(() =>
   }))
 );
 
+export const Setting: FC = () => {
+  const [currentWorkspace] = useCurrentWorkspace();
+  const [{ open, workspace, activeTab }, setOpenSettingModalAtom] =
+    useAtom(openSettingModalAtom);
+  assertExists(currentWorkspace);
+
+  const onSettingClick = useCallback(
+    ({
+      activeTab,
+      workspace,
+    }: Pick<SettingAtom, 'activeTab' | 'workspace'>) => {
+      setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace }));
+    },
+    [setOpenSettingModalAtom]
+  );
+
+  return (
+    <SettingModal
+      open={open}
+      activeTab={activeTab}
+      workspace={workspace}
+      onSettingClick={onSettingClick}
+      setOpen={useCallback(
+        open => {
+          setOpenSettingModalAtom(prev => ({ ...prev, open }));
+        },
+        [setOpenSettingModalAtom]
+      )}
+    />
+  );
+};
+
 export function CurrentWorkspaceModals() {
+  const [currentWorkspace] = useCurrentWorkspace();
   const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom(
     openDisableCloudAlertModalAtom
   );
@@ -75,6 +117,7 @@ export function CurrentWorkspaceModals() {
           />
         </Suspense>
       )}
+      {currentWorkspace && <Setting />}
     </>
   );
 }