From bce768daf697b2a222f276ec52e80177a0f7cba5 Mon Sep 17 00:00:00 2001 From: LAKHAN BAHETI Date: Wed, 1 May 2024 16:40:25 +0530 Subject: [PATCH] chore: module events updated --- web/components/headers/modules-list.tsx | 38 ++++++++++++++++--- .../inbox/inbox-filter/sorting/order-by.tsx | 2 +- .../modules/archived-modules/root.tsx | 9 ++++- web/components/modules/dropdowns/order-by.tsx | 10 ++--- web/components/modules/module-list-item.tsx | 6 +-- web/components/modules/quick-actions.tsx | 17 +++++++-- web/constants/event-tracker.ts | 6 +++ .../projects/[projectId]/modules/index.tsx | 9 ++++- 8 files changed, 76 insertions(+), 21 deletions(-) diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx index 176103253..a66f03b45 100644 --- a/web/components/headers/modules-list.tsx +++ b/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) => { @@ -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, + }); }} > { { + 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", + }, + }); }} /> } 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} diff --git a/web/components/inbox/inbox-filter/sorting/order-by.tsx b/web/components/inbox/inbox-filter/sorting/order-by.tsx index 75d67a59e..5fe643523 100644 --- a/web/components/inbox/inbox-filter/sorting/order-by.tsx +++ b/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); diff --git a/web/components/modules/archived-modules/root.tsx b/web/components/modules/archived-modules/root.tsx index d697f15b5..041f6b25a 100644 --- a/web/components/modules/archived-modules/root.tsx +++ b/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] diff --git a/web/components/modules/dropdowns/order-by.tsx b/web/components/modules/dropdowns/order-by.tsx index d6fd3548b..7851276db 100644 --- a/web/components/modules/dropdowns/order-by.tsx +++ b/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) => { key={option.key} className="flex items-center justify-between gap-2" onClick={() => { - if (isDescending) onChange(`-${option.key}` as TModuleOrderByOptions); - else onChange(option.key); + if (isDescending) onChange("order_by", `-${option.key}` as TModuleOrderByOptions); + else onChange("order_by", option.key); }} > {option.label} @@ -50,7 +50,7 @@ export const ModuleOrderByDropdown: React.FC = (props) => { { - 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) => { { - if (!isDescending) onChange(`-${value}` as TModuleOrderByOptions); + if (!isDescending) onChange("sort_by", `-${value}` as TModuleOrderByOptions); }} > Descending diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx index 0c566ccbb..379bc90a8 100644 --- a/web/components/modules/module-list-item.tsx +++ b/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 = 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 = observer((props) => { ).then(() => { captureEvent(MODULE_UNFAVORITED, { module_id: moduleId, - element: E_GRID_LAYOUT, + element: E_LIST_LAYOUT, state: "SUCCESS", }); }); diff --git a/web/components/modules/quick-actions.tsx b/web/components/modules/quick-actions.tsx index a1805937e..010a3caf6 100644 --- a/web/components/modules/quick-actions.tsx +++ b/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 = 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 = observer((props) => { const handleEditModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); - setTrackElement("Modules page list layout"); + setTrackElement(E_MODULES); setEditModal(true); }; @@ -67,6 +68,10 @@ export const ModuleQuickActions: React.FC = observer((props) => { e.preventDefault(); e.stopPropagation(); setArchiveModuleModal(true); + captureEvent(MODULE_ARCHIVED, { + module_id: moduleId, + element: E_MODULES, + }); }; const handleRestoreModule = async (e: React.MouseEvent) => { @@ -79,6 +84,10 @@ export const ModuleQuickActions: React.FC = 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 = observer((props) => { const handleDeleteModule = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); - setTrackElement("Modules page list layout"); + setTrackElement(E_MODULES); setDeleteModal(true); }; diff --git a/web/constants/event-tracker.ts b/web/constants/event-tracker.ts index 0d4b0add9..71ae7d039 100644 --- a/web/constants/event-tracker.ts +++ b/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"; diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx index 22973347f..4980b07a1 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx +++ b/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]