diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectCleanupReminder/ProjectCleanupReminder.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectCleanupReminder/ProjectCleanupReminder.tsx index 7e5ebfc2a7..bae6668e85 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectCleanupReminder/ProjectCleanupReminder.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectCleanupReminder/ProjectCleanupReminder.tsx @@ -7,10 +7,7 @@ import { subDays, formatISO } from 'date-fns'; import { useReminders } from 'component/feature/FeatureView/CleanupReminder/useReminders'; import { useHasRootAccess } from 'hooks/useHasAccess'; import { DELETE_FEATURE } from 'component/providers/AccessProvider/permissions'; - -const StyledBox = styled(Box)(({ theme }) => ({ - marginBottom: theme.spacing(2), -})); +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const ActionsBox = styled(Box)(({ theme }) => ({ display: 'flex', @@ -38,6 +35,7 @@ export const ProjectCleanupReminder: FC<{ const navigate = useNavigate(); const { shouldShowReminder, snoozeReminder } = useReminders(); const hasAccess = useHasRootAccess(DELETE_FEATURE, projectId); + const { trackEvent } = usePlausibleTracker(); const reminderKey = `project-cleanup-${projectId}`; const query = getQuery(projectId); @@ -51,12 +49,22 @@ export const ProjectCleanupReminder: FC<{ } const handleViewFlags = () => { + trackEvent('project-cleanup', { + props: { + eventType: 'view flags clicked', + }, + }); navigate( `/projects/${projectId}/features?${new URLSearchParams(query).toString()}`, ); }; const handleDismiss = () => { + trackEvent('project-cleanup', { + props: { + eventType: 'remind me later', + }, + }); snoozeReminder(reminderKey, snoozeReminderDays); }; diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 9703abfd71..b57295bb41 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -132,6 +132,13 @@ export const ProjectFeatureToggles = ({ }, [projectId, refetch], ); + + // TODO: remove tracking after `filterFlagsToArchive` flag + const trackArchiveAction = (eventType = 'archived flag') => { + trackEvent('project-cleanup', { + props: { eventType, showCleanupReminder }, + }); + }; const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { onToggle: onFeatureToggle, modals: featureToggleModals } = useFeatureToggleSwitch(projectId); @@ -142,7 +149,7 @@ export const ProjectFeatureToggles = ({ setShowMarkCompletedDialogue, setShowFeatureReviveDialogue, setShowFeatureDeleteDialogue, - } = useRowActions(refetch, projectId); + } = useRowActions(refetch, projectId, trackArchiveAction); const isPlaceholder = Boolean(initialLoad || (loading && total)); @@ -630,6 +637,7 @@ export const ProjectFeatureToggles = ({ onConfirm={() => { refetch(); table.resetRowSelection(); + trackArchiveAction('bulk archived'); }} /> ) : ( diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx index 5d53a635c9..d7d2772c58 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx @@ -5,7 +5,11 @@ import { MarkCompletedDialogue } from 'component/feature/FeatureView/FeatureOver import { ArchivedFeatureDeleteConfirm } from '../../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx'; import { ArchivedFeatureReviveConfirm } from '../../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureReviveConfirm/ArchivedFeatureReviveConfirm.tsx'; -export const useRowActions = (onChange: () => void, projectId: string) => { +export const useRowActions = ( + onChange: () => void, + projectId: string, + onArchiveConfirm?: () => void, +) => { const [featureArchiveState, setFeatureArchiveState] = useState< string | undefined >(); @@ -52,7 +56,10 @@ export const useRowActions = (onChange: () => void, projectId: string) => { { + onChange(); + onArchiveConfirm?.(); + }} onClose={() => { setFeatureArchiveState(undefined); }} diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 6293ef8220..e84b889a48 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -75,6 +75,7 @@ export type CustomEvents = | 'productivity-report' | 'release-management' | 'feature-links' + | 'project-cleanup' | 'project-list-view-toggle'; export const usePlausibleTracker = () => {