feat(core): add track events for page option

toeverything · Aug 1, 2024 · 0a3c559 · 0a3c559
1 parent 76cef0a
commit 0a3c559
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 15 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
@@ -39,7 +39,7 @@ import {
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
-import { useCallback, useState } from 'react';
+import { type BaseSyntheticEvent, useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import type { CollectionService } from '../../modules/collection';
@@ -76,9 +76,15 @@ export const PageOperationCell = ({
   const blocksuiteDoc = currentWorkspace.docCollection.getDoc(page.id);
 
   const [openInfoModal, setOpenInfoModal] = useState(false);
-  const onOpenInfoModal = () => {
+  const onOpenInfoModal = useCallback(() => {
+    mixpanel.track('PageOptionClick', {
+      page: 'doc library',
+      segment: 'all doc',
+      module: 'all doc',
+      control: 'view info',
+    });
     setOpenInfoModal(true);
-  };
+  }, []);
 
   const onDisablePublicSharing = useCallback(() => {
     toast('Successfully disabled', {
@@ -87,6 +93,12 @@ export const PageOperationCell = ({
   }, []);
 
   const onRemoveToTrash = useCallback(() => {
+    mixpanel.track('PageOptionClick', {
+      page: 'doc library',
+      segment: 'all doc',
+      module: 'all doc',
+      control: 'move to trash',
+    });
     setTrashModal({
       open: true,
       pageIds: [page.id],
@@ -95,6 +107,12 @@ export const PageOperationCell = ({
   }, [page.id, page.title, setTrashModal]);
 
   const onOpenInSplitView = useCallback(() => {
+    mixpanel.track('PageOptionClick', {
+      page: 'doc library',
+      segment: 'all doc',
+      module: 'all doc',
+      control: 'open in split view',
+    });
     workbench.openDoc(page.id, { at: 'tail' });
   }, [page.id, workbench]);
 
@@ -108,6 +126,17 @@ export const PageOperationCell = ({
     );
   }, [page.id, favAdapter, t]);
 
+  const onToggleFavoritePageOption = useCallback(() => {
+    mixpanel.track('PageOptionClick', {
+      page: 'doc library',
+      segment: 'all doc',
+      module: 'all doc',
+      control: favourite ? 'remove from favourites' : 'add to favourites',
+    });
+
+    onToggleFavoritePage();
+  }, [favourite, onToggleFavoritePage]);
+
   const onDuplicate = useCallback(() => {
     duplicate(page.id, false);
     mixpanel.track('DocCreated', {
@@ -118,8 +147,35 @@ export const PageOperationCell = ({
       category: 'doc',
       page: 'doc library',
     });
+    mixpanel.track('PageOptionClick', {
+      page: 'doc library',
+      segment: 'all doc',
+      module: 'all doc',
+      control: 'duplicate',
+    });
   }, [duplicate, page.id]);
 
+  const handleRemoveFromAllowList = useCallback(() => {
+    if (onRemoveFromAllowList) {
+      onRemoveFromAllowList();
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: 'all doc',
+        module: 'all doc',
+        control: 'remove special filter',
+      });
+    }
+  }, [onRemoveFromAllowList]);
+
+  const handleStopPropagation = useCallback((event: BaseSyntheticEvent) => {
+    mixpanel.track('PageOptionClick', {
+      page: 'doc library',
+      segment: 'all doc',
+      module: 'all doc',
+      control: 'open in new tab',
+    });
+    stopPropagationWithoutPrevent(event);
+  }, []);
   const OperationMenu = (
     <>
       {page.isPublic && (
@@ -132,7 +188,7 @@ export const PageOperationCell = ({
       )}
       {isInAllowList && (
         <MenuItem
-          onClick={onRemoveFromAllowList}
+          onClick={handleRemoveFromAllowList}
           preFix={
             <MenuIcon>
               <FilterMinusIcon />
@@ -143,7 +199,7 @@ export const PageOperationCell = ({
         </MenuItem>
       )}
       <MenuItem
-        onClick={onToggleFavoritePage}
+        onClick={onToggleFavoritePageOption}
         preFix={
           <MenuIcon>
             {favourite ? (
@@ -187,7 +243,7 @@ export const PageOperationCell = ({
       {!environment.isDesktop && (
         <Link
           className={styles.clearLinkStyle}
-          onClick={stopPropagationWithoutPrevent}
+          onClick={handleStopPropagation}
           to={`/workspace/${currentWorkspace.id}/${page.id}`}
           target={'_blank'}
           rel="noopener noreferrer"

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
@@ -277,6 +277,12 @@ const ExplorerCollectionNodeChildren = ({
   const handleRemoveFromAllowList = useCallback(
     (id: string) => {
       collectionService.deletePageFromCollection(collection.id, id);
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: 'collections',
+        module: 'collections',
+        control: 'remove special filter',
+      });
       toast(t['com.affine.collection.removePage.success']());
     },
     [collection.id, collectionService, t]
@@ -302,6 +308,7 @@ const ExplorerCollectionNodeChildren = ({
     <ExplorerDocNode
       key={doc.id}
       docId={doc.id}
+      explorerTreesType="collections"
       reorderable={false}
       location={{
         at: 'explorer:collection:filtered-docs',

diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/doc/index.tsx
@@ -27,7 +27,7 @@ import {
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import { ExplorerTreeNode, type ExplorerTreeNodeDropEffect } from '../../tree';
-import type { GenericExplorerNode } from '../types';
+import type { ExplorerTreesType, GenericExplorerNode } from '../types';
 import { Empty } from './empty';
 import { useExplorerDocNodeOperations } from './operations';
 import * as styles from './styles.css';
@@ -41,9 +41,11 @@ export const ExplorerDocNode = ({
   canDrop,
   operations: additionalOperations,
   dropEffect,
+  explorerTreesType,
 }: {
   docId: string;
   isLinked?: boolean;
+  explorerTreesType?: ExplorerTreesType;
 } & GenericExplorerNode) => {
   const t = useI18n();
   const { docsSearchService, docsService, globalContextService } = useServices({
@@ -121,8 +123,16 @@ export const ExplorerDocNode = ({
         module: 'doc',
         control: 'doc rename',
       });
+      if (explorerTreesType) {
+        mixpanel.track('PageOptionClick', {
+          page: 'doc library',
+          segment: explorerTreesType,
+          module: explorerTreesType,
+          control: 'rename',
+        });
+      }
     },
-    [docId, docsService]
+    [docId, docsService, explorerTreesType]
   );
 
   const handleDropOnDoc = useAsyncCallback(

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
@@ -23,13 +23,15 @@ import { DocsService, useLiveData, useServices } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 import type { NodeOperation } from '../../tree/types';
+import type { ExplorerTreesType } from '../types';
 
 export const useExplorerDocNodeOperations = (
   docId: string,
   options: {
     openInfoModal: () => void;
     openNodeCollapsed: () => void;
-  }
+  },
+  explorerTreesType?: ExplorerTreesType
 ): NodeOperation[] => {
   const t = useI18n();
   const { appSettings } = useAppSettingHelper();
@@ -49,10 +51,30 @@ export const useExplorerDocNodeOperations = (
     }, [docId, compatibleFavoriteItemsAdapter])
   );
 
+  const handleOpenInfoModal = useCallback(() => {
+    if (explorerTreesType) {
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: explorerTreesType,
+        module: explorerTreesType,
+        control: 'view info',
+      });
+    }
+    options.openInfoModal();
+  }, [explorerTreesType, options]);
+
   const handleMoveToTrash = useCallback(() => {
     if (!docRecord) {
       return;
     }
+    if (explorerTreesType) {
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: explorerTreesType,
+        module: explorerTreesType,
+        control: 'move to trash',
+      });
+    }
     openConfirmModal({
       title: t['com.affine.moveToTrash.title'](),
       description: t['com.affine.moveToTrash.confirmModal.description']({
@@ -73,7 +95,7 @@ export const useExplorerDocNodeOperations = (
         toast(t['com.affine.toastMessage.movedTrash']());
       },
     });
-  }, [docRecord, openConfirmModal, t]);
+  }, [docRecord, explorerTreesType, openConfirmModal, t]);
 
   const handleOpenInSplitView = useCallback(() => {
     workbenchService.workbench.openDoc(docId, {
@@ -84,7 +106,15 @@ export const useExplorerDocNodeOperations = (
       module: 'doc',
       control: 'open in split view button',
     });
-  }, [docId, workbenchService]);
+    if (explorerTreesType) {
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: explorerTreesType,
+        module: explorerTreesType,
+        control: 'open in split view',
+      });
+    }
+  }, [docId, explorerTreesType, workbenchService.workbench]);
 
   const handleAddLinkedPage = useAsyncCallback(async () => {
     const newDoc = docsService.createDoc();
@@ -100,9 +130,23 @@ export const useExplorerDocNodeOperations = (
       module: 'doc',
       control: 'add linked doc button',
     });
+    if (explorerTreesType) {
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: explorerTreesType,
+        module: explorerTreesType,
+        control: 'add linked doc',
+      });
+    }
     workbenchService.workbench.openDoc(newDoc.id);
     options.openNodeCollapsed();
-  }, [docId, options, docsService, workbenchService.workbench]);
+  }, [
+    docsService,
+    docId,
+    explorerTreesType,
+    workbenchService.workbench,
+    options,
+  ]);
 
   const handleToggleFavoriteDoc = useCallback(() => {
     compatibleFavoriteItemsAdapter.toggle(docId, 'doc');
@@ -113,7 +157,15 @@ export const useExplorerDocNodeOperations = (
       type: 'doc',
       id: docId,
     });
-  }, [docId, compatibleFavoriteItemsAdapter]);
+    if (explorerTreesType) {
+      mixpanel.track('PageOptionClick', {
+        page: 'doc library',
+        segment: explorerTreesType,
+        module: explorerTreesType,
+        control: favorite ? 'remove from favourites' : 'add to favourites',
+      });
+    }
+  }, [compatibleFavoriteItemsAdapter, docId, explorerTreesType, favorite]);
 
   return useMemo(
     () => [
@@ -128,7 +180,7 @@ export const useExplorerDocNodeOperations = (
                       <InformationIcon />
                     </MenuIcon>
                   }
-                  onClick={options.openInfoModal}
+                  onClick={handleOpenInfoModal}
                 >
                   {t['com.affine.page-properties.page-info.view']()}
                 </MenuItem>
@@ -220,8 +272,8 @@ export const useExplorerDocNodeOperations = (
       handleAddLinkedPage,
       handleMoveToTrash,
       handleOpenInSplitView,
+      handleOpenInfoModal,
       handleToggleFavoriteDoc,
-      options.openInfoModal,
       t,
     ]
   );

diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
@@ -111,6 +111,7 @@ export const ExplorerFolderNode = ({
           canDrop={canDrop}
           dropEffect={dropEffect}
           operations={additionalOperations}
+          explorerTreesType="organize"
         />
       )
     );

diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/tag/index.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/tag/index.tsx
@@ -213,6 +213,7 @@ export const ExplorerTagNodeDocs = ({ tag }: { tag: Tag }) => {
       location={{
         at: 'explorer:tags:docs',
       }}
+      explorerTreesType="tags"
     />
   ));
 };
diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/types.ts b/packages/frontend/core/src/modules/explorer/views/nodes/types.ts
@@ -47,3 +47,11 @@ export interface GenericExplorerNode {
    */
   dropEffect?: ExplorerTreeNodeDropEffect;
 }
+
+export type ExplorerTreesType =
+  | 'favourites'
+  | 'organize'
+  | 'migration-favourites'
+  | 'old-favourites'
+  | 'collections'
+  | 'tags';
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx
@@ -316,6 +316,7 @@ const ExplorerFavoriteNode = ({
       onDrop={handleOnChildrenDrop}
       dropEffect={dropEffect}
       canDrop={canDrop}
+      explorerTreesType="favourites"
     />
   ) : favorite.type === 'tag' ? (
     <ExplorerTagNode

diff --git a/packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/migration-favorites/index.tsx
@@ -158,6 +158,7 @@ const ExplorerMigrationFavoriteNode = ({
       location={childLocation}
       reorderable={false}
       canDrop={false}
+      explorerTreesType="migration-favourites"
     />
   ) : (
     <ExplorerCollectionNode

diff --git a/packages/frontend/core/src/modules/explorer/views/sections/old-favorites/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/old-favorites/index.tsx
@@ -250,6 +250,7 @@ const ExplorerFavoriteNode = ({
       onDrop={handleOnChildrenDrop}
       dropEffect={dropEffect}
       canDrop={canDrop}
+      explorerTreesType="old-favourites"
     />
   ) : (
     <ExplorerCollectionNode