From 3792506b096544fe126fbe3e397f2cb8169f994e Mon Sep 17 00:00:00 2001 From: JimmFly <447268514@qq.com> Date: Tue, 20 Feb 2024 12:50:55 +0000 Subject: [PATCH] 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 | 1 + .../affine/history-tips-modal/index.tsx | 66 ++++ .../affine/history-tips-modal/top-svg.tsx | 299 ++++++++++++++++++ .../block-suite-header/menu/index.tsx | 14 +- .../core/src/providers/modal-provider.tsx | 13 +- packages/frontend/i18n/src/resources/en.json | 6 +- 6 files changed, 392 insertions(+), 7 deletions(-) create mode 100644 packages/frontend/core/src/components/affine/history-tips-modal/index.tsx create mode 100644 packages/frontend/core/src/components/affine/history-tips-modal/top-svg.tsx 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" }