chore: tracking events for app tabs header

toeverything · Aug 7, 2024 · 3298e1e · 3298e1e
1 parent ff68efb
commit 3298e1e
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 3 deletions.
diff --git a/packages/frontend/core/src/mixpanel/events.ts b/packages/frontend/core/src/mixpanel/events.ts
@@ -18,6 +18,14 @@ type NavigationEvents =
   | 'openInSplitView'
   | 'switchTab'
   | 'switchSplitView'
+  | 'separateTabs'
+  | 'closeTab'
+  | 'pinTab'
+  | 'unpinTab'
+  | 'refreshTab'
+  | 'moveTab'
+  | 'closeAllTabs'
+  | 'closeOtherTabs'
   | 'navigate'
   | 'goBack'
   | 'goForward'
@@ -229,6 +237,22 @@ const PageEvents = {
       storage: ['viewPlans'],
       aiAction: ['viewPlans'],
     },
+    appTabsHeader: {
+      tabs: [
+        'openInNewTab',
+        'openInSplitView',
+        'pinTab',
+        'unpinTab',
+        'moveTab',
+        'separateTabs',
+        'switchSplitView',
+        'switchTab',
+        'closeTab',
+        'refreshTab',
+        'closeAllTabs',
+        'closeOtherTabs',
+      ],
+    },
     header: {
       actions: [
         'createDoc',
@@ -342,6 +366,7 @@ export type EventArgs = {
   orderOrganizeItem: OrganizeItemArgs;
   openInNewTab: { type: OrganizeItemType };
   openInSplitView: { type: OrganizeItemType };
+  closeTab: { control: 'x button' | 'context-menu' | 'mid click' };
   toggleFavorite: OrganizeItemArgs & { on: boolean };
   createDoc: { mode?: 'edgeless' | 'page' };
   switchPageMode: { mode: 'edgeless' | 'page' };

diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
@@ -14,6 +14,7 @@ import { appSidebarWidthAtom } from '@affine/core/components/app-sidebar/index.j
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
+import { track } from '@affine/core/mixpanel';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { apis, events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
@@ -82,27 +83,68 @@ const WorkbenchTab = ({
   const activeViewIndex = workbench.activeViewIndex ?? 0;
   const onContextMenu = useAsyncCallback(
     async (viewIdx: number) => {
-      await tabsHeaderService.showContextMenu?.(workbench.id, viewIdx);
+      const action = await tabsHeaderService.showContextMenu?.(
+        workbench.id,
+        viewIdx
+      );
+      switch (action?.type) {
+        case 'open-in-split-view': {
+          track.$.appTabsHeader.tabs.openInSplitView();
+          break;
+        }
+        case 'separate-view': {
+          track.$.appTabsHeader.tabs.separateTabs();
+          break;
+        }
+        case 'pin-tab': {
+          if (action.payload.shouldPin) {
+            track.$.appTabsHeader.tabs.pinTab();
+          } else {
+            track.$.appTabsHeader.tabs.unpinTab();
+          }
+          break;
+        }
+        // fixme: when close tab the view may already be gc'ed
+        case 'close-tab': {
+          track.$.appTabsHeader.tabs.closeTab({
+            control: 'context-menu',
+          });
+          break;
+        }
+        default:
+          break;
+      }
     },
     [tabsHeaderService, workbench.id]
   );
   const onActivateView = useAsyncCallback(
     async (viewIdx: number) => {
       await tabsHeaderService.activateView?.(workbench.id, viewIdx);
+      if (tabActive) {
+        track.$.appTabsHeader.tabs.switchSplitView();
+      } else {
+        track.$.appTabsHeader.tabs.switchTab();
+      }
     },
-    [tabsHeaderService, workbench.id]
+    [tabActive, tabsHeaderService, workbench.id]
   );
   const handleAuxClick: MouseEventHandler = useCatchEventCallback(
     async e => {
       if (e.button === 1) {
         await tabsHeaderService.closeTab?.(workbench.id);
+        track.$.appTabsHeader.tabs.closeTab({
+          control: 'mid click',
+        });
       }
     },
     [tabsHeaderService, workbench.id]
   );
 
   const handleCloseTab = useCatchEventCallback(async () => {
     await tabsHeaderService.closeTab?.(workbench.id);
+    track.$.appTabsHeader.tabs.closeTab({
+      control: 'x button',
+    });
   }, [tabsHeaderService, workbench.id]);
 
   const { dropTargetRef, closestEdge } = useDropTarget<AffineDNDData>(
@@ -243,6 +285,7 @@ export const AppTabsHeader = ({
 
   const onAddTab = useAsyncCallback(async () => {
     await tabsHeaderService.onAddTab?.();
+    track.$.appTabsHeader.tabs.openInNewTab();
   }, [tabsHeaderService]);
 
   const onToggleRightSidebar = useAsyncCallback(async () => {
@@ -268,6 +311,7 @@ export const AppTabsHeader = ({
         if (targetId === data.source.data.from.tabId) {
           return;
         }
+        track.$.appTabsHeader.tabs.moveTab();
         return await tabsHeaderService.moveTab?.(
           data.source.data.from.tabId,
           targetId,
@@ -276,6 +320,9 @@ export const AppTabsHeader = ({
       }
 
       if (data.source.data.entity?.type === 'doc') {
+        track.$.appTabsHeader.tabs.openInNewTab({
+          type: 'doc',
+        });
         return await tabsHeaderService.onAddDocTab?.(
           data.source.data.entity.id,
           targetId,
@@ -284,6 +331,9 @@ export const AppTabsHeader = ({
       }
 
       if (data.source.data.entity?.type === 'tag') {
+        track.$.appTabsHeader.tabs.openInNewTab({
+          type: 'tag',
+        });
         return await tabsHeaderService.onAddTagTab?.(
           data.source.data.entity.id,
           targetId,
@@ -292,6 +342,9 @@ export const AppTabsHeader = ({
       }
 
       if (data.source.data.entity?.type === 'collection') {
+        track.$.appTabsHeader.tabs.openInNewTab({
+          type: 'collection',
+        });
         return await tabsHeaderService.onAddCollectionTab?.(
           data.source.data.entity.id,
           targetId,

diff --git a/packages/frontend/electron/src/main/windows-manager/context-menu.ts b/packages/frontend/electron/src/main/windows-manager/context-menu.ts
@@ -5,6 +5,7 @@ import {
   addTab,
   closeTab,
   reloadView,
+  type TabAction,
   WebContentViewsManager,
 } from './tab-views';
 
@@ -15,6 +16,8 @@ export const showTabContextMenu = async (tabId: string, viewIndex: number) => {
     return;
   }
 
+  const { resolve, promise } = Promise.withResolvers<TabAction | null>();
+
   const template: Parameters<typeof Menu.buildFromTemplate>[0] = [
     tabMeta.pinned
       ? {
@@ -90,4 +93,22 @@ export const showTabContextMenu = async (tabId: string, viewIndex: number) => {
   ];
   const menu = Menu.buildFromTemplate(template);
   menu.popup();
+  // eslint-disable-next-line prefer-const
+  let unsub: (() => void) | undefined;
+  const subscription = WebContentViewsManager.instance.tabAction$.subscribe(
+    action => {
+      resolve(action);
+      unsub?.();
+    }
+  );
+  menu.on('menu-will-close', () => {
+    setTimeout(() => {
+      resolve(null);
+      unsub?.();
+    });
+  });
+  unsub = () => {
+    subscription.unsubscribe();
+  };
+  return promise;
 };
diff --git a/packages/frontend/electron/src/main/windows-manager/tab-views.ts b/packages/frontend/electron/src/main/windows-manager/tab-views.ts
@@ -108,7 +108,7 @@ type OpenInSplitViewAction = {
   };
 };
 
-type TabAction =
+export type TabAction =
   | AddTabAction
   | CloseTabAction
   | PinTabAction