added events for project-views

web/components/headers/project-views.tsx

@@ -9,7 +9,8 @@ import { ProjectLogo } from "@/components/project";
 import { ViewListHeader } from "@/components/views";
 import { EUserProjectRoles } from "@/constants/project";
 // constants
-import { useCommandPalette, useProject, useUser } from "@/hooks/store";
+import { E_VIEWS } from "@/constants/event-tracker";
+import { useCommandPalette, useProject, useUser, useEventTracker } from "@/hooks/store";
 
 export const ProjectViewsHeader: React.FC = observer(() => {
   // router
@@ -21,6 +22,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);
@@ -60,7 +62,14 @@ export const ProjectViewsHeader: React.FC = observer(() => {
           <div className="flex flex-shrink-0 items-center gap-2">
             <ViewListHeader />
             <div>
-              <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => {
+                  setTrackElement(E_VIEWS);
+                  toggleCreateViewModal(true);
+                }}
+              >
                 Add View
               </Button>
             </div>

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

@@ -3,14 +3,14 @@ import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IIssueFilterOptions } from "@plane/types";
-// hooks
 import { Button } from "@plane/ui";
-import { AppliedFiltersList } from "@/components/issues";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { useIssues, useLabel, useProjectState, useProjectView } from "@/hooks/store";
 // components
-// ui
+import { AppliedFiltersList } from "@/components/issues";
-// types
+// constants
+import { VIEW_UPDATED } from "constants/event-tracker";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+// hooks
+import { useIssues, useLabel, useProjectState, useProjectView, useEventTracker } from "@/hooks/store";
 
 export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   // router
@@ -23,6 +23,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;

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

@@ -7,8 +7,10 @@ import { IProjectView } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { AlertModalCore } from "@/components/core";
+// constants
+import { E_VIEWS, VIEW_DELETED } from "constants/event-tracker";
 // hooks
-import { useProjectView } from "@/hooks/store";
+import { useProjectView, useEventTracker } from "@/hooks/store";
 
 type Props = {
   data: IProjectView;
@@ -25,6 +27,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { deleteView } = useProjectView();
+  const { captureEvent } = useEventTracker();
 
   const handleClose = () => {
     onClose();
@@ -39,20 +42,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: E_VIEWS,
+          state: "SUCCESS",
+        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "View deleted successfully.",
         });
       })
-      .catch(() =>
+      .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "View could not be deleted. Please try again.",
-        })
+        });
-      )
+        captureEvent(VIEW_DELETED, {
+          view_id: data.id,
+          element: E_VIEWS,
+          state: "FAILED",
+        });
+      })
       .finally(() => {
         setIsDeleteLoading(false);
       });

web/components/views/modal.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 // types
 import { IProjectView } from "@plane/types";
 // ui
@@ -7,8 +8,10 @@ import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { ProjectViewForm } from "@/components/views";
+// constants
+import { VIEW_CREATED, VIEW_UPDATED } from "constants/event-tracker";
 // hooks
