Measure adoption of a reminder for project cleanup (#10502)

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);
     };
 

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');
                         }}
                     />
                 ) : (

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) => {
 
             <FeatureArchiveDialog
                 isOpen={Boolean(featureArchiveState)}
-                onConfirm={onChange}
+                onConfirm={() => {
+                    onChange();
+                    onArchiveConfirm?.();
+                }}
                 onClose={() => {
                     setFeatureArchiveState(undefined);
                 }}

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 = () => {