refactor: work items events

packages/constants/src/event-tracker/core.ts

@@ -177,8 +177,55 @@ export const WORK_ITEM_TRACKER_EVENTS = {
   delete: "work_item_deleted",
   archive: "work_item_archived",
   restore: "work_item_restored",
+  attachment: {
+    add: "work_item_attachment_added",
+    remove: "work_item_attachment_removed",
+  },
+  sub_issue: {
+    update: "sub_issue_updated",
+    remove: "sub_issue_removed",
+    delete: "sub_issue_deleted",
+  },
+  draft: {
+    create: "draft_work_item_created",
+  }
 };
 
+export const WORK_ITEM_TRACKER_ELEMENTS = {
+  HEADER_ADD_BUTTON: {
+    WORK_ITEMS: "work_items_header_add_work_item_button",
+    PROJECT_VIEW: "project_view_header_add_work_item_button",
+    CYCLE: "cycle_header_add_work_item_button",
+    MODULE: "module_header_add_work_item_button",
+  },
+  COMMAND_PALETTE_ADD_ITEM: "command_palette_add_work_item_item",
+  EMPTY_STATE_ADD_BUTTON: {
+    WORK_ITEMS: "work_items_empty_state_add_work_item_button",
+    PROJECT_VIEW: "project_view_empty_state_add_work_item_button",
+    CYCLE: "cycle_empty_state_add_work_item_button",
+    MODULE: "module_empty_state_add_work_item_button",
+    GLOBAL_VIEW: "global_view_empty_state_add_work_item_button",
+  },
+  QUICK_ACTIONS: {
+    WORK_ITEMS: "work_items_quick_actions",
+    PROJECT_VIEW: "project_view_work_items_quick_actions",
+    CYCLE: "cycle_work_items_quick_actions",
+    MODULE: "module_work_items_quick_actions",
+    GLOBAL_VIEW: "global_view_work_items_quick_actions",
+    ARCHIVED: "archived_work_items_quick_actions",
+    DRAFT: "draft_work_items_quick_actions",
+  },
+  CONTEXT_MENU: {
+    WORK_ITEMS: "work_items_context_menu",
+    PROJECT_VIEW: "project_view_context_menu",
+    CYCLE: "cycle_context_menu",
+    MODULE: "module_context_menu",
+    GLOBAL_VIEW: "global_view_context_menu",
+    ARCHIVED: "archived_context_menu",
+    DRAFT: "draft_context_menu",
+  },
+} as const;
+
 export const STATE_TRACKER_EVENTS = {
   create: "state_created",
   update: "state_updated",

web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -14,6 +14,7 @@ import {
   EUserPermissionsLevel,
   EProjectFeatureKey,
   ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
@@ -34,7 +35,6 @@ import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelect
 import {
   useCommandPalette,
   useCycle,
-  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -68,7 +68,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCycleIds, getCycleById } = useCycle();
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { currentProjectDetails, loader } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
@@ -263,9 +262,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                   <Button
                     className="h-full self-start"
                     onClick={() => {
-                      setTrackElement("Cycle work items page");
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
+                    data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.CYCLE}
                     size="sm"
                   >
                     {t("issue.add.label")}

web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx

@@ -14,6 +14,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
   EProjectFeatureKey,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import {
   ICustomSearchSelectOption,
@@ -31,7 +32,6 @@ import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelect
 import { ModuleQuickActions } from "@/components/modules";
 // hooks
 import {
-  useEventTracker,
   useLabel,
   useMember,
   useModule,
@@ -66,7 +66,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
   const { projectModuleIds, getModuleById } = useModule();
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { currentProjectDetails, loader } = useProject();
   const { projectLabels } = useLabel();
@@ -259,9 +258,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               <Button
                 className="hidden sm:flex"
                 onClick={() => {
-                  setTrackElement("Module work items page");
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
+                data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.MODULE}
                 size="sm"
               >
                 Add work item

web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx

@@ -14,6 +14,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
   EProjectFeatureKey,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 // types
 import {
@@ -30,11 +31,9 @@ import { SwitcherIcon, SwitcherLabel } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
 import { ViewQuickActions } from "@/components/views";
-// helpers
 // hooks
 import {
   useCommandPalette,
-  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -57,7 +56,6 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const { setTrackElement } = useEventTracker();
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
 
@@ -258,9 +256,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         {canUserCreateIssue ? (
           <Button
             onClick={() => {
-              setTrackElement("PROJECT_VIEW_PAGE_HEADER");
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
             }}
+            data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.PROJECT_VIEW}
             size="sm"
           >
             Add work item

web/ce/components/issues/header.tsx

@@ -11,6 +11,7 @@ import {
   EUserPermissionsLevel,
   SPACE_BASE_PATH,
   SPACE_BASE_URL,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 // plane constants
 import { useTranslation } from "@plane/i18n";
@@ -22,7 +23,7 @@ import { CountChip } from "@/components/common";
 import HeaderFilters from "@/components/issues/filters";
 // helpers
 // hooks
-import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
+import { useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -43,7 +44,6 @@ export const IssuesHeader = observer(() => {
   const { currentProjectDetails, loader } = useProject();
 
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { isMobile } = usePlatformOS();
 
@@ -105,9 +105,9 @@ export const IssuesHeader = observer(() => {
         {canUserCreateIssue ? (
           <Button
             onClick={() => {
-              setTrackElement("Project work items page");
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
+            data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.WORK_ITEMS}
             size="sm"
           >
             <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>

web/ce/helpers/command-palette.ts

@@ -1,5 +1,11 @@
 // types
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_PAGE_TRACKER_ELEMENTS, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import {
+  CYCLE_TRACKER_ELEMENTS,
+  MODULE_TRACKER_ELEMENTS,
+  PROJECT_PAGE_TRACKER_ELEMENTS,
+  PROJECT_TRACKER_ELEMENTS,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
 // store
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -12,7 +18,10 @@ export const getGlobalShortcutsList: () => TCommandPaletteActionList = () => {
     c: {
       title: "Create a new work item",
       description: "Create a new work item in the current project",
-      action: () => toggleCreateIssueModal(true),
+      action: () => {
+        toggleCreateIssueModal(true);
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
+      },
     },
   };
 };

web/core/components/inbox/content/issue-root.tsx

@@ -2,7 +2,6 @@
 
 import { Dispatch, SetStateAction, useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 // plane imports
 import { EInboxIssueSource, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
@@ -22,7 +21,8 @@ import {
 } from "@/components/issues";
 // helpers
 // hooks
-import { useEventTracker, useIssueDetail, useMember, useProject, useProjectInbox, useUser } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useIssueDetail, useMember, useProject, useProjectInbox, useUser } from "@/hooks/store";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // store types
 import { DeDupeIssuePopoverRoot } from "@/plane-web/components/de-dupe";
@@ -45,8 +45,6 @@ type Props = {
 
 export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props;
-  // navigation
-  const pathname = usePathname();
   // refs
   const editorRef = useRef<EditorRefApi>(null);
   // store hooks
@@ -57,8 +55,6 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const { removeIssue, archiveIssue } = useIssueDetail();
   // reload confirmation
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
-  // event tracker
-  const { captureIssueEvent } = useEventTracker();
 
   useEffect(() => {
     if (isSubmitting === "submitted") {
@@ -104,10 +100,9 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             type: TOAST_TYPE.SUCCESS,
             message: "Work item deleted successfully",
           });
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: _issueId, state: "SUCCESS", element: "Work item detail page" },
-            path: pathname,
+            payload: { id: _issueId },
           });
         } catch (error) {
           console.log("Error in deleting work item:", error);
@@ -116,56 +111,46 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             type: TOAST_TYPE.ERROR,
             message: "Work item delete failed",
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: _issueId, state: "FAILED", element: "Work item detail page" },
-            path: pathname,
+            payload: { id: _issueId },
+            error: error as Error,
           });
         }
       },
       update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial<TIssue>) => {
         try {
           await inboxIssue.updateIssue(data);
-          captureIssueEvent({
-            eventName: "Inbox work item updated",
-            payload: { ...data, state: "SUCCESS", element: "Inbox" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+          captureSuccess({
+            eventName: WORK_ITEM_TRACKER_EVENTS.update,
+            payload: { id: _issueId },
           });
-        } catch {
+        } catch (error) {
           setToast({
             title: "Work item update failed",
             type: TOAST_TYPE.ERROR,
             message: "Work item update failed",
           });
-          captureIssueEvent({
-            eventName: "Inbox work item updated",
-            payload: { state: "SUCCESS", element: "Inbox" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.update,
+            payload: { id: _issueId },
+            error: error as Error,
           });
         }
       },
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "SUCCESS", element: "Work item details page" },
-            path: pathname,
+            payload: { id: issueId },
           });
         } catch (error) {
           console.log("Error in archiving issue:", error);
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "FAILED", element: "Work item details page" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },