chore: added project-views related events

web/components/headers/project-views.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // components
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@@ -24,6 +24,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
+  const { setTrackElement } = useEventTracker();
 
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -75,7 +76,10 @@ export const ProjectViewsHeader: React.FC = observer(() => {
                 variant="primary"
                 size="sm"
                 prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
-                onClick={() => toggleCreateViewModal(true)}
+                onClick={() => {
+                  setTrackElement("Views page");
+                  toggleCreateViewModal(true);
+                }}
               >
                 Create View
               </Button>

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

@@ -2,14 +2,16 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import isEqual from "lodash/isEqual";
 // hooks
-import { useIssues, useLabel, useProjectState, useProjectView } from "hooks/store";
+import { useEventTracker, useIssues, useLabel, useProjectState, useProjectView } from "hooks/store";
 // components
 import { AppliedFiltersList } from "components/issues";
 // ui
 import { Button } from "@plane/ui";
 // types
 import { IIssueFilterOptions } from "@plane/types";
+// constants
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { VIEW_UPDATED } from "constants/event-tracker";
 
 export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   // router
@@ -26,6 +28,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const { projectLabels } = useLabel();
   const { projectStates } = useProjectState();
   const { viewMap, updateView } = useProjectView();
+  const { captureEvent } = useEventTracker();
   // derived values
   const viewDetails = viewId ? viewMap[viewId.toString()] : null;
   const userFilters = issueFilters?.filters;
@@ -87,6 +90,13 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
       filters: {
         ...(appliedFilters ?? {}),
       },
+    }).then((res) => {
+      captureEvent(VIEW_UPDATED, {
+        view_id: res.id,
+        filters: res.filters,
+        element: "View Navbar",
+        state: "SUCCESS",
+      });
     });
   };
 

web/components/views/delete-view-modal.tsx

@@ -4,12 +4,13 @@ import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useProjectView } from "hooks/store";
+import { useProjectView, useEventTracker } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // types
 import { IProjectView } from "@plane/types";
+import { VIEW_DELETED } from "constants/event-tracker";
 
 type Props = {
   data: IProjectView;
@@ -26,6 +27,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { deleteView } = useProjectView();
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -42,20 +44,29 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
     await deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
         handleClose();
-
+        captureEvent(VIEW_DELETED, {
+          view_id: data.id,
+          element: "Views page",
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View deleted successfully.",
         });
       })
-      .catch(() =>
+      .catch(() => {
+        captureEvent(VIEW_DELETED, {
+          view_id: data.id,
+          element: "Views page",
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be deleted. Please try again.",
-        })
+        });
-      )
+      })
       .finally(() => {
         setIsDeleteLoading(false);
       });

web/components/views/modal.tsx

@@ -1,13 +1,16 @@
 import { FC, Fragment } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useProjectView } from "hooks/store";
+import { useEventTracker, useProjectView } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ProjectViewForm } from "components/views";
 // types
 import { IProjectView } from "@plane/types";
+// constants
+import { VIEW_CREATED, VIEW_UPDATED } from "constants/event-tracker";
 
 type Props = {
   data?: IProjectView | null;
@@ -20,8 +23,12 @@ type Props = {
 
 export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
   const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
+  // router
+  const router = useRouter();
+  const { cycleId, moduleId, viewId } = router.query;
   // store hooks
   const { createView, updateView } = useProjectView();
+  const { captureEvent, trackElement } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -31,33 +38,64 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
 
   const handleCreateView = async (payload: IProjectView) => {
     await createView(workspaceSlug, projectId, payload)
-      .then(() => {
+      .then((res) => {
         handleClose();
+        captureEvent(VIEW_CREATED, {
+          view_id: res.id,
+          filters: res.filters,
+          element_id: cycleId ?? moduleId ?? viewId ?? projectId,
+          element: trackElement
+            ? trackElement
+            : cycleId
+            ? "Cycle issues page"
+            : moduleId
+            ? "Module issues page"
+            : viewId
+            ? "View issues page"
+            : "Project issues page",
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View created successfully.",
         });
       })
-      .catch(() =>
+      .catch(() => {
+        captureEvent(VIEW_CREATED, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Something went wrong. Please try again.",
-        })
+        });
-      );
+      });
   };
 
   const handleUpdateView = async (payload: IProjectView) => {
     await updateView(workspaceSlug, projectId, data?.id as string, payload)
-      .then(() => handleClose())
+      .then((res) => {
-      .catch((err) =>
+        captureEvent(VIEW_UPDATED, {
+          view_id: res.id,
+          filters: res.filters,
+          element: "Views page",
+          state: "SUCCESS",
+        });
+        handleClose();
+      })
+      .catch((err) => {
+        captureEvent(VIEW_UPDATED, {
+          view_id: data?.id,
+          element: "Views page",
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err.detail ?? "Something went wrong. Please try again.",
-        })
+        });
-      );
+      });
   };
 
   const handleFormSubmit = async (formData: IProjectView) => {

web/components/views/view-list-item.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react";
 // hooks
-import { useProjectView, useUser } from "hooks/store";
+import { useEventTracker, useProjectView, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views";
@@ -17,6 +17,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 import { IProjectView } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
+import { VIEW_FAVORITED, VIEW_UNFAVORITED } from "constants/event-tracker";
 
 type Props = {
   view: IProjectView;
@@ -37,17 +38,30 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { addViewToFavorites, removeViewFromFavorites } = useProjectView();
+  const { captureEvent } = useEventTracker();
 
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !projectId) return;
 
-    addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+    addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id).then(() => {
+      captureEvent(VIEW_FAVORITED, {
+        view_id: view.id,
+        element: "Views page",
+        state: "SUCCESS",
+      });
+    });
   };
 
   const handleRemoveFromFavorites = () => {
     if (!workspaceSlug || !projectId) return;
 
-    removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+    removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id).then(() => {
+      captureEvent(VIEW_UNFAVORITED, {
+        view_id: view.id,
+        element: "Views page",
+        state: "SUCCESS",
+      });
+    });
   };
 
   const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {

web/components/views/views-list.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { Search } from "lucide-react";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useProjectView, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProjectView, useUser } from "hooks/store";
 // components
 import { ProjectViewListItem } from "components/views";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
@@ -28,6 +28,7 @@ export const ProjectViewsList = observer(() => {
     currentUser,
   } = useUser();
   const { projectViewIds, getViewById, loader } = useProjectView();
+  const { setTrackElement } = useEventTracker();
 
   if (loader || !projectViewIds) return <ViewListLoader />;
 
@@ -73,7 +74,10 @@ export const ProjectViewsList = observer(() => {
           }}
           primaryButton={{
             text: VIEW_EMPTY_STATE_DETAILS["project-views"].primaryButton.text,
-            onClick: () => toggleCreateViewModal(true),
+            onClick: () => {
+              setTrackElement("Views empty state");
+              toggleCreateViewModal(true);
+            },
           }}
           size="lg"
           disabled={!isEditingAllowed}

web/constants/event-tracker.ts

@@ -165,6 +165,12 @@ export const MODULE_UNFAVORITED = "Module unfavorited";
 export const MODULE_LINK_CREATED = "Module link created";
 export const MODULE_LINK_UPDATED = "Module link updated";
 export const MODULE_LINK_DELETED = "Module link deleted";
+// Project View Events
+export const VIEW_CREATED = "View created";
+export const VIEW_UPDATED = "View updated";
+export const VIEW_DELETED = "View deleted";
+export const VIEW_FAVORITED = "View favorited";
+export const VIEW_UNFAVORITED = "View unfavorited";
 // Issue Events
 export const ISSUE_CREATED = "Issue created";
 export const ISSUE_UPDATED = "Issue updated";