chore: issues-list open event refactored

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

@@ -28,7 +28,11 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
     async () => {
       if (workspaceSlug && projectId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
-        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
+        captureIssuesListOpenedEvent({
+          path: router.asPath,
+          filters: issuesFilter?.issueFilters?.filters,
+          element_id: projectId,
+        });
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

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

@@ -40,7 +40,11 @@ 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);
+        captureIssuesListOpenedEvent({
+          path: router.asPath,
+          filters: issuesFilter?.issueFilters?.filters,
+          element_id: cycleId,
+        });
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

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

@@ -28,7 +28,11 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
     async () => {
       if (workspaceSlug && projectId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
-        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
+        captureIssuesListOpenedEvent({
+          path: router.asPath,
+          filters: issuesFilter?.issueFilters?.filters,
+          element_id: projectId,
+        });
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

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

@@ -37,7 +37,11 @@ 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);
+        captureIssuesListOpenedEvent({
+          path: router.asPath,
+          filters: issuesFilter?.issueFilters?.filters,
+          element_id: moduleId,
+        })
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

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

@@ -33,7 +33,11 @@ export const ProjectLayoutRoot: FC = observer(() => {
   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);
+      captureIssuesListOpenedEvent({
+        path: router.asPath,
+        filters: issuesFilter?.issueFilters?.filters,
+        element_id: projectId,
+      });
       await issues?.fetchIssues(
         workspaceSlug.toString(),
         projectId.toString(),

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

@@ -35,7 +35,11 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
     async () => {
       if (workspaceSlug && projectId && viewId) {
         await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), viewId.toString());
-        captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
+        captureIssuesListOpenedEvent({
+          path: router.asPath,
+          filters: issuesFilter?.issueFilters?.filters,
+          element_id: viewId,
+        });
         await issues?.fetchIssues(
           workspaceSlug.toString(),
           projectId.toString(),

web/constants/event-tracker.ts

@@ -123,6 +123,16 @@ export const getProjectStateEventPayload = (payload: any) => {
 
 export const getIssuesListOpenedPayload = (payload: any) => ({
   element: elementFromPath(payload.path),
+  element_id: payload.element_id,
+  type: payload.project_id ? "Project" : "Workspace",
+  layout: payload?.displayFilters?.layout,
+  filters: payload?.filters,
+  display_properties: payload?.displayProperties,
+});
+
+export const getIssuesFilterEventPayload = (payload: any) => ({
+  element: elementFromPath(payload.path),
+  element_id: payload.element_id, 
   type: payload.project_id ? "Project" : "Workspace",
   layout: payload?.displayFilters?.layout,
   filters: payload?.filters,
@@ -176,6 +186,10 @@ export const ISSUE_DELETED = "Issue deleted";
 // Issue Checkout Events
 export const ISSUES_LIST_OPENED = "Issues list opened";
 export const ISSUE_OPENED = "Issue opened";
+// Issues Filter Events
+export const FILTER_APPLIED = "Filter applied";
+export const FILTER_REMOVED = "Filter removed";
+export const FILTER_SEARCHED = "Filter searched";
 // Project State Events
 export const STATE_CREATED = "State created";
 export const STATE_UPDATED = "State updated";

web/store/event-tracker.store.ts

@@ -39,7 +39,7 @@ export interface IEventTrackerStore {
   capturePageEvent: (props: EventProps) => void;
   captureIssueEvent: (props: IssueEventProps) => void;
   captureProjectStateEvent: (props: EventProps) => void;
-  captureIssuesListOpenedEvent: (path: string, filters: any) => void;
+  captureIssuesListOpenedEvent: (payload: any) => void;
 }
 
 export class EventTrackerStore implements IEventTrackerStore {
@@ -248,12 +248,9 @@ export class EventTrackerStore implements IEventTrackerStore {
    * @param {string} path
    * @param {any} filters
    */
-  captureIssuesListOpenedEvent = (path: string, filters: any) => {
+  captureIssuesListOpenedEvent = (payload: any) => {
     const eventPayload = {
-      ...getIssuesListOpenedPayload({
+      ...getIssuesListOpenedPayload(payload),
-        path: path,
-        filters: filters,
-      }),
       ...this.getRequiredProperties,
     };
     posthog?.capture(ISSUES_LIST_OPENED, eventPayload);