feat(core): add track events for page option (#7664)

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 && (
         <MenuItem
-          onClick={onRemoveFromAllowList}
+          onClick={handleRemoveFromAllowList}
           preFix={
             <MenuIcon>
               <FilterMinusIcon />
@@ -143,7 +161,7 @@ export const PageOperationCell = ({
         </MenuItem>
       )}
       <MenuItem
-        onClick={onToggleFavoritePage}
+        onClick={onToggleFavoritePageOption}
         preFix={
           <MenuIcon>
             {favourite ? (

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 };

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']());
     },

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 = (
                       <InformationIcon />
                     </MenuIcon>
                   }
-                  onClick={options.openInfoModal}
+                  onClick={handleOpenInfoModal}
                 >
                   {t['com.affine.page-properties.page-info.view']()}
                 </MenuItem>
@@ -244,8 +249,8 @@ export const useExplorerDocNodeOperations = (
       handleMoveToTrash,
       handleOpenInNewTab,
       handleOpenInSplitView,
+      handleOpenInfoModal,
       handleToggleFavoriteDoc,
-      options.openInfoModal,
       t,
     ]
   );