From e4ca8a3e6c7171f9efcfe2b677d7d5e34672d99a Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 24 Jan 2024 14:23:23 +0200
Subject: [PATCH] feat: track search bar events (#6021)

Adding tracking for 2 views, when users use the new search.

For features view and project view.
---
 .../StrategyTooltipLink/StrategyTooltipLink.test.tsx   |  2 +-
 .../FeatureToggleList/FeatureToggleListTable.tsx       | 10 +++++++++-
 .../ProjectFeatureTogglesHeader.tsx                    |  8 ++++++++
 frontend/src/hooks/usePlausibleTracker.ts              |  3 ++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
index 820df39048..8c3255e3c7 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.test.tsx
@@ -1,5 +1,5 @@
 import { render } from 'utils/testRenderer';
-import { screen, within } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { StrategyDiff } from './StrategyTooltipLink';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import { IChangeRequestUpdateStrategy } from 'component/changeRequest/changeRequest.types';
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 81d8b02962..b7bb020369 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -286,7 +286,15 @@ const FeatureToggleListTableComponent: VFC = () => {
         }
     }, [isSmallScreen, isMediumScreen]);
 
-    const setSearchValue = (query = '') => setTableState({ query });
+    const setSearchValue = (query = '') => {
+        setTableState({ query });
+        trackEvent('search-bar', {
+            props: {
+                screen: 'features',
+                length: query.length,
+            },
+        });
+    };
 
     const rows = table.getRowModel().rows;
 
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
index 396482cc19..2a05334233 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
@@ -20,6 +20,7 @@ import { getCreateTogglePath } from 'utils/routePathHelpers';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
 import { FeatureSchema } from 'openapi';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IProjectFeatureTogglesHeaderProps {
     isLoading?: boolean;
@@ -53,8 +54,15 @@ export const ProjectFeatureTogglesHeader: VFC<
     const featuresExportImportFlag = useUiFlag('featuresExportImport');
     const [showExportDialog, setShowExportDialog] = useState(false);
     const navigate = useNavigate();
+    const { trackEvent } = usePlausibleTracker();
     const handleSearch = (query: string) => {
         onChangeSearchQuery?.(query);
+        trackEvent('search-bar', {
+            props: {
+                screen: 'project',
+                length: query.length,
+            },
+        });
     };
 
     return (
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index 2752ccbb39..a43fe69517 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -56,7 +56,8 @@ export type CustomEvents =
     | 'search-feature-buttons'
     | 'new-strategy-form'
     | 'feedback'
-    | 'feature-metrics';
+    | 'feature-metrics'
+    | 'search-bar';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);