From 7edd78884ed93e4c05fc0e77d882fbc3adcdb608 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Wed, 7 Aug 2024 05:52:40 +0000 Subject: [PATCH] feat(core): add track events for page option (#7664) --- .../components/page-list/operation-cell.tsx | 26 ++++++++++++--- packages/frontend/core/src/mixpanel/events.ts | 33 +++++++++++++------ .../explorer/views/nodes/collection/index.tsx | 1 + .../explorer/views/nodes/doc/operations.tsx | 13 +++++--- 4 files changed, 55 insertions(+), 18 deletions(-) diff --git a/packages/frontend/core/src/components/page-list/operation-cell.tsx b/packages/frontend/core/src/components/page-list/operation-cell.tsx index 15ffb77096..48078a3fd2 100644 --- a/packages/frontend/core/src/components/page-list/operation-cell.tsx +++ b/packages/frontend/core/src/components/page-list/operation-cell.tsx @@ -77,9 +77,10 @@ export const PageOperationCell = ({ const blocksuiteDoc = currentWorkspace.docCollection.getDoc(page.id); const [openInfoModal, setOpenInfoModal] = useState(false); - const onOpenInfoModal = () => { + const onOpenInfoModal = useCallback(() => { + track.$.docInfoPanel.$.open(); setOpenInfoModal(true); - }; + }, []); const onDisablePublicSharing = useCallback(() => { toast('Successfully disabled', { @@ -88,6 +89,8 @@ export const PageOperationCell = ({ }, []); const onRemoveToTrash = useCallback(() => { + track.allDocs.list.docMenu.deleteDoc(); + setTrashModal({ open: true, pageIds: [page.id], @@ -96,6 +99,8 @@ export const PageOperationCell = ({ }, [page.id, page.title, setTrashModal]); const onOpenInSplitView = useCallback(() => { + track.allDocs.list.docMenu.openInSplitView(); + workbench.openDoc(page.id, { at: 'tail' }); }, [page.id, workbench]); @@ -113,6 +118,12 @@ export const PageOperationCell = ({ ); }, [page.id, favAdapter, t]); + const onToggleFavoritePageOption = useCallback(() => { + track.allDocs.list.docMenu.toggleFavorite(); + + onToggleFavoritePage(); + }, [onToggleFavoritePage]); + const onDuplicate = useCallback(() => { duplicate(page.id, false); track.allDocs.list.docMenu.createDoc({ @@ -120,6 +131,13 @@ export const PageOperationCell = ({ }); }, [duplicate, page.id]); + const handleRemoveFromAllowList = useCallback(() => { + if (onRemoveFromAllowList) { + onRemoveFromAllowList(); + track.collection.docList.docMenu.removeOrganizeItem({ type: 'doc' }); + } + }, [onRemoveFromAllowList]); + const OperationMenu = ( <> {page.isPublic && ( @@ -132,7 +150,7 @@ export const PageOperationCell = ({ )} {isInAllowList && ( @@ -143,7 +161,7 @@ export const PageOperationCell = ({ )} {favourite ? ( diff --git a/packages/frontend/core/src/mixpanel/events.ts b/packages/frontend/core/src/mixpanel/events.ts index 80591a21e5..cc40f95389 100644 --- a/packages/frontend/core/src/mixpanel/events.ts +++ b/packages/frontend/core/src/mixpanel/events.ts @@ -37,11 +37,7 @@ type DocEvents = | 'deleteDoc' | 'switchPageMode' | 'openDocOptionsMenu' - | 'openDocInfo' - | 'renameDoc' - | 'deleteDoc' - | 'viewHistoryVersions' - | 'viewInfo'; + | 'openDocInfo'; type EditorEvents = 'bold' | 'italic' | 'underline' | 'strikeThrough'; // END SECTION @@ -65,13 +61,15 @@ type FolderEvents = | 'deleteFolder'; type TagEvents = 'createTag' | 'deleteTag' | 'renameTag' | 'tagDoc'; type FavoriteEvents = 'toggleFavorite'; +type DocInfoEvents = 'toggle' | 'open'; type OrganizeItemEvents = // doc, link, folder, collection, tag | 'createOrganizeItem' | 'renameOrganizeItem' | 'moveOrganizeItem' | 'deleteOrganizeItem' - | 'orderOrganizeItem'; + | 'orderOrganizeItem' + | 'removeOrganizeItem'; type OrganizeEvents = | OrganizeItemEvents | CollectionEvents @@ -113,7 +111,8 @@ type UserEvents = | ShareEvents | AuthEvents | AccountEvents - | PaymentEvents; + | PaymentEvents + | DocInfoEvents; interface PageDivision { [page: string]: { @@ -178,7 +177,7 @@ const PageEvents = { 'toggleFavorite', ], docs: ['createDoc', 'deleteDoc', 'linkDoc'], - collections: ['createDoc', 'addDocToCollection'], + collections: ['createDoc', 'addDocToCollection', 'removeOrganizeItem'], folders: ['createDoc'], tags: ['createDoc', 'tagDoc'], favorites: ['createDoc'], @@ -238,6 +237,9 @@ const PageEvents = { atMenu: ['linkDoc'], formatToolbar: ['bold'], }, + inlineDocInfo: { + $: ['toggle'], + }, }, // remove when type added // eslint-disable-next-line @typescript-eslint/ban-types @@ -252,12 +254,22 @@ const PageEvents = { actions: ['createDoc', 'createWorkspace'], }, list: { - docMenu: ['createDoc'], + docMenu: [ + 'createDoc', + 'deleteDoc', + 'openInSplitView', + 'toggleFavorite', + 'openInNewTab', + ], }, }, // remove when type added // eslint-disable-next-line @typescript-eslint/ban-types - collection: {}, + collection: { + docList: { + docMenu: ['removeOrganizeItem'], + }, + }, // remove when type added // eslint-disable-next-line @typescript-eslint/ban-types tag: {}, @@ -304,6 +316,7 @@ export type EventArgs = { createOrganizeItem: OrganizeItemArgs; renameOrganizeItem: OrganizeItemArgs; moveOrganizeItem: OrganizeItemArgs; + removeOrganizeItem: OrganizeItemArgs; deleteOrganizeItem: OrganizeItemArgs; orderOrganizeItem: OrganizeItemArgs; openInNewTab: { type: OrganizeItemType }; diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx index c849404281..28bddf6087 100644 --- a/packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx +++ b/packages/frontend/core/src/modules/explorer/views/nodes/collection/index.tsx @@ -274,6 +274,7 @@ const ExplorerCollectionNodeChildren = ({ const handleRemoveFromAllowList = useCallback( (id: string) => { + track.$.navigationPanel.collections.removeOrganizeItem({ type: 'doc' }); collectionService.deletePageFromCollection(collection.id, id); toast(t['com.affine.collection.removePage.success']()); }, diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx index c4d013b1d6..bd37f560f7 100644 --- a/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx +++ b/packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx @@ -52,6 +52,11 @@ export const useExplorerDocNodeOperations = ( }, [docId, compatibleFavoriteItemsAdapter]) ); + const handleOpenInfoModal = useCallback(() => { + track.$.docInfoPanel.$.open(); + options.openInfoModal(); + }, [options]); + const handleMoveToTrash = useCallback(() => { if (!docRecord) { return; @@ -92,7 +97,7 @@ export const useExplorerDocNodeOperations = ( track.$.navigationPanel.organize.openInSplitView({ type: 'doc', }); - }, [docId, workbenchService]); + }, [docId, workbenchService.workbench]); const handleAddLinkedPage = useAsyncCallback(async () => { const newDoc = docsService.createDoc(); @@ -102,7 +107,7 @@ export const useExplorerDocNodeOperations = ( track.$.navigationPanel.docs.linkDoc({ control: 'createDoc' }); workbenchService.workbench.openDoc(newDoc.id); options.openNodeCollapsed(); - }, [docId, options, docsService, workbenchService.workbench]); + }, [docsService, docId, workbenchService.workbench, options]); const handleToggleFavoriteDoc = useCallback(() => { compatibleFavoriteItemsAdapter.toggle(docId, 'doc'); @@ -136,7 +141,7 @@ export const useExplorerDocNodeOperations = ( } - onClick={options.openInfoModal} + onClick={handleOpenInfoModal} > {t['com.affine.page-properties.page-info.view']()} @@ -244,8 +249,8 @@ export const useExplorerDocNodeOperations = ( handleMoveToTrash, handleOpenInNewTab, handleOpenInSplitView, + handleOpenInfoModal, handleToggleFavoriteDoc, - options.openInfoModal, t, ] );