feat(atomic): added logic to send analytics when opening user actions (…

…#4512) ## [SFINT-5757](https://coveord.atlassian.net/browse/SFINT-5757) In this PR: - adding the logic log analytics when opening the user actions timeline feature in the insight panel. - adding the property `excludedCustomActions` in the Atomic Insight User Actions components and passing to the Headless controller to allow the atomic user actions component to benefit from the already existing feature in the Headless user actions controller that allows filtering out unwanted events. Demo showing the analytics being sent with `legacy` analytics: https://github.com/user-attachments/assets/d66437d7-131f-4b42-bfbb-11ad0a6162ec [SFINT-5757]: https://coveord.atlassian.net/browse/SFINT-5757?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
coveo · Oct 11, 2024 · 06bea5a · 06bea5a
1 parent 435e2c2
commit 06bea5a
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -1583,6 +1583,10 @@ export namespace Components {
         "withDatePicker": boolean;
     }
     interface AtomicInsightUserActionsModal {
+        /**
+          * The names of custom events to exclude.
+         */
+        "excludedCustomActions": string[];
         "isOpen": boolean;
         "openButton"?: HTMLElement;
         /**
@@ -1613,6 +1617,10 @@ export namespace Components {
      * @example <AtomicInsightUserActionsTimeline userId={'123'} caseCreationDate={'2024-08-15T10:00:00Z'} />
      */
     interface AtomicInsightUserActionsTimeline {
+        /**
+          * The names of custom events to exclude.
+         */
+        "excludedCustomActions": string[];
         /**
           * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
          */
@@ -1623,6 +1631,10 @@ export namespace Components {
         "userId": string;
     }
     interface AtomicInsightUserActionsToggle {
+        /**
+          * The names of custom events to exclude.
+         */
+        "excludedCustomActions": string[];
         /**
           * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
          */
@@ -7479,6 +7491,10 @@ declare namespace LocalJSX {
         "withDatePicker"?: boolean;
     }
     interface AtomicInsightUserActionsModal {
+        /**
+          * The names of custom events to exclude.
+         */
+        "excludedCustomActions"?: string[];
         "isOpen"?: boolean;
         "openButton"?: HTMLElement;
         /**
@@ -7509,6 +7525,10 @@ declare namespace LocalJSX {
      * @example <AtomicInsightUserActionsTimeline userId={'123'} caseCreationDate={'2024-08-15T10:00:00Z'} />
      */
     interface AtomicInsightUserActionsTimeline {
+        /**
+          * The names of custom events to exclude.
+         */
+        "excludedCustomActions"?: string[];
         /**
           * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
          */
@@ -7519,6 +7539,10 @@ declare namespace LocalJSX {
         "userId": string;
     }
     interface AtomicInsightUserActionsToggle {
+        /**
+          * The names of custom events to exclude.
+         */
+        "excludedCustomActions"?: string[];
         /**
           * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
          */

diff --git a/...ight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx b/...ight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx
@@ -43,6 +43,10 @@ export class AtomicInsightUserActionsModal
    * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
    */
   @Prop() public ticketCreationDateTime!: string;
+  /**
+   * The names of custom events to exclude.
+   */
+  @Prop() public excludedCustomActions: string[] = [];
 
   public componentDidLoad() {
     this.host.style.display = '';
@@ -115,6 +119,7 @@ export class AtomicInsightUserActionsModal
           <atomic-insight-user-actions-timeline
             userId={this.userId}
             ticketCreationDateTime={this.ticketCreationDateTime}
+            excludedCustomActions={this.excludedCustomActions}
             class="flex-1"
           ></atomic-insight-user-actions-timeline>
         </aside>

diff --git a/...ser-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx b/...ser-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx
@@ -52,10 +52,17 @@ export class AtomicInsightUserActionsTimeline
    * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
    */
   @Prop() public ticketCreationDateTime!: string;
+  /**
+   * The names of custom events to exclude.
+   */
+  @Prop() public excludedCustomActions: string[] = [];
 
   public initialize() {
     this.userActions = buildInsightUserActions(this.bindings.engine, {
-      options: {ticketCreationDate: this.ticketCreationDateTime},
+      options: {
+        ticketCreationDate: this.ticketCreationDateTime,
+        excludedCustomActions: this.excludedCustomActions,
+      },
     });
 
     this.userActions.fetchUserActions(this.userId);

diff --git a/...ht/user-actions/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.tsx b/...ht/user-actions/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.tsx
@@ -1,6 +1,15 @@
 import {Component, h, Prop, Element, State} from '@stencil/core';
+import {
+  buildInsightUserActions,
+  InsightUserActions,
+  InsightUserActionsState,
+} from '../..';
 import Clockicon from '../../../../images/clock.svg';
-import {InitializeBindings} from '../../../../utils/initialization-utils';
+import {
+  BindStateToController,
+  InitializableComponent,
+  InitializeBindings,
+} from '../../../../utils/initialization-utils';
 import {IconButton} from '../../../common/iconButton';
 import {InsightBindings} from '../../atomic-insight-interface/atomic-insight-interface';
 
@@ -13,9 +22,15 @@ import {InsightBindings} from '../../atomic-insight-interface/atomic-insight-int
   styleUrl: 'atomic-insight-user-actions-toggle.pcss',
   shadow: true,
 })
-export class AtomicInsightUserActionsToggle {
+export class AtomicInsightUserActionsToggle
+  implements InitializableComponent<InsightBindings>
+{
   @Element() public host!: HTMLElement;
   @InitializeBindings() public bindings!: InsightBindings;
+  public userActions!: InsightUserActions;
+  @BindStateToController('userActions')
+  @State()
+  public userActionsState!: InsightUserActionsState;
   @State() public error!: Error;
 
   /**
@@ -26,12 +41,26 @@ export class AtomicInsightUserActionsToggle {
    * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
    */
   @Prop() public ticketCreationDateTime!: string;
+  /**
+   * The names of custom events to exclude.
+   */
+  @Prop() public excludedCustomActions: string[] = [];
+
+  public initialize() {
+    this.userActions = buildInsightUserActions(this.bindings.engine, {
+      options: {
+        ticketCreationDate: this.ticketCreationDateTime,
+        excludedCustomActions: this.excludedCustomActions,
+      },
+    });
+  }
 
   private buttonRef?: HTMLButtonElement;
   private modalRef?: HTMLAtomicInsightUserActionsModalElement;
 
   private enableModal() {
     this.modalRef && (this.modalRef.isOpen = true);
+    this.userActions.logOpenUserActions();
   }
 
   private loadModal() {
@@ -45,6 +74,7 @@ export class AtomicInsightUserActionsToggle {
     this.modalRef.openButton = this.buttonRef;
     this.modalRef.userId = this.userId;
     this.modalRef.ticketCreationDateTime = this.ticketCreationDateTime;
+    this.modalRef.excludedCustomActions = this.excludedCustomActions;
   }
 
   public render() {