From f5cc076ca6b666f0544949df4f1de634ec7b728f Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Mon, 30 Jun 2025 19:56:47 +0530 Subject: [PATCH 1/7] chore: update event tracker helper types --- web/helpers/event-tracker.helper.ts | 41 +++++++++++++---------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/web/helpers/event-tracker.helper.ts b/web/helpers/event-tracker.helper.ts index 175c6458a7a..f48187849a8 100644 --- a/web/helpers/event-tracker.helper.ts +++ b/web/helpers/event-tracker.helper.ts @@ -6,7 +6,7 @@ export type TElementContext = Record; export type TEventContext = Record; export type TInteractionType = "clicked" | "viewed" | "hovered"; -type TTrackElementParams = { +type TCaptureElementParams = { elementName: TTrackingElement; interaction_type: TInteractionType; context?: TElementContext; @@ -19,7 +19,7 @@ type TTrackElementParams = { * @param element - Generic UI element type * @param context - Context about where and why the interaction happened */ -const captureElement = (params: TTrackElementParams) => { +const captureElement = (params: TCaptureElementParams) => { const { elementName, interaction_type, context } = params; if (!posthog) return; @@ -34,43 +34,42 @@ const captureElement = (params: TTrackElementParams) => { posthog.capture(elementEvent, payload); }; -type TTrackClickParams = Omit; +type TCaptureClickParams = Omit; /** * Track click events * @param element - The element that was clicked * @param context - Additional context */ -export const captureClick = (params: TTrackClickParams) => { +export const captureClick = (params: TCaptureClickParams) => { captureElement({ ...params, interaction_type: "clicked" }); }; -type TTrackViewParams = Omit; +type TCaptureViewParams = Omit; /** * Track view events * @param element - The element that was viewed * @param context - Additional context */ -export const captureView = (params: TTrackViewParams) => { +export const captureView = (params: TCaptureViewParams) => { captureElement({ ...params, interaction_type: "viewed" }); }; -type TTrackHoverParams = Omit; +type TCaptureHoverParams = Omit; /** * Track hover events * @param element - The element that was hovered * @param context - Additional context */ -export const captureHover = (params: TTrackHoverParams) => { +export const captureHover = (params: TCaptureHoverParams) => { captureElement({ ...params, interaction_type: "hovered" }); }; -type TTrackEventParams = { +type TCaptureEventParams = { eventName: string; payload?: Record; context?: TEventContext; state: TEventState; }; - /** * Track business events (outcomes, state changes, etc.) * This helps understand business metrics and conversion rates @@ -80,7 +79,7 @@ type TTrackEventParams = { * @param payload - Event-specific data * @param context - Additional context */ -const captureEvent = (params: TTrackEventParams) => { +const captureEvent = (params: TCaptureEventParams) => { const { eventName, payload, context, state } = params; if (!posthog) return; @@ -94,21 +93,20 @@ const captureEvent = (params: TTrackEventParams) => { posthog.capture(eventName, finalPayload); }; -type TTrackSuccessParams = Omit; +type TCaptureSuccessParams = Omit; /** * Track success events * @param eventName - The name of the event * @param payload - Additional payload * @param context - Additional context */ -export const captureSuccess = (params: TTrackSuccessParams) => { +export const captureSuccess = (params: TCaptureSuccessParams) => { captureEvent({ ...params, state: "SUCCESS" }); }; -type TTrackErrorParams = Omit & { - error: Error | string; +type TCaptureErrorParams = Omit & { + error?: Error | string; }; - /** * Track error events * @param eventName - The name of the event @@ -116,21 +114,20 @@ type TTrackErrorParams = Omit & { * @param payload - Additional payload * @param context - Additional context */ -export const captureError = (params: TTrackErrorParams) => { +export const captureError = (params: TCaptureErrorParams) => { captureEvent({ ...params, state: "ERROR", payload: { ...params.payload, error: params.error } }); }; -type TTrackElementAndEventParams = { - element: Omit; - event: TTrackEventParams; +type TCaptureElementAndEventParams = { + element: Omit; + event: TCaptureEventParams; }; - /** * Track both element interaction and business event together * @param element - The element that was interacted with * @param event - The business event that was triggered */ -export const captureElementAndEvent = (params: TTrackElementAndEventParams) => { +export const captureElementAndEvent = (params: TCaptureElementAndEventParams) => { const { element, event } = params; // Track the element interaction first captureElement({ ...element, interaction_type: "clicked" }); From b95d4c2e11611cb09e3ff7dff2059bb190db4975 Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Mon, 30 Jun 2025 19:59:21 +0530 Subject: [PATCH 2/7] refactor: cycle events --- packages/constants/src/event-tracker/core.ts | 17 +---- .../[projectId]/cycles/(list)/header.tsx | 7 +- .../[projectId]/cycles/(list)/page.tsx | 7 +- .../actions/project-actions.tsx | 21 ++++-- .../command-palette/command-palette.tsx | 6 +- .../analytics-sidebar/sidebar-header.tsx | 75 ++++++++----------- .../cycles/archived-cycles/modal.tsx | 20 ++++- web/core/components/cycles/delete-modal.tsx | 21 ++++-- web/core/components/cycles/form.tsx | 6 +- .../cycles/list/cycle-list-item-action.tsx | 65 ++++++++++------ web/core/components/cycles/modal.tsx | 35 +++++---- web/core/components/cycles/quick-actions.tsx | 41 +++++++--- web/core/store/event-tracker.store.ts | 18 ----- 13 files changed, 189 insertions(+), 150 deletions(-) diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts index bbb1319ffbf..73f5054f4fc 100644 --- a/packages/constants/src/event-tracker/core.ts +++ b/packages/constants/src/event-tracker/core.ts @@ -35,20 +35,6 @@ export const getProjectEventPayload = (payload: any) => ({ element: payload.element, }); -export const getCycleEventPayload = (payload: any) => ({ - workspace_id: payload.workspace_id, - project_id: payload.project, - cycle_id: payload.id, - created_at: payload.created_at, - updated_at: payload.updated_at, - start_date: payload.start_date, - target_date: payload.target_date, - cycle_status: payload.status, - changed_properties: payload.changed_properties, - state: payload.state, - element: payload.element, -}); - export const getModuleEventPayload = (payload: any) => ({ workspace_id: payload.workspace_id, project_id: payload.project, @@ -154,6 +140,7 @@ export const TRACKING_ELEMENTS = { RIGHT_SIDEBAR: "right_sidebar", QUICK_ACTIONS: "quick_actions", CONTEXT_MENU: "context_menu", + LIST_ITEM: "list_item", } as const; export type TTrackingElement = (typeof TRACKING_ELEMENTS)[keyof typeof TRACKING_ELEMENTS]; @@ -175,6 +162,8 @@ export const CYCLE_TRACKER_EVENTS = { delete: "cycle_deleted", favorite: "cycle_favorited", unfavorite: "cycle_unfavorited", + archive: "cycle_archived", + restore: "cycle_restored", }; export const MODULE_TRACKER_EVENTS = { diff --git a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx index 41dfde747cf..02c55fb5a04 100644 --- a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx +++ b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx @@ -4,13 +4,13 @@ import { FC } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; // ui -import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; +import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel, TRACKING_ELEMENTS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { Breadcrumbs, Button, Header } from "@plane/ui"; // components import { CyclesViewHeader } from "@/components/cycles"; // hooks -import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store"; +import { useCommandPalette, useProject, useUserPermissions } from "@/hooks/store"; import { useAppRouter } from "@/hooks/use-app-router"; // plane web import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common"; @@ -23,7 +23,6 @@ export const CyclesListHeader: FC = observer(() => { // store hooks const { toggleCreateCycleModal } = useCommandPalette(); - const { setTrackElement } = useEventTracker(); const { allowPermissions } = useUserPermissions(); const { currentProjectDetails, loader } = useProject(); const { t } = useTranslation(); @@ -51,8 +50,8 @@ export const CyclesListHeader: FC = observer(() => {