From 3926ec6c51b86fd7e7eeaa9f1179941fbce8e69e Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Thu, 21 Dec 2023 11:01:16 +0200
Subject: [PATCH] feat: tracking feature buttons clicks (#5714)

---
 .../FeatureToggleActions.test.tsx             |  2 +-
 .../FeatureToggleListActions.tsx              | 23 +++++++++++++++++--
 .../FeatureToggleListTable.tsx                |  9 ++++++++
 frontend/src/hooks/usePlausibleTracker.ts     |  3 ++-
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx
index 1d311b9709cb..c7e32cac80da 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx
+++ b/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!);
 
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
index 12bdea99268d..5f87d262289e 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
+++ b/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>
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index acbe3cea0d4b..957c37544c7e 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/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>
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index b6f50ea95a86..39ee0f0351e3 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/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);