feat(core): add history tips modal (#5733)

close TOV-459 TOV-503

https://github.com/toeverything/AFFiNE/assets/102217452/9cbfaf35-bc7b-4275-94be-6e777447ef11

packages/frontend/core/src/atoms/index.ts

@@ -15,6 +15,7 @@ export const openPaymentDisableAtom = atom(false);
 export const openQuotaModalAtom = atom(false);
 export const openStarAFFiNEModalAtom = atom(false);
 export const openIssueFeedbackModalAtom = atom(false);
+export const openHistoryTipsModalAtom = atom(false);
 
 export type SettingAtom = Pick<
   SettingProps,

packages/frontend/core/src/components/affine/history-tips-modal/index.tsx

@@ -0,0 +1,66 @@
+import { OverlayModal } from '@affine/component';
+import {
+  openDisableCloudAlertModalAtom,
+  openHistoryTipsModalAtom,
+} from '@affine/core/atoms';
+import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { WorkspaceSubPath } from '@affine/core/shared';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useService, Workspace, WorkspaceManager } from '@toeverything/infra';
+import { useAtom, useSetAtom } from 'jotai';
+import { useCallback, useState } from 'react';
+
+import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
+import TopSvg from './top-svg';
+
+export const HistoryTipsModal = () => {
+  const t = useAFFiNEI18N();
+  const { openPage } = useNavigateHelper();
+  const workspaceManager = useService(WorkspaceManager);
+  const currentWorkspace = useService(Workspace);
+  const [open, setOpen] = useAtom(openHistoryTipsModalAtom);
+  const setTempDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
+  const [openEnableCloudModal, setOpenEnableCloudModal] = useState(false);
+
+  const handleConfirm = useCallback(() => {
+    setOpen(false);
+    if (runtimeConfig.enableCloud) {
+      return setOpenEnableCloudModal(true);
+    }
+    return setTempDisableCloudOpen(true);
+  }, [setOpen, setTempDisableCloudOpen]);
+
+  const handEnableCloud = useAsyncCallback(async () => {
+    if (!currentWorkspace) {
+      return;
+    }
+    const { id: newId } =
+      await workspaceManager.transformLocalToCloud(currentWorkspace);
+    openPage(newId, WorkspaceSubPath.ALL);
+    setOpenEnableCloudModal(false);
+  }, [openPage, currentWorkspace, workspaceManager]);
+
+  return (
+    <>
+      <OverlayModal
+        open={open}
+        topImage={<TopSvg />}
+        title={t['com.affine.history-vision.tips-modal.title']()}
+        onOpenChange={setOpen}
+        description={t['com.affine.history-vision.tips-modal.description']()}
+        cancelText={t['com.affine.history-vision.tips-modal.cancel']()}
+        confirmButtonOptions={{
+          type: 'primary',
+        }}
+        onConfirm={handleConfirm}
+        confirmText={t['com.affine.history-vision.tips-modal.confirm']()}
+      />
+      <EnableAffineCloudModal
+        open={openEnableCloudModal}
+        onOpenChange={setOpenEnableCloudModal}
+        onConfirm={handEnableCloud}
+      />
+    </>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -5,6 +5,7 @@ import {
   MenuItem,
   MenuSeparator,
 } from '@affine/component/ui/menu';
+import { openHistoryTipsModalAtom } from '@affine/core/atoms';
 import { currentModeAtom } from '@affine/core/atoms/mode';
 import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
 import { Export, MoveToTrash } from '@affine/core/components/page-list';
@@ -26,7 +27,7 @@ import {
   PageIcon,
 } from '@blocksuite/icons';
 import { useService, Workspace } from '@toeverything/infra';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';
 
 import { HeaderDropDownButton } from '../../../pure/header-drop-down-button';
@@ -64,10 +65,14 @@ export const PageHeaderMenuButton = ({
   const { setTrashModal } = useTrashModalHelper(blockSuiteWorkspace);
 
   const [historyModalOpen, setHistoryModalOpen] = useState(false);
+  const setOpenHistoryTipsModal = useSetAtom(openHistoryTipsModalAtom);
 
   const openHistoryModal = useCallback(() => {
-    setHistoryModalOpen(true);
-  }, []);
+    if (workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
+      return setHistoryModalOpen(true);
+    }
+    return setOpenHistoryTipsModal(true);
+  }, [setOpenHistoryTipsModal, workspace.flavour]);
 
   const handleOpenTrashModal = useCallback(() => {
     if (!pageMeta) {
@@ -186,8 +191,7 @@ export const PageHeaderMenuButton = ({
       </MenuItem>
       <Export exportHandler={exportHandler} pageMode={currentMode} />
 
-      {workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD &&
-      runtimeConfig.enablePageHistory ? (
+      {runtimeConfig.enablePageHistory ? (
         <MenuItem
           preFix={
             <MenuIcon>

packages/frontend/core/src/providers/modal-provider.tsx

@@ -72,17 +72,25 @@ const CloudQuotaModal = lazy(() =>
     default: module.CloudQuotaModal,
   }))
 );
+
 const StarAFFiNEModal = lazy(() =>
   import('../components/affine/star-affine-modal').then(module => ({
     default: module.StarAFFiNEModal,
   }))
 );
+
 const IssueFeedbackModal = lazy(() =>
   import('../components/affine/issue-feedback-modal').then(module => ({
     default: module.IssueFeedbackModal,
   }))
 );
 
+const HistoryTipsModal = lazy(() =>
+  import('../components/affine/history-tips-modal').then(module => ({
+    default: module.HistoryTipsModal,
+  }))
+);
+
 export const Setting = () => {
   const [{ open, workspaceMetadata, activeTab }, setOpenSettingModalAtom] =
     useAtom(openSettingModalAtom);
@@ -184,7 +192,10 @@ export function CurrentWorkspaceModals() {
       <WorkspaceGuideModal />
       {currentWorkspace ? <Setting /> : null}
       {currentWorkspace?.flavour === WorkspaceFlavour.LOCAL && (
-        <LocalQuotaModal />
+        <>
+          <LocalQuotaModal />
+          <HistoryTipsModal />
+        </>
       )}
       {currentWorkspace?.flavour === WorkspaceFlavour.AFFINE_CLOUD && (
         <CloudQuotaModal />