feat: batch operatsion plausible events (#3367)

frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx

@@ -11,6 +11,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { useFeaturesArchive } from 'hooks/api/getters/useFeaturesArchive/useFeaturesArchive';
 import useToast from 'hooks/useToast';
 import { ArchivedFeatureDeleteConfirm } from './ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IArchiveBatchActionsProps {
     selectedIds: string[];
@@ -25,6 +26,7 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
     const { setToastData, setToastApiError } = useToast();
     const { refetchArchived } = useFeaturesArchive(projectId);
     const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+    const { trackEvent } = usePlausibleTracker();
 
     const onRevive = async () => {
         try {
@@ -35,6 +37,11 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
                 title: "And we're back!",
                 text: 'The feature toggles have been revived.',
             });
+            trackEvent('batch_operations', {
+                props: {
+                    eventType: 'features revived',
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
@@ -76,7 +83,14 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
                 projectId={projectId}
                 open={deleteModalOpen}
                 setOpen={setDeleteModalOpen}
-                refetch={refetchArchived}
+                refetch={() => {
+                    refetchArchived();
+                    trackEvent('batch_operations', {
+                        props: {
+                            eventType: 'features deleted',
+                        },
+                    });
+                }}
             />
         </>
     );

frontend/src/component/feature/FeatureToggleList/ExportDialog.tsx

@@ -12,6 +12,7 @@ interface IExportDialogProps {
     showExportDialog: boolean;
     data: Pick<FeatureSchema, 'name'>[];
     onClose: () => void;
+    onConfirm?: () => void;
     environments: string[];
 }
 
@@ -24,6 +25,7 @@ export const ExportDialog = ({
     showExportDialog,
     data,
     onClose,
+    onConfirm,
     environments,
 }: IExportDialogProps) => {
     const [selected, setSelected] = useState(environments[0]);
@@ -66,6 +68,7 @@ export const ExportDialog = ({
             const body = await res.json();
             downloadFile(body);
             onClose();
+            onConfirm?.();
         } catch (e: unknown) {
             setToastApiError(formatUnknownError(e));
         }

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/ArchiveButton.tsx

@@ -5,6 +5,7 @@ import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
 import { DELETE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import useProject from 'hooks/api/getters/useProject/useProject';
 import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IArchiveButtonProps {
     projectId: string;
@@ -17,10 +18,16 @@ export const ArchiveButton: VFC<IArchiveButtonProps> = ({
 }) => {
     const { refetch } = useProject(projectId);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const { trackEvent } = usePlausibleTracker();
 
     const onConfirm = async () => {
         setIsDialogOpen(false);
         await refetch();
+        trackEvent('batch_operations', {
+            props: {
+                eventType: 'features archived',
+            },
+        });
     };
 
     return (

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/ManageTags.tsx

@@ -10,6 +10,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import useProject from 'hooks/api/getters/useProject/useProject';
 import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IManageTagsProps {
     data: FeatureSchema[];
@@ -20,6 +21,7 @@ export const ManageTags: VFC<IManageTagsProps> = ({ projectId, data }) => {
     const { bulkUpdateTags } = useTagApi();
     const { refetch } = useProject(projectId);
     const { setToastData, setToastApiError } = useToast();
+    const { trackEvent } = usePlausibleTracker();
     const [isOpen, setIsOpen] = useState(false);
     const [initialValues, indeterminateValues] = useMemo(() => {
         const uniqueTags = data
@@ -77,6 +79,11 @@ export const ManageTags: VFC<IManageTagsProps> = ({ projectId, data }) => {
                 type: 'success',
                 autoHideDuration: 12000,
             });
+            trackEvent('batch_operations', {
+                props: {
+                    eventType: 'tags updated',
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/MoreActions.tsx

@@ -18,6 +18,7 @@ import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import useProject from 'hooks/api/getters/useProject/useProject';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IMoreActionsProps {
     projectId: string;
@@ -31,6 +32,7 @@ export const MoreActions: VFC<IMoreActionsProps> = ({ projectId, data }) => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const { staleFeatures } = useProjectApi();
     const { setToastData, setToastApiError } = useToast();
+    const { trackEvent } = usePlausibleTracker();
 
     const open = Boolean(anchorEl);
     const selectedIds = data.map(({ name }) => name);
@@ -55,6 +57,11 @@ export const MoreActions: VFC<IMoreActionsProps> = ({ projectId, data }) => {
                 text: 'Feature toggles marked as stale',
                 type: 'success',
             });
+            trackEvent('batch_operations', {
+                props: {
+                    eventType: 'features staled',
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
@@ -70,6 +77,11 @@ export const MoreActions: VFC<IMoreActionsProps> = ({ projectId, data }) => {
                 text: 'Feature toggles unmarked as stale',
                 type: 'success',
             });
+            trackEvent('batch_operations', {
+                props: {
+                    eventType: 'features unstaled',
+                },
+            });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/ProjectFeaturesBatchActions.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo, useState } from 'react';
 import { Button } from '@mui/material';
-import { FileDownload, Label } from '@mui/icons-material';
+import { FileDownload } from '@mui/icons-material';
 import type { FeatureSchema } from 'openapi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
@@ -8,6 +8,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { ArchiveButton } from './ArchiveButton';
 import { MoreActions } from './MoreActions';
 import { ManageTags } from './ManageTags';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IProjectFeaturesBatchActionsProps {
     selectedIds: string[];
@@ -20,6 +21,7 @@ export const ProjectFeaturesBatchActions: FC<
 > = ({ selectedIds, data, projectId }) => {
     const { uiConfig } = useUiConfig();
     const [showExportDialog, setShowExportDialog] = useState(false);
+    const { trackEvent } = usePlausibleTracker();
     const selectedData = useMemo(
         () => data.filter(d => selectedIds.includes(d.name)),
         [data, selectedIds]
@@ -33,6 +35,14 @@ export const ProjectFeaturesBatchActions: FC<
         return Array.from(new Set(envs));
     }, [selectedData]);
 
+    const trackExport = () => {
+        trackEvent('batch_operations', {
+            props: {
+                eventType: 'features exported',
+            },
+        });
+    };
+
     return (
         <>
             <ArchiveButton projectId={projectId} features={selectedIds} />
@@ -54,6 +64,7 @@ export const ProjectFeaturesBatchActions: FC<
                         data={selectedData}
                         onClose={() => setShowExportDialog(false)}
                         environments={environments}
+                        onConfirm={trackExport}
                     />
                 }
             />

frontend/src/hooks/usePlausibleTracker.ts

@@ -22,7 +22,8 @@ export type CustomEvents =
     | 'export_import'
     | 'project_api_tokens'
     | 'project_stickiness_set'
-    | 'notifications';
+    | 'notifications'
+    | 'batch_operations';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);