-import { useProjectView } from "@/hooks/store";
+import { useProjectView, useEventTracker } from "@/hooks/store";
 
 type Props = {
   data?: IProjectView | null;
@@ -21,8 +24,11 @@ type Props = {
 
 export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
   const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
+  // router
+  const router = useRouter();
   // store hooks
   const { createView, updateView } = useProjectView();
+  const { captureEvent, trackElement } = useEventTracker();
 
   const handleClose = () => {
     onClose();
@@ -30,33 +36,59 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
 
   const handleCreateView = async (payload: IProjectView) => {
     await createView(workspaceSlug, projectId, payload)
-      .then(() => {
+      .then((res) => {
         handleClose();
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "View created successfully.",
         });
+        captureEvent(VIEW_CREATED, {
+          view_id: res.id,
+          filters: res.filters,
+          // element_id: getElementFromPath(router.asPath),
+          // element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
+          state: "SUCCESS",
+        });
       })
-      .catch(() =>
+      .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
-        })
+        });
-      );
+        captureEvent(VIEW_CREATED, {
+          // element_id: getElementFromPath(router.asPath),
+          // element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
+          state: "FAILED",
+        });
+      });
   };
 
   const handleUpdateView = async (payload: IProjectView) => {
     await updateView(workspaceSlug, projectId, data?.id as string, payload)
-      .then(() => handleClose())
+      .then((res) => {
-      .catch((err) =>
+        handleClose();
+        captureEvent(VIEW_UPDATED, {
+          view_id: res.id,
+          filters: res.filters,
+          // element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
+          state: "SUCCESS",
+        });
+      })
+      .catch((err) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.detail ?? "Something went wrong. Please try again.",
-        })
+        });
-      );
+        captureEvent(VIEW_UPDATED, {
+          view_id: payload.id,
+          filters: payload.filters,
+          // element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
+          state: "FAILED",
+        });
+      });
   };
 
   const handleFormSubmit = async (formData: IProjectView) => {

web/components/views/quick-actions.tsx

@@ -8,12 +8,13 @@ import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from
 // components
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
 // constants
+import { E_VIEWS } from "@/constants/event-tracker";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useUser } from "@/hooks/store";
+import { useUser, useEventTracker } from "@/hooks/store";
 
 type Props = {
   parentRef: React.RefObject<HTMLElement>;
@@ -31,6 +32,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { setTrackElement } = useEventTracker();
   // auth
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
@@ -48,7 +50,10 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      action: () => setCreateUpdateViewModal(true),
+      action: () => {
+        setTrackElement(E_VIEWS);
+        setCreateUpdateViewModal(true);
+      },
       title: "Edit",
       icon: Pencil,
       shouldRender: isEditingAllowed,
@@ -67,7 +72,10 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
     },
     {
       key: "delete",
-      action: () => setDeleteViewModal(true),
+      action: () => {
+        setTrackElement(E_VIEWS);
+        setDeleteViewModal(true);
+      },
       title: "Delete",
       icon: Trash2,
       shouldRender: isEditingAllowed,

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

@@ -7,11 +7,12 @@ import { IProjectView } from "@plane/types";
 import { FavoriteStar } from "@/components/core";
 import { DeleteProjectViewModal, CreateUpdateProjectViewModal, ViewQuickActions } from "@/components/views";
 // constants
+import { E_VIEWS, VIEW_FAVORITED, VIEW_UNFAVORITED } from "constants/event-tracker";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useMember, useProjectView, useUser } from "@/hooks/store";
+import { useMember, useProjectView, useUser, useEventTracker } from "@/hooks/store";
 import { ButtonAvatars } from "../dropdowns/member/avatar";
 
 type Props = {
@@ -33,6 +34,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
   } = useUser();
   const { addViewToFavorites, removeViewFromFavorites } = useProjectView();
   const { getUserDetails } = useMember();
+  const { captureEvent } = useEventTracker();
 
   // derived values
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -43,13 +45,23 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
   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: E_VIEWS,
+      });
+    });
   };
 
   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: E_VIEWS,
+      });
+    });
   };
 
   const createdByDetails = view.created_by ? getUserDetails(view.created_by) : undefined;

web/components/views/views-list.tsx

@@ -6,13 +6,15 @@ import { ViewListLoader } from "@/components/ui";
 import { ProjectViewListItem } from "@/components/views";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
+import { E_VIEWS_EMPTY_STATE } from "@/constants/event-tracker";
 // hooks
-import { useCommandPalette, useProjectView } from "@/hooks/store";
+import { useCommandPalette, useProjectView, useEventTracker } from "@/hooks/store";
 
 export const ProjectViewsList = observer(() => {
   // store hooks
   const { toggleCreateViewModal } = useCommandPalette();
   const { projectViewIds, getViewById, loader, searchQuery } = useProjectView();
+  const { setTrackElement } = useEventTracker();
 
   if (loader || !projectViewIds) return <ViewListLoader />;
 
@@ -34,7 +36,13 @@ export const ProjectViewsList = observer(() => {
           </ListLayout>
         </div>
       ) : (
-        <EmptyState type={EmptyStateType.PROJECT_VIEW} primaryButtonOnClick={() => toggleCreateViewModal(true)} />
+        <EmptyState
+          type={EmptyStateType.PROJECT_VIEW}
+          primaryButtonOnClick={() => {
+            setTrackElement(E_VIEWS_EMPTY_STATE);
+            toggleCreateViewModal(true);
+          }}
+        />
       )}
     </>
   );

web/constants/event-tracker.ts

@@ -170,6 +170,12 @@ export const ISSUE_DELETED = "Issue deleted";
 export const ISSUE_ARCHIVED = "Issue archived";
 export const ISSUE_RESTORED = "Issue restored";
 export const ISSUE_OPENED = "Issue opened";
+// 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";
 // Project State Events
 export const STATE_CREATED = "State created";
 export const STATE_UPDATED = "State updated";
@@ -222,3 +228,7 @@ export const SNOOZED_NOTIFICATIONS = "Snoozed notifications viewed";
 export const ARCHIVED_NOTIFICATIONS = "Archived notifications viewed";
 // Groups
 export const GROUP_WORKSPACE = "Workspace_metrics";
+
+// Elements
+export const E_VIEWS = "Views page";
+export const E_VIEWS_EMPTY_STATE = "Views empty state";