chore(editor): add tracking events to attachments (#12317)

Closes: [BS-3483](https://linear.app/affine-design/issue/BS-3483/event-tracking-loading-block)

blocksuite/affine/blocks/attachment/src/attachment-block.ts

@@ -17,7 +17,9 @@ import {
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
+  DocModeProvider,
   FileSizeLimitProvider,
+  TelemetryProvider,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
@@ -187,6 +189,22 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
           @click=${(event: MouseEvent) => {
             event.stopPropagation();
             onOverFileSize?.();
+
+            {
+              const mode =
+                this.std.get(DocModeProvider).getEditorMode() ?? 'page';
+              const segment = mode === 'page' ? 'doc' : 'whiteboard';
+              this.std
+                .getOptional(TelemetryProvider)
+                ?.track('AttachmentUpgradedEvent', {
+                  segment,
+                  page: `${segment} editor`,
+                  module: 'attachment',
+                  control: 'upgrade',
+                  category: 'card',
+                  type: this.model.props.name.split('.').pop() ?? '',
+                });
+            }
           }}
         >
           ${UpgradeIcon()} Upgrade
@@ -202,6 +220,22 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         @click=${(event: MouseEvent) => {
           event.stopPropagation();
           this.refreshData();
+
+          {
+            const mode =
+              this.std.get(DocModeProvider).getEditorMode() ?? 'page';
+            const segment = mode === 'page' ? 'doc' : 'whiteboard';
+            this.std
+              .getOptional(TelemetryProvider)
+              ?.track('AttachmentReloadedEvent', {
+                segment,
+                page: `${segment} editor`,
+                module: 'attachment',
+                control: 'reload',
+                category: 'card',
+                type: this.model.props.name.split('.').pop() ?? '',
+              });
+          }
         }}
       >
         ${ResetIcon()} Reload

blocksuite/affine/blocks/attachment/src/configs/toolbar.ts

@@ -264,6 +264,12 @@ const builtinToolbarConfig = {
       run(ctx) {
         const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
         block?.reload();
+
+        ctx.track('AttachmentReloadedEvent', {
+          ...trackBaseProps,
+          control: 'reload',
+          type: block?.model.props.name.split('.').pop() ?? '',
+        });
       },
     },
     {

blocksuite/affine/blocks/attachment/src/utils.ts

@@ -130,7 +130,7 @@ async function buildPropsWith(
     std.getOptional(TelemetryProvider)?.track('AttachmentUploadedEvent', {
       page: `${mode} editor`,
       module: 'attachment',
-      segment: 'attachment',
+      segment: mode,
       control: 'uploader',
       type,
       category,

blocksuite/affine/shared/src/services/telemetry-service/telemetry-service.ts

@@ -6,6 +6,9 @@ import type { LinkToolbarEvents } from './link.js';
 import type { NoteEvents } from './note.js';
 import type { SlashMenuEvents } from './slash-menu.js';
 import type {
+  AttachmentReloadedEvent,
+  AttachmentReloadedEventInToolbar,
+  AttachmentUpgradedEvent,
   AttachmentUploadedEvent,
   BlockCreationEvent,
   DocCreatedEvent,
@@ -31,6 +34,10 @@ export type TelemetryEventMap = OutDatabaseAllEvents &
     CanvasElementUpdated: ElementUpdatedEvent;
     EdgelessElementLocked: ElementLockEvent;
     ExpandedAndCollapsed: MindMapCollapseEvent;
+    AttachmentReloadedEvent:
+      | AttachmentReloadedEvent
+      | AttachmentReloadedEventInToolbar;
+    AttachmentUpgradedEvent: AttachmentUpgradedEvent;
     AttachmentUploadedEvent: AttachmentUploadedEvent;
     BlockCreated: BlockCreationEvent;
     EdgelessToolPicked: EdgelessToolPickedEvent;

blocksuite/affine/shared/src/services/telemetry-service/types.ts

@@ -61,9 +61,36 @@ export interface MindMapCollapseEvent extends TelemetryEvent {
   type: 'expand' | 'collapse';
 }
 
+export interface AttachmentReloadedEvent extends TelemetryEvent {
+  page: 'doc editor' | 'whiteboard editor';
+  segment: 'doc' | 'whiteboard';
+  module: 'attachment';
+  control: 'reload';
+  category: 'card' | 'embed';
+  type: string; // file type
+}
+
+export interface AttachmentReloadedEventInToolbar extends TelemetryEvent {
+  page: 'doc editor' | 'whiteboard editor';
+  segment: 'doc' | 'whiteboard';
+  module: 'toolbar';
+  control: 'reload';
+  category: 'attachment';
+  type: string; // file type
+}
+
+export interface AttachmentUpgradedEvent extends TelemetryEvent {
+  page: 'doc editor' | 'whiteboard editor';
+  segment: 'doc' | 'whiteboard';
+  module: 'attachment';
+  control: 'upgrade';
+  category: 'card' | 'embed';
+  type: string; // file type
+}
+
 export interface AttachmentUploadedEvent extends TelemetryEvent {
   page: 'doc editor' | 'whiteboard editor';
-  segment: 'attachment';
+  segment: 'doc' | 'whiteboard';
   module: 'attachment';
   control: 'uploader';
   type: string; // file type