feat: track search bar events (#6021)

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

For features view and project view.

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';

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;
 

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 (

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);