chore: issue-open from sidebar events added

web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // mobx store
-import { useIssues } from "hooks/store";
+import { useEventTracker, useIssues } from "hooks/store";
 // components
 import {
   ArchivedIssueListLayout,
@@ -21,12 +21,14 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { captureIssuesListOpenedEvent } = useEventTracker();
 
   useSWR(
     workspaceSlug && projectId ? `ARCHIVED_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
     async () => {
       if (workspaceSlug && projectId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
+        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

web/components/issues/issue-layouts/roots/cycle-layout-root.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import size from "lodash/size";
 // hooks
-import { useCycle, useIssues } from "hooks/store";
+import { useCycle, useEventTracker, useIssues } from "hooks/store";
 // components
 import {
   CycleAppliedFiltersRoot,
@@ -29,6 +29,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
   // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   const { getCycleById } = useCycle();
+  const { captureIssuesListOpenedEvent } = useEventTracker();
   // state
   const [transferIssuesModal, setTransferIssuesModal] = useState(false);
 
@@ -39,6 +40,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
     async () => {
       if (workspaceSlug && projectId && cycleId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // hooks
-import { useIssues } from "hooks/store";
+import { useEventTracker, useIssues } from "hooks/store";
 // components
 import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
 import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
@@ -21,12 +21,14 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
+  const { captureIssuesListOpenedEvent } = useEventTracker();
 
   useSWR(
     workspaceSlug && projectId ? `DRAFT_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
     async () => {
       if (workspaceSlug && projectId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
+        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

web/components/issues/issue-layouts/roots/module-layout-root.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import size from "lodash/size";
 // mobx store
-import { useIssues } from "hooks/store";
+import { useEventTracker, useIssues } from "hooks/store";
 // components
 import {
   IssuePeekOverview,
@@ -28,6 +28,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId, moduleId } = router.query;
   // hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+  const { captureIssuesListOpenedEvent } = useEventTracker();
 
   useSWR(
     workspaceSlug && projectId && moduleId
@@ -36,6 +37,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     async () => {
       if (workspaceSlug && projectId && moduleId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
+        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -16,7 +16,7 @@ import {
 // ui
 import { Spinner } from "@plane/ui";
 // hooks
-import { useIssues } from "hooks/store";
+import { useEventTracker, useIssues } from "hooks/store";
 // helpers
 import { ActiveLoader } from "components/ui";
 // constants
@@ -28,10 +28,12 @@ export const ProjectLayoutRoot: FC = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+  const { captureIssuesListOpenedEvent } = useEventTracker();
 
   useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null, async () => {
     if (workspaceSlug && projectId) {
       await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
+      captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
       await issues?.fetchIssues(
         workspaceSlug.toString(),
         projectId.toString(),

web/components/issues/issue-layouts/roots/project-view-layout-root.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // mobx store
-import { useIssues } from "hooks/store";
+import { useEventTracker, useIssues } from "hooks/store";
 // components
 import {
   IssuePeekOverview,
@@ -28,12 +28,14 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId, viewId } = router.query;
   // hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  const { captureIssuesListOpenedEvent } = useEventTracker();
 
   useSWR(
     workspaceSlug && projectId && viewId ? `PROJECT_VIEW_ISSUES_${workspaceSlug}_${projectId}_${viewId}` : null,
     async () => {
       if (workspaceSlug && projectId && viewId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), viewId.toString());
+        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

web/components/project/sidebar-list-item.tsx

@@ -145,6 +145,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     if (window.innerWidth < 768) {
       themeStore.toggleMobileSidebar();
     }
+    setTrackElement('Project sidebar');
   };
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));

web/components/project/sidebar-list.tsx

@@ -139,7 +139,7 @@ export const ProjectSidebarList: FC = observer(() => {
                               <button
                                 className="opacity-0 group-hover:opacity-100"
                                 onClick={() => {
-                                  setTrackElement("APP_SIDEBAR_FAVORITES_BLOCK");
+                                  setTrackElement("Sidebar");
                                   setIsFavoriteProjectCreate(true);
                                   setIsProjectModalOpen(true);
                                 }}

web/constants/event-tracker.ts

@@ -21,7 +21,6 @@ export const getWorkspaceEventPayload = (payload: any) => ({
 });
 
 export const getProjectEventPayload = (payload: any) => ({
-  workspace_id: payload.workspace_id,
   project_id: payload.id,
   identifier: payload.identifier,
   project_visibility: payload.network == 2 ? "Public" : "Private",
@@ -34,8 +33,6 @@ export const getProjectEventPayload = (payload: any) => ({
 });
 
 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,
@@ -48,8 +45,6 @@ export const getCycleEventPayload = (payload: any) => ({
 });
 
 export const getModuleEventPayload = (payload: any) => ({
-  workspace_id: payload.workspace_id,
-  project_id: payload.project,
   module_id: payload.id,
   created_at: payload.created_at,
   updated_at: payload.updated_at,
@@ -64,8 +59,6 @@ export const getModuleEventPayload = (payload: any) => ({
 });
 
 export const getPageEventPayload = (payload: any) => ({
-  workspace_id: payload.workspace_id,
-  project_id: payload.project,
   created_at: payload.created_at,
   updated_at: payload.updated_at,
   access: payload.access === 0 ? "Public" : "Private",
@@ -109,19 +102,7 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
     eventPayload = {
       ...eventPayload,
       ...updates,
-      updated_from: props.path?.includes("workspace-views")
+      updated_from: elementFromPath(path),
-        ? "All views"
-        : props.path?.includes("cycles")
-        ? "Cycle"
-        : props.path?.includes("modules")
-        ? "Module"
-        : props.path?.includes("views")
-        ? "Project view"
-        : props.path?.includes("inbox")
-        ? "Inbox"
-        : props.path?.includes("draft")
-        ? "Draft"
-        : "Project",
     };
   }
   return eventPayload;
@@ -129,8 +110,6 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
 
 export const getProjectStateEventPayload = (payload: any) => {
   return {
-    workspace_id: payload.workspace_id,
-    project_id: payload.id,
     state_id: payload.id,
     created_at: payload.created_at,
     updated_at: payload.updated_at,
@@ -142,6 +121,25 @@ export const getProjectStateEventPayload = (payload: any) => {
   };
 };
 
+export const getIssuesListOpenedPayload = (payload: any) => ({
+  element: elementFromPath(payload.path),
+  type: payload.project_id ? "Project" : "Workspace",
+  layout: payload?.displayFilters?.layout,
+  filters: payload?.filters,
+  display_properties: payload?.displayProperties,
+});
+
+const elementFromPath = (path?: string) => {
+  if (path?.includes("workspace-views")) return "Workspace view";
+  if (path?.includes("cycles")) return "Cycle";
+  if (path?.includes("modules")) return "Module";
+  if (path?.includes("views")) return "Project view";
+  if (path?.includes("inbox")) return "Inbox";
+  if (path?.includes("draft")) return "Draft";
+  if (path?.includes("archived")) return "Archive";
+  return "Project";
+};
+
 // Workspace crud Events
 export const WORKSPACE_CREATED = "Workspace created";
 export const WORKSPACE_UPDATED = "Workspace updated";
@@ -175,6 +173,8 @@ export const VIEW_UNFAVORITED = "View unfavorited";
 export const ISSUE_CREATED = "Issue created";
 export const ISSUE_UPDATED = "Issue updated";
 export const ISSUE_DELETED = "Issue deleted";
+// Issue Checkout Events
+export const ISSUES_LIST_OPENED = "Issues list opened";
 export const ISSUE_OPENED = "Issue opened";
 // Project State Events
 export const STATE_CREATED = "State created";
@@ -235,7 +235,7 @@ export const NOTIFICATION_SNOOZED = "Notification snoozed";
 export const NOTIFICATION_READ = "Notification marked read";
 export const UNREAD_NOTIFICATIONS = "Unread notifications viewed";
 export const NOTIFICATIONS_READ = "All notifications marked read";
-export const SNOOZED_NOTIFICATIONS= "Snoozed notifications viewed";
+export const SNOOZED_NOTIFICATIONS = "Snoozed notifications viewed";
 export const ARCHIVED_NOTIFICATIONS = "Archived notifications viewed";
 // Groups
 export const GROUP_WORKSPACE = "Workspace_metrics";

web/store/event-tracker.store.ts

@@ -17,6 +17,8 @@ import {
   getProjectStateEventPayload,
   getWorkspaceEventPayload,
   getPageEventPayload,
+  ISSUES_LIST_OPENED,
+  getIssuesListOpenedPayload,
 } from "constants/event-tracker";
 
 export interface IEventTrackerStore {
@@ -37,6 +39,7 @@ export interface IEventTrackerStore {
   capturePageEvent: (props: EventProps) => void;
   captureIssueEvent: (props: IssueEventProps) => void;
   captureProjectStateEvent: (props: EventProps) => void;
+  captureIssuesListOpenedEvent: (path: string, filters: any) => void;
 }
 
 export class EventTrackerStore implements IEventTrackerStore {
@@ -55,6 +58,12 @@ export class EventTrackerStore implements IEventTrackerStore {
       captureEvent: action,
       captureProjectEvent: action,
       captureCycleEvent: action,
+      captureModuleEvent: action,
+      capturePageEvent: action,
+      captureIssueEvent: action,
+      captureProjectStateEvent: action,
+      captureIssuesListOpenedEvent: action,
+      joinWorkspaceMetricGroup: action,
     });
     // store
     this.rootStore = _rootStore;
@@ -133,10 +142,11 @@ export class EventTrackerStore implements IEventTrackerStore {
     if (eventName === WORKSPACE_CREATED && payload.state == "SUCCESS") {
       this.joinWorkspaceMetricGroup(payload.id);
     }
-    const eventPayload: any = getWorkspaceEventPayload({
+    const eventPayload: any = {
-      ...payload,
+      ...getWorkspaceEventPayload(payload),
+      ...this.getRequiredProperties,
       element: payload.element ?? this.trackElement,
-    });
+    };
     posthog?.capture(eventName, eventPayload);
     this.setTrackElement(undefined);
   };
@@ -147,11 +157,11 @@ export class EventTrackerStore implements IEventTrackerStore {
    */
   captureProjectEvent = (props: EventProps) => {
     const { eventName, payload } = props;
-    const eventPayload: any = getProjectEventPayload({
+    const eventPayload: any = {
+      ...getProjectEventPayload(payload),
       ...this.getRequiredProperties,
-      ...payload,
       element: payload.element ?? this.trackElement,
-    });
+    };
     posthog?.capture(eventName, eventPayload);
     this.setTrackElement(undefined);
   };
@@ -162,11 +172,11 @@ export class EventTrackerStore implements IEventTrackerStore {
    */
   captureCycleEvent = (props: EventProps) => {
     const { eventName, payload } = props;
-    const eventPayload: any = getCycleEventPayload({
+    const eventPayload: any = {
+      ...getCycleEventPayload(payload),
       ...this.getRequiredProperties,
-      ...payload,
       element: payload.element ?? this.trackElement,
-    });
+    };
     posthog?.capture(eventName, eventPayload);
     this.setTrackElement(undefined);
   };
@@ -177,11 +187,11 @@ export class EventTrackerStore implements IEventTrackerStore {
    */
   captureModuleEvent = (props: EventProps) => {
     const { eventName, payload } = props;
-    const eventPayload: any = getModuleEventPayload({
+    const eventPayload: any = {
+      ...getModuleEventPayload(payload),
       ...this.getRequiredProperties,
-      ...payload,
       element: payload.element ?? this.trackElement,
-    });
+    };
     posthog?.capture(eventName, eventPayload);
     this.setTrackElement(undefined);
   };
@@ -192,11 +202,11 @@ export class EventTrackerStore implements IEventTrackerStore {
    */
   capturePageEvent = (props: EventProps) => {
     const { eventName, payload } = props;
-    const eventPayload: any = getPageEventPayload({
+    const eventPayload: any = {
+      ...getPageEventPayload(payload),
       ...this.getRequiredProperties,
-      ...payload,
       element: payload.element ?? this.trackElement,
-    });
+    };
     posthog?.capture(eventName, eventPayload);
     this.setTrackElement(undefined);
   };
@@ -223,12 +233,30 @@ export class EventTrackerStore implements IEventTrackerStore {
    */
   captureProjectStateEvent = (props: EventProps) => {
     const { eventName, payload } = props;
-    const eventPayload: any = getProjectStateEventPayload({
+    const eventPayload: any = {
+      ...getProjectStateEventPayload(payload),
       ...this.getRequiredProperties,
-      ...payload,
       element: payload.element ?? this.trackElement,
-    });
+    };
+
     posthog?.capture(eventName, eventPayload);
     this.setTrackElement(undefined);
   };
+
+  /**
+   * @description: Captures the event whenever the issues list is opened.
+   * @param {string} path
+   * @param {any} filters
+   */
+  captureIssuesListOpenedEvent = (path: string, filters: any) => {
+    const eventPayload = {
+      ...getIssuesListOpenedPayload({
+        path: path,
+        filters: filters,
+      }),
+      ...this.getRequiredProperties,
+    };
+    posthog?.capture(ISSUES_LIST_OPENED, eventPayload);
+    this.setTrackElement(undefined);
+  };
 }