chore: module events updated

web/components/headers/modules-list.tsx

@@ -12,7 +12,13 @@ import { FiltersDropdown } from "@/components/issues";
 import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules";
 import { ProjectLogo } from "@/components/project";
 // constants
-import { E_MODULES } from "@/constants/event-tracker";
+import {
+  E_MODULES,
+  MODULES_FILTER_APPLIED,
+  MODULES_FILTER_REMOVED,
+  MODULES_LAYOUT_CHANGED,
+  MODULES_SORT_UPDATED,
+} from "@/constants/event-tracker";
 import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
@@ -30,7 +36,7 @@ export const ModulesListHeader: React.FC = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { toggleCreateModuleModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -57,7 +63,7 @@ export const ModulesListHeader: React.FC = observer(() => {
   const handleFilters = useCallback(
     (key: keyof TModuleFilters, value: string | string[]) => {
       if (!projectId) return;
-      const newValues = filters?.[key] ?? [];
+      const newValues = Array.from(filters?.[key] ?? []);
 
       if (Array.isArray(value))
         value.forEach((val) => {
@@ -68,10 +74,14 @@ export const ModulesListHeader: React.FC = observer(() => {
         if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
-
+      captureEvent((filters?.[key] ?? []).length > newValues.length ? MODULES_FILTER_REMOVED : MODULES_FILTER_APPLIED, {
+        filter_type: key,
+        filter_property: value,
+        current_filters: filters,
+      });
       updateFilters(projectId.toString(), { [key]: newValues });
     },
-    [filters, projectId, updateFilters]
+    [filters, projectId, updateFilters, captureEvent]
   );
 
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -175,6 +185,9 @@ export const ModulesListHeader: React.FC = observer(() => {
                 onClick={() => {
                   if (!projectId) return;
                   updateDisplayFilters(projectId.toString(), { layout: layout.key });
+                  captureEvent(MODULES_LAYOUT_CHANGED, {
+                    layout: layout.key,
+                  });
                 }}
               >
                 <layout.icon
@@ -189,11 +202,19 @@ export const ModulesListHeader: React.FC = observer(() => {
         </div>
         <ModuleOrderByDropdown
           value={displayFilters?.order_by}
-          onChange={(val) => {
+          onChange={(property, val) => {
             if (!projectId || val === displayFilters?.order_by) return;
             updateDisplayFilters(projectId.toString(), {
               order_by: val,
             });
+            captureEvent(MODULES_SORT_UPDATED, {
+              changed_property: property,
+              change_details: val.replaceAll("-", ""),
+              current_sort: {
+                order_by: displayFilters?.order_by?.replaceAll("-", ""),
+                sort_by: displayFilters?.order_by?.startsWith("-") ? "desc" : "asc",
+              },
+            });
           }}
         />
         <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
@@ -203,6 +224,11 @@ export const ModulesListHeader: React.FC = observer(() => {
             handleDisplayFiltersUpdate={(val) => {
               if (!projectId) return;
               updateDisplayFilters(projectId.toString(), val);
+              captureEvent(!val.favorites ? MODULES_FILTER_REMOVED : MODULES_FILTER_APPLIED, {
+                filter_type: "favorites",
+                filter_property: val.favorites,
+                current_filters: filters,
+              });
             }}
             handleFiltersUpdate={handleFilters}
             memberIds={workspaceMemberIds ?? undefined}

web/components/inbox/inbox-filter/sorting/order-by.tsx

@@ -22,7 +22,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
     (filterKey: keyof TInboxIssueSorting, filterValue: TInboxIssueSorting[keyof TInboxIssueSorting]) => {
       captureEvent(INBOX_SORT_UPDATED, {
         changed_property: filterKey,
-        changed_details: filterValue,
+        change_details: filterValue,
         current_sort: inboxSorting,
       });
       handleInboxIssueSorting(filterKey, filterValue);

web/components/modules/archived-modules/root.tsx

@@ -10,10 +10,11 @@ import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modu
 import { CycleModuleListLayout } from "@/components/ui";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
+import { MODULES_FILTER_REMOVED } from "@/constants/event-tracker";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useModule, useModuleFilter } from "@/hooks/store";
+import { useEventTracker, useModule, useModuleFilter } from "@/hooks/store";
 
 export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
   // router
@@ -21,6 +22,7 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { fetchArchivedModules, projectArchivedModuleIds, loader } = useModule();
+  const { captureEvent } = useEventTracker();
   // module filters hook
   const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
   // derived values
@@ -44,6 +46,11 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
       if (!value) newValues = [];
       else newValues = newValues.filter((val) => val !== value);
 
+      captureEvent(MODULES_FILTER_REMOVED, {
+        filter_type: key,
+        filter_property: value,
+        current_filters: currentProjectArchivedFilters,
+      });
       updateFilters(projectId.toString(), { [key]: newValues }, "archived");
     },
     [currentProjectArchivedFilters, projectId, updateFilters]

web/components/modules/dropdowns/order-by.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/helpers/common.helper";
 // constants
 
 type Props = {
-  onChange: (value: TModuleOrderByOptions) => void;
+  onChange: (property: "order_by" | "sort_by", value: TModuleOrderByOptions) => void;
   value: TModuleOrderByOptions | undefined;
 };
 
@@ -38,8 +38,8 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
           key={option.key}
           className="flex items-center justify-between gap-2"
           onClick={() => {
-            if (isDescending) onChange(`-${option.key}` as TModuleOrderByOptions);
+            if (isDescending) onChange("order_by", `-${option.key}` as TModuleOrderByOptions);
-            else onChange(option.key);
+            else onChange("order_by", option.key);
           }}
         >
           {option.label}
@@ -50,7 +50,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
-          if (isDescending) onChange(value.slice(1) as TModuleOrderByOptions);
+          if (isDescending) onChange("sort_by", value.slice(1) as TModuleOrderByOptions);
         }}
       >
         Ascending
@@ -59,7 +59,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
-          if (!isDescending) onChange(`-${value}` as TModuleOrderByOptions);
+          if (!isDescending) onChange("sort_by", `-${value}` as TModuleOrderByOptions);
         }}
       >
         Descending

web/components/modules/module-list-item.tsx

@@ -9,7 +9,7 @@ import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToas
 import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
-import { E_GRID_LAYOUT, MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
+import { E_LIST_LAYOUT, MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
@@ -48,7 +48,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
       () => {
         captureEvent(MODULE_FAVORITED, {
           module_id: moduleId,
-          element: E_GRID_LAYOUT,
+          element: E_LIST_LAYOUT,
           state: "SUCCESS",
         });
       }
@@ -79,7 +79,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
     ).then(() => {
       captureEvent(MODULE_UNFAVORITED, {
         module_id: moduleId,
-        element: E_GRID_LAYOUT,
+        element: E_LIST_LAYOUT,
         state: "SUCCESS",
       });
     });

web/components/modules/quick-actions.tsx

@@ -8,11 +8,12 @@ import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveModuleModal, CreateUpdateModuleModal, DeleteModuleModal } from "@/components/modules";
 // constants
+import { E_MODULES, MODULE_ARCHIVED, MODULE_RESTORED } from "@/constants/event-tracker";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useModule, useEventTracker, useUser } from "@/hooks/store";
+import { useModule, useEventTracker, useUser, useModuleFilter } from "@/hooks/store";
 
 type Props = {
   moduleId: string;
@@ -30,7 +31,7 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const [archiveModuleModal, setArchiveModuleModal] = useState(false);
   const [deleteModal, setDeleteModal] = useState(false);
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
@@ -59,7 +60,7 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Modules page list layout");
+    setTrackElement(E_MODULES);
     setEditModal(true);
   };
 
@@ -67,6 +68,10 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
     e.preventDefault();
     e.stopPropagation();
     setArchiveModuleModal(true);
+    captureEvent(MODULE_ARCHIVED, {
+      module_id: moduleId,
+      element: E_MODULES,
+    });
   };
 
   const handleRestoreModule = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -79,6 +84,10 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
           title: "Restore success",
           message: "Your module can be found in project modules.",
         });
+        captureEvent(MODULE_RESTORED, {
+          module_id: moduleId,
+          element: E_MODULES,
+        });
         router.push(`/${workspaceSlug}/projects/${projectId}/archives/modules`);
       })
       .catch(() =>
@@ -93,7 +102,7 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Modules page list layout");
+    setTrackElement(E_MODULES);
     setDeleteModal(true);
   };
 

web/constants/event-tracker.ts

@@ -202,6 +202,12 @@ export const MODULE_UPDATED = "Module updated";
 export const MODULE_DELETED = "Module deleted";
 export const MODULE_FAVORITED = "Module favorited";
 export const MODULE_UNFAVORITED = "Module unfavorited";
+export const MODULES_LAYOUT_CHANGED = "Modules layout changed";
+export const MODULES_SORT_UPDATED = "Modules sort updated";
+export const MODULES_FILTER_APPLIED = "Modules filter applied";
+export const MODULES_FILTER_REMOVED = "Modules filter removed";
+export const MODULE_ARCHIVED = "Module archived";
+export const MODULE_RESTORED = "Module restored";
 export const MODULE_LINK_CREATED = "Module link created";
 export const MODULE_LINK_UPDATED = "Module link updated";
 export const MODULE_LINK_DELETED = "Module link deleted";

web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx

@@ -12,8 +12,9 @@ import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules"
 // hooks
 import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
 import { EmptyStateType } from "@/constants/empty-state";
+import { MODULES_FILTER_REMOVED } from "@/constants/event-tracker";
 import { calculateTotalFilters } from "@/helpers/filter.helper";
-import { useModuleFilter, useProject } from "@/hooks/store";
+import { useEventTracker, useModuleFilter, useProject } from "@/hooks/store";
 import { AppLayout } from "@/layouts/app-layout";
 import { NextPageWithLayout } from "@/lib/types";
 
@@ -23,6 +24,7 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
   // store
   const { getProjectById, currentProjectDetails } = useProject();
   const { currentProjectFilters, clearAllFilters, updateFilters } = useModuleFilter();
+  const { captureEvent } = useEventTracker();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Modules` : undefined;
@@ -35,6 +37,11 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
       if (!value) newValues = [];
       else newValues = newValues.filter((val) => val !== value);
 
+      captureEvent(MODULES_FILTER_REMOVED, {
+        filter_type: key,
+        filter_property: value,
+        current_filters: currentProjectFilters,
+      });
       updateFilters(projectId.toString(), { [key]: newValues });
     },
     [currentProjectFilters, projectId, updateFilters]