diff --git a/packages/frontend/core/src/atoms/index.ts b/packages/frontend/core/src/atoms/index.ts index 6c1454ff8..5eac7b974 100644 --- a/packages/frontend/core/src/atoms/index.ts +++ b/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, diff --git a/packages/frontend/core/src/components/affine/history-tips-modal/index.tsx b/packages/frontend/core/src/components/affine/history-tips-modal/index.tsx new file mode 100644 index 000000000..f0ef444a0 --- /dev/null +++ b/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 ( + <> + } + 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']()} + /> + + + ); +}; diff --git a/packages/frontend/core/src/components/affine/history-tips-modal/top-svg.tsx b/packages/frontend/core/src/components/affine/history-tips-modal/top-svg.tsx new file mode 100644 index 000000000..d44028b63 --- /dev/null +++ b/packages/frontend/core/src/components/affine/history-tips-modal/top-svg.tsx @@ -0,0 +1,299 @@ +import { cssVar } from '@toeverything/theme'; + +export default function TopSvg() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx index f82aaf6f6..df8a4f4e6 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx +++ b/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 = ({ - {workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD && - runtimeConfig.enablePageHistory ? ( + {runtimeConfig.enablePageHistory ? ( diff --git a/packages/frontend/core/src/providers/modal-provider.tsx b/packages/frontend/core/src/providers/modal-provider.tsx index b7daa2184..41ed37365 100644 --- a/packages/frontend/core/src/providers/modal-provider.tsx +++ b/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() { {currentWorkspace ? : null} {currentWorkspace?.flavour === WorkspaceFlavour.LOCAL && ( - + <> + + + )} {currentWorkspace?.flavour === WorkspaceFlavour.AFFINE_CLOUD && ( diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 54624ca8c..fa347e0ef 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/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" }