From 06bea5af4357a46e35d529f016bedab17874a816 Mon Sep 17 00:00:00 2001 From: mmitiche <86681870+mmitiche@users.noreply.github.com> Date: Fri, 11 Oct 2024 13:55:28 -0400 Subject: [PATCH] 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 --- packages/atomic/src/components.d.ts | 24 +++++++++++++ .../atomic-insight-user-actions-modal.tsx | 5 +++ .../atomic-insight-user-actions-timeline.tsx | 9 ++++- .../atomic-insight-user-actions-toggle.tsx | 34 +++++++++++++++++-- 4 files changed, 69 insertions(+), 3 deletions(-) diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index bd0673dc8f4..9c0fab20869 100644 --- 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 */ 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 */ 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/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx index 4a9f7ec90fd..d808a7ad521 100644 --- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx +++ b/packages/atomic/src/components/insight/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 diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx index 72b3790e2fe..1136461670a 100644 --- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx +++ b/packages/atomic/src/components/insight/user-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/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.tsx index 7e1cf99af31..178b2402d91 100644 --- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.tsx +++ b/packages/atomic/src/components/insight/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 +{ @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() {