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 />

packages/frontend/i18n/src/resources/en.json

@@ -1079,5 +1079,9 @@
   "com.affine.issue-feedback.title": "Share Your Feedback on GitHub",
   "com.affine.issue-feedback.description": "Got feedback? We're all ears! Create an issue on GitHub to let us know your thoughts and suggestions",
   "com.affine.issue-feedback.confirm": "Create Issue on GitHub",
-  "com.affine.issue-feedback.cancel": "Maybe Later"
+  "com.affine.issue-feedback.cancel": "Maybe Later",
+  "com.affine.history-vision.tips-modal.title": "History Vision Needs AFFiNE Cloud",
+  "com.affine.history-vision.tips-modal.description": "The current workspace is a local workspace, and we do not support version history for it at the moment. You can enable AFFiNE Cloud. This will sync the workspace with the Cloud, allowing you to use this feature.",
+  "com.affine.history-vision.tips-modal.cancel": "Cancel",
+  "com.affine.history-vision.tips-modal.confirm": "Enable AFFiNE Cloud"
 }