feat: tracking feature buttons clicks (#5714)

frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx

@@ -14,7 +14,7 @@ test('all options are drawn', async () => {
 
     render(<FeatureToggleListActions onExportClick={() => {}} />);
 
-    const batchReviveButton = await screen.findByTitle('Group actions');
+    const batchReviveButton = await screen.findByTitle('Options');
 
     await userEvent.click(batchReviveButton!);
 

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

@@ -17,6 +17,7 @@ import { useUiFlag } from 'hooks/useUiFlag';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
 import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledActions = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -35,6 +36,7 @@ interface IFeatureToggleListActions {
 export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
     onExportClick,
 }: IFeatureToggleListActions) => {
+    const { trackEvent } = usePlausibleTracker();
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const featuresExportImport = useUiFlag('featuresExportImport');
     const createFeature = useCreateFeaturePath({
@@ -45,6 +47,11 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
     const open = Boolean(anchorEl);
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         setAnchorEl(event.currentTarget);
+        trackEvent('search-feature-buttons', {
+            props: {
+                action: 'options',
+            },
+        });
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -60,7 +67,7 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
                 e.stopPropagation();
             }}
         >
-            <Tooltip title='Group actions' arrow describeChild>
+            <Tooltip title='Options' arrow describeChild>
                 <IconButton
                     id={id}
                     aria-controls={open ? menuId : undefined}
@@ -91,10 +98,17 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
                     <PermissionHOC permission={CREATE_FEATURE}>
                         {({ hasAccess }) => (
                             <MenuItem
-                                onClick={handleClose}
                                 component={Link}
                                 disabled={!hasAccess}
                                 to={createFeature!.path}
+                                onClick={() => {
+                                    handleClose();
+                                    trackEvent('search-feature-buttons', {
+                                        props: {
+                                            action: 'new-feature',
+                                        },
+                                    });
+                                }}
                             >
                                 <ListItemIcon>
                                     <Add />
@@ -114,6 +128,11 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
                                 onClick={() => {
                                     onExportClick();
                                     handleClose();
+                                    trackEvent('search-feature-buttons', {
+                                        props: {
+                                            action: 'export',
+                                        },
+                                    });
                                 }}
                             >
                                 <ListItemIcon>

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

@@ -46,6 +46,7 @@ import { useUiFlag } from 'hooks/useUiFlag';
 import { FeatureToggleListTable as LegacyFeatureToggleListTable } from './LegacyFeatureToggleListTable';
 import { FeatureToggleListActions } from './FeatureToggleListActions/FeatureToggleListActions';
 import useLoading from 'hooks/useLoading';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const featuresPlaceholder = Array(15).fill({
     name: 'Name of the feature',
@@ -59,6 +60,7 @@ const columnHelper = createColumnHelper<FeatureSearchResponseSchema>();
 
 const FeatureToggleListTableComponent: VFC = () => {
     const theme = useTheme();
+    const { trackEvent } = usePlausibleTracker();
     const { environments } = useEnvironments();
     const enabledEnvironments = environments
         .filter((env) => env.enabled)
@@ -285,6 +287,13 @@ const FeatureToggleListTableComponent: VFC = () => {
                                 to='/archive'
                                 underline='always'
                                 sx={{ marginRight: 2, ...focusable(theme) }}
+                                onClick={() => {
+                                    trackEvent('search-feature-buttons', {
+                                        props: {
+                                            action: 'archive',
+                                        },
+                                    });
+                                }}
                             >
                                 View archive
                             </Link>

frontend/src/hooks/usePlausibleTracker.ts

@@ -52,7 +52,8 @@ export type CustomEvents =
     | 'dependent_features'
     | 'playground_token_input_used'
     | 'search-filter'
-    | 'scheduled-configuration-changes';
+    | 'scheduled-configuration-changes'
+    | 'search-feature-buttons';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);