feat: Add Mixpanel tracking events for audit logs export flow (M2-10770) (#2225)

🔗 [Jira Ticket M2-10770](https://mindlogger.atlassian.net/browse/M2-10770)

Adds Mixpanel tracking events across the full audit logs export flow. 

Changes include:

- Add `ExportAuditLogsDownload` event, tracked when the user clicks the Export button in the audit logs settings popup
- Add `ExportAuditLogsSuccessful` event, tracked when the audit logs CSV download completes
- Add `ExportAuditLogsFailed` event, tracked when the export encounters an error
- Add test coverage for all audit log Mixpanel events

Author: adeiji

src/modules/Dashboard/components/HeaderOptions/HeaderOptions.test.tsx

@@ -5,6 +5,7 @@ import { renderWithProviders } from 'shared/utils/renderWithProviders';
 import { mockedApplet, mockedCurrentWorkspace } from 'shared/mock';
 import { Roles } from 'shared/consts';
 import { initialStateData } from 'shared/state';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils';
 
 import { HeaderOptions } from './HeaderOptions';
 
@@ -47,8 +48,11 @@ vi.mock('react-router-dom', async () => {
   };
 });
 
+const spyMixpanelTrack = vi.spyOn(Mixpanel, 'track');
+
 describe('HeaderOptions', () => {
   beforeEach(() => {
+    spyMixpanelTrack.mockReset();
     renderWithProviders(<HeaderOptions />, { preloadedState: getPreloadedState() });
   });
 
@@ -70,6 +74,16 @@ describe('HeaderOptions', () => {
     expect(screen.queryByTestId('header-option-audit-logs-button')).toBeInTheDocument();
   });
 
+  test('should track ExportAuditLogsClick when audit logs option is clicked', () => {
+    fireEvent.click(screen.getByTestId('header-option-export-button'));
+    fireEvent.click(screen.getByTestId('header-option-audit-logs-button'));
+
+    expect(spyMixpanelTrack).toHaveBeenCalledWith({
+      action: MixpanelEventType.ExportAuditLogsClick,
+      [MixpanelProps.AppletId]: testAppletId,
+    });
+  });
+
   test('should contain link to settings page', () => {
     expect(screen.getByTestId('header-option-settings-link')).toHaveAttribute(
       'href',

src/modules/Dashboard/components/HeaderOptions/HeaderOptions.tsx

@@ -12,6 +12,7 @@ import {
   checkIfCanAccessData,
   checkIfCanEdit,
   MixpanelEventType,
+  MixpanelProps,
   checkIfFullAccess,
 } from 'shared/utils';
 import { workspaces } from 'shared/state';
@@ -42,7 +43,10 @@ export const HeaderOptions = () => {
 
   const handleOpenAuditLogs = () => {
     setIsAuditLogsExportOpen(true);
-    Mixpanel.track({ action: MixpanelEventType.ExportAuditLogsClick });
+    Mixpanel.track({
+      action: MixpanelEventType.ExportAuditLogsClick,
+      [MixpanelProps.AppletId]: appletId,
+    });
   };
 
   const handleOpenResponseData = () => {

src/shared/features/AppletSettings/AuditLogsExportSetting/AuditLogsExportSetting.test.tsx

@@ -4,6 +4,7 @@ import { vi } from 'vitest';
 import { initialStateData } from 'redux/modules';
 import { mockedApplet } from 'shared/mock';
 import { renderWithProviders } from 'shared/utils/renderWithProviders';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils';
 
 import { AuditLogsExportSetting } from './AuditLogsExportSetting';
 
@@ -29,13 +30,16 @@ vi.mock('shared/utils/exportTemplate', () => ({
   exportTemplate: vi.fn().mockResolvedValue(true),
 }));
 
+const spyMixpanelTrack = vi.spyOn(Mixpanel, 'track');
+
 const dataTestId = 'audit-logs-export';
 
 describe('AuditLogsExportSetting', () => {
   beforeEach(() => {
     vi.useFakeTimers({ shouldAdvanceTime: true });
     vi.setSystemTime(mockedNow);
     mockedExportAuditLogsApi.mockClear();
+    spyMixpanelTrack.mockReset();
   });
 
   afterEach(() => {
@@ -169,4 +173,75 @@ describe('AuditLogsExportSetting', () => {
       expect(mockedExportAuditLogsApi).toHaveBeenCalledTimes(2);
     });
   });
+
+  it('should track ExportAuditLogsDownload when the download button is clicked', async () => {
+    mockedExportAuditLogsApi.mockResolvedValueOnce({
+      data: { result: [], count: 0 },
+    });
+
+    renderWithProviders(
+      <AuditLogsExportSetting
+        isExportSettingsOpen
+        onExportSettingsClose={vi.fn()}
+        onExportPopupClose={vi.fn()}
+        data-testid={dataTestId}
+      />,
+      { preloadedState },
+    );
+
+    fireEvent.click(screen.getByTestId(`${dataTestId}-settings-download-button`));
+
+    expect(spyMixpanelTrack).toHaveBeenCalledWith({
+      action: MixpanelEventType.ExportAuditLogsDownload,
+      [MixpanelProps.AppletId]: mockedApplet.id,
+    });
+  });
+
+  it('should track ExportAuditLogsSuccessful when the export completes', async () => {
+    mockedExportAuditLogsApi.mockResolvedValueOnce({
+      data: { result: [], count: 0 },
+    });
+
+    renderWithProviders(
+      <AuditLogsExportSetting
+        isExportSettingsOpen
+        onExportSettingsClose={vi.fn()}
+        onExportPopupClose={vi.fn()}
+        data-testid={dataTestId}
+      />,
+      { preloadedState },
+    );
+
+    fireEvent.click(screen.getByTestId(`${dataTestId}-settings-download-button`));
+
+    await waitFor(() => {
+      expect(spyMixpanelTrack).toHaveBeenCalledWith({
+        action: MixpanelEventType.ExportAuditLogsSuccessful,
+        [MixpanelProps.AppletId]: mockedApplet.id,
+      });
+    });
+  });
+
+  it('should track ExportAuditLogsFailed when the export fails', async () => {
+    mockedExportAuditLogsApi.mockRejectedValueOnce(new Error('Network error'));
+
+    renderWithProviders(
+      <AuditLogsExportSetting
+        isExportSettingsOpen
+        onExportSettingsClose={vi.fn()}
+        onExportPopupClose={vi.fn()}
+        data-testid={dataTestId}
+      />,
+      { preloadedState },
+    );
+
+    fireEvent.click(screen.getByTestId(`${dataTestId}-settings-download-button`));
+
+    await waitFor(() => {
+      expect(spyMixpanelTrack).toHaveBeenCalledWith({
+        action: MixpanelEventType.ExportAuditLogsFailed,
+        [MixpanelProps.AppletId]: mockedApplet.id,
+      });
+    });
+  });
 });

src/shared/features/AppletSettings/AuditLogsExportSetting/AuditLogsExportSetting.tsx

@@ -7,6 +7,7 @@ import { ObjectSchema } from 'yup';
 import { getNormalizedTimezoneDate } from 'shared/utils/dateTimezone';
 import { DateRangePickerType } from 'shared/components/DateRangePicker';
 import { applet } from 'shared/state/Applet';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils';
 
 import {
   AuditLogsExportFormValues,
@@ -66,6 +67,10 @@ export const AuditLogsExportSetting = ({
             onExportSettingsClose();
           }}
           onExport={() => {
+            Mixpanel.track({
+              action: MixpanelEventType.ExportAuditLogsDownload,
+              [MixpanelProps.AppletId]: appletId,
+            });
             setDataIsExporting(true);
             onExportSettingsClose();
           }}

src/shared/features/AppletSettings/AuditLogsExportSetting/Popups/AuditLogsExportPopup/useAuditLogsExport.tsx

@@ -6,6 +6,7 @@ import { getExportAuditLogsApi } from 'api';
 import { getExportPageAmount } from 'modules/Dashboard/api/api.utils';
 import { DateRangePickerType } from 'shared/components/DateRangePicker';
 import { DateFormats } from 'shared/consts';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils';
 import { getLast24hUTCRange } from 'shared/utils';
 
 import { AuditLogsExportFormValues } from '../../AuditLogsExportSetting.types';
@@ -71,8 +72,16 @@ export const useAuditLogsExport = (
         setCurrentPage(page);
       }
 
+      Mixpanel.track({
+        action: MixpanelEventType.ExportAuditLogsSuccessful,
+        [MixpanelProps.AppletId]: appletId,
+      });
       handlePopupCloseRef.current();
     } catch (e) {
+      Mixpanel.track({
+        action: MixpanelEventType.ExportAuditLogsFailed,
+        [MixpanelProps.AppletId]: appletId,
+      });
       setError(e as Error);
     } finally {
       isExportingRef.current = false;

src/shared/utils/mixpanel/mixpanel.types.ts

@@ -65,6 +65,9 @@ export enum MixpanelEventType {
   AppletCreatedSuccessfully = 'Applet Created Successfully',
   ExportDataClick = 'Export Data click',
   ExportAuditLogsClick = 'Export Audit Logs click',
+  ExportAuditLogsDownload = 'Export Audit Logs download',
+  ExportAuditLogsSuccessful = 'Export Audit Logs Successful',
+  ExportAuditLogsFailed = 'Export Audit Logs Failed',
   TakeNowDialogClosed = 'Take Now dialogue closed',
   MultiInformantStartActivityClick = 'Multi-informant Start Activity click',
   ProvidingResponsesDropdownOpened = '"Who will be providing responses" dropdown opened',
@@ -249,6 +252,18 @@ export type ExportAuditLogsClickEvent = WithAppletId<{
   action: MixpanelEventType.ExportAuditLogsClick;
 }>;
 
+export type ExportAuditLogsDownloadEvent = WithAppletId<{
+  action: MixpanelEventType.ExportAuditLogsDownload;
+}>;
+
+export type ExportAuditLogsSuccessfulEvent = WithAppletId<{
+  action: MixpanelEventType.ExportAuditLogsSuccessful;
+}>;
+
+export type ExportAuditLogsFailedEvent = WithAppletId<{
+  action: MixpanelEventType.ExportAuditLogsFailed;
+}>;
+
 type TakeNowEvent = WithFeature<
   WithAppletId<{
     [MixpanelProps.MultiInformantAssessmentId]?: string | null;
@@ -571,6 +586,9 @@ export type MixpanelEvent =
   | AppletCreatedSuccessfullyEvent
   | ExportDataClickEvent
   | ExportAuditLogsClickEvent
+  | ExportAuditLogsDownloadEvent
+  | ExportAuditLogsSuccessfulEvent
+  | ExportAuditLogsFailedEvent
   | TakeNowDialogClosedEvent
   | MultiInformantStartActivityClickEvent
   | ProvidingResponsesDropdownOpenedEvent