fix(quality-insights): added improved event display

Author: egordidenko

src/abstract/managers/TelemetryManager.ts

@@ -95,8 +95,6 @@ export class TelemetryManager {
         EventType.FILE_UPLOAD_PROGRESS,
         EventType.FILE_UPLOAD_SUCCESS,
         EventType.FILE_UPLOAD_FAILED,
-        EventType.FILE_URL_CHANGED,
-        EventType.GROUP_CREATED,
       ].includes(type)
     ) {
       return true;
@@ -146,14 +144,12 @@ export class TelemetryManager {
    * Method to send telemetry event for Cloud Image Editor.
    */
   sendEventCloudImageEditor(e: MouseEvent, tabId: string, options: Record<string, unknown> = {}): void {
-    this.sendEvent({
-      payload: {
-        metadata: {
-          tabId,
-          node: (e.currentTarget as HTMLElement | null)?.tagName,
-          event: e.type,
-          ...options,
-        },
+    this._block.emit(EventType.ACTION_EVENT, {
+      metadata: {
+        tabId,
+        node: (e.currentTarget as HTMLElement | null)?.tagName,
+        event: e.type,
+        ...options,
       },
     });
   }

src/blocks/CameraSource/CameraSource.ts

@@ -5,6 +5,7 @@ import { deserializeCsv } from '../../utils/comma-separated';
 import { debounce } from '../../utils/debounce';
 import { stringToArray } from '../../utils/stringToArray';
 import { UploadSource } from '../../utils/UploadSource';
+import { EventType } from '../UploadCtxProvider/EventEmitter';
 import './camera-source.css';
 import { CameraSourceEvents, CameraSourceTypes } from './constants';
 
@@ -174,12 +175,28 @@ export class CameraSource extends UploaderBlock {
         this.historyBack();
       },
 
-      onShot: () => this._shot(),
+      onShot: () => {
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'shot-camera',
+            node: this.tagName,
+          },
+        });
+        this._shot();
+      },
 
       onRequestPermissions: () => this._capture(),
 
       /** General method for photo and video capture */
-      onStartCamera: () => this._chooseActionWithCamera(),
+      onStartCamera: () => {
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'start-camera',
+            node: this.tagName,
+          },
+        });
+        this._chooseActionWithCamera();
+      },
 
       onStartRecording: () => this._startRecording(),
 
@@ -189,9 +206,25 @@ export class CameraSource extends UploaderBlock {
 
       onToggleAudio: () => this._toggleEnableAudio(),
 
-      onRetake: () => this._retake(),
+      onRetake: () => {
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'retake-camera',
+            node: this.tagName,
+          },
+        });
+        this._retake();
+      },
 
-      onAccept: () => this._accept(),
+      onAccept: () => {
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'accept-camera',
+            node: this.tagName,
+          },
+        });
+        this._accept();
+      },
 
       onClickTab: (event: MouseEvent) => {
         const target = event.currentTarget as HTMLElement | null;

src/blocks/FileItem/FileItem.ts

@@ -13,6 +13,7 @@ import { parseShrink } from '../../utils/parseShrink';
 import { throttle } from '../../utils/throttle';
 import { ExternalUploadSource } from '../../utils/UploadSource';
 import './file-item.css';
+import { EventType } from '../UploadCtxProvider/EventEmitter';
 import { FileItemConfig } from './FileItemConfig';
 
 const FileItemState = Object.freeze({
@@ -84,12 +85,10 @@ export class FileItem extends FileItemConfig {
       state: FileItemState.IDLE,
       ariaLabelStatusFile: '',
       onEdit: this._withEntry((entry) => {
-        this.telemetryManager.sendEvent({
-          payload: {
-            metadata: {
-              event: 'edit-file',
-              node: this.tagName,
-            },
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'edit-file',
+            node: this.tagName,
           },
         });
         this.$['*currentActivityParams'] = {
@@ -99,12 +98,10 @@ export class FileItem extends FileItemConfig {
         this.$['*currentActivity'] = ActivityBlock.activities.CLOUD_IMG_EDIT;
       }),
       onRemove: () => {
-        this.telemetryManager.sendEvent({
-          payload: {
-            metadata: {
-              event: 'remove-file',
-              node: this.tagName,
-            },
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'remove-file',
+            node: this.tagName,
           },
         });
         this.uploadCollection.remove(this.$.uid);

src/blocks/UploadCtxProvider/EventEmitter.ts

@@ -8,6 +8,7 @@ const DEFAULT_DEBOUNCE_TIMEOUT = 20;
 export const InternalEventType = Object.freeze({
   INIT_SOLUTION: 'init-solution',
   CHANGE_CONFIG: 'change-config',
+  ACTION_EVENT: 'action-event',
 } as const);
 
 export const EventType = Object.freeze({
@@ -64,6 +65,9 @@ export type EventPayload = {
   [EventType.GROUP_CREATED]: OutputCollectionState<'success', 'has-group'>;
   [EventType.INIT_SOLUTION]: void;
   [EventType.CHANGE_CONFIG]: void;
+  [EventType.ACTION_EVENT]: {
+    metadata: Record<string, unknown>;
+  };
 };
 
 export class EventEmitter {

src/blocks/UploadList/UploadList.ts

@@ -38,6 +38,12 @@ export class UploadList extends UploaderBlock {
 
       hasFiles: false,
       onAdd: () => {
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'add-more',
+            node: this.tagName,
+          },
+        });
         this.api.initFlow(true);
       },
       onUpload: () => {
@@ -50,6 +56,12 @@ export class UploadList extends UploaderBlock {
         this.api.doneFlow();
       },
       onCancel: () => {
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'clear-all',
+            node: this.tagName,
+          },
+        });
         this.uploadCollection.clearAll();
       },
     } as any;

src/blocks/UrlSource/UrlSource.ts

@@ -2,6 +2,7 @@ import type { ActivityType } from '../../abstract/ActivityBlock';
 import { ActivityBlock } from '../../abstract/ActivityBlock';
 import { UploaderBlock } from '../../abstract/UploaderBlock';
 import { UploadSource } from '../../utils/UploadSource';
+import { EventType } from '../UploadCtxProvider/EventEmitter';
 import './url-source.css';
 
 type BaseInitState = InstanceType<typeof UploaderBlock>['init$'];
@@ -25,6 +26,12 @@ export class UrlSource extends UploaderBlock {
       importDisabled: true,
       onUpload: (event: Event) => {
         event.preventDefault();
+        this.emit(EventType.ACTION_EVENT, {
+          metadata: {
+            event: 'upload-from-url',
+            node: this.tagName,
+          },
+        });
 
         const url = this.ref.input['value'] as string;
         this.api.addFileFromUrl(url, { source: UploadSource.URL });