feat: command bar track events (#7469)

Start tracking plausible events

1. Log the search keywords that returned 0 results
2. Track all clicks, based on source(search/recents/pages), type etc.

frontend/src/component/commandBar/CommandBar.tsx

@@ -25,6 +25,7 @@ import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRout
 import { useAsyncDebounce } from 'react-table';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { CommandFeatures } from './CommandFeatures';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
     position: 'absolute',
@@ -95,6 +96,7 @@ interface IPageRouteInfo {
 }
 
 export const CommandBar = () => {
+    const { trackEvent } = usePlausibleTracker();
     const searchInputRef = useRef<HTMLInputElement>(null);
     const searchContainerRef = useRef<HTMLInputElement>(null);
     const [showSuggestions, setShowSuggestions] = useState(false);
@@ -105,6 +107,8 @@ export const CommandBar = () => {
     const [searchedPages, setSearchedPages] = useState<
         CommandResultGroupItem[]
     >([]);
+    const [searchedFlagCount, setSearchedFlagCount] = useState(0);
+    const [value, setValue] = useState<string>('');
     const { lastVisited } = useRecentlyVisited();
     const { routes } = useRoutes();
     const allRoutes: Record<string, IPageRouteInfo> = {};
@@ -148,10 +152,25 @@ export const CommandBar = () => {
             link: page.path,
         }));
         setSearchedPages(mappedPages);
+
+        const noResultsFound =
+            query.length !== 0 &&
+            mappedProjects.length === 0 &&
+            mappedPages.length === 0 &&
+            searchedFlagCount === 0;
+        if (noResultsFound) {
+            trackEvent('command-bar', {
+                props: {
+                    eventType: 'no search results found',
+                    query: query,
+                },
+            });
+        }
     }, 200);
 
     const onSearchChange = (value: string) => {
         debouncedSetSearchState(value);
+        setValue(value);
     };
 
     const hotkey = useKeyboardShortcut(
@@ -194,7 +213,7 @@ export const CommandBar = () => {
                         'aria-label': placeholder,
                         'data-testid': SEARCH_INPUT,
                     }}
-                    value={searchString}
+                    value={value}
                     onChange={(e) => onSearchChange(e.target.value)}
                     onFocus={() => {
                         setShowSuggestions(true);
@@ -203,13 +222,13 @@ export const CommandBar = () => {
 
                 <Box sx={{ width: (theme) => theme.spacing(4) }}>
                     <ConditionallyRender
-                        condition={Boolean(searchString)}
+                        condition={Boolean(value)}
                         show={
                             <Tooltip title='Clear search query' arrow>
                                 <IconButton
                                     size='small'
                                     onClick={(e) => {
-                                        e.stopPropagation(); // prevent outside click from the lazily added element
+                                        e.stopPropagation();
                                         onSearchChange('');
                                         searchInputRef.current?.focus();
                                     }}
@@ -226,11 +245,14 @@ export const CommandBar = () => {
             </StyledSearch>
 
             <ConditionallyRender
-                condition={Boolean(searchString) && showSuggestions}
+                condition={Boolean(value) && showSuggestions}
                 show={
                     <CommandResultsPaper>
                         {searchString !== undefined && (
-                            <CommandFeatures searchString={searchString} />
+                            <CommandFeatures
+                                searchString={searchString}
+                                setSearchedFlagCount={setSearchedFlagCount}
+                            />
                         )}
                         <CommandResultGroup
                             groupName={'Projects'}

frontend/src/component/commandBar/CommandFeatures.tsx

@@ -3,11 +3,16 @@ import {
     type CommandResultGroupItem,
 } from './RecentlyVisited/CommandResultGroup';
 import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+import { useEffect } from 'react';
 
 interface ICommandBar {
     searchString: string;
+    setSearchedFlagCount: (count: number) => void;
 }
-export const CommandFeatures = ({ searchString }: ICommandBar) => {
+export const CommandFeatures = ({
+    searchString,
+    setSearchedFlagCount,
+}: ICommandBar) => {
     const { features = [] } = useFeatureSearch(
         {
             query: searchString,
@@ -24,6 +29,10 @@ export const CommandFeatures = ({ searchString }: ICommandBar) => {
         description: feature.description,
     }));
 
+    useEffect(() => {
+        setSearchedFlagCount(flags.length);
+    }, [JSON.stringify(flags)]);
+
     return (
         <CommandResultGroup groupName={'Flags'} icon={'flag'} items={flags} />
     );

frontend/src/component/commandBar/PageSuggestions.tsx

@@ -9,6 +9,8 @@ import {
 import { Link } from 'react-router-dom';
 import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
 import type { Theme } from '@mui/material/styles/createTheme';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import type { JSX } from 'react';
 
 const listItemButtonStyle = (theme: Theme) => ({
     border: `1px solid transparent`,
@@ -42,10 +44,16 @@ const StyledListItemText = styled(ListItemText)(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
 }));
 
+interface IPageSuggestionItem {
+    icon: JSX.Element;
+    name: string;
+    path: string;
+}
+
 const toListItemData = (
     items: string[],
     routes: Record<string, { path: string; route: string; title: string }>,
-) => {
+): IPageSuggestionItem[] => {
     return items.map((item) => {
         return {
             name: routes[item]?.title ?? item,
@@ -71,8 +79,19 @@ export const PageSuggestions = ({
 }: {
     routes: Record<string, { path: string; route: string; title: string }>;
 }) => {
+    const { trackEvent } = usePlausibleTracker();
     const filtered = pages.filter((page) => routes[page]);
     const pageItems = toListItemData(filtered, routes);
+    const onClick = (item: IPageSuggestionItem) => {
+        trackEvent('command-bar', {
+            props: {
+                eventType: `click`,
+                source: 'suggestions',
+                eventTarget: 'Pages',
+                pageType: item.name,
+            },
+        });
+    };
     return (
         <StyledContainer>
             <StyledTypography color='textSecondary'>Pages</StyledTypography>
@@ -83,6 +102,9 @@ export const PageSuggestions = ({
                         dense={true}
                         component={Link}
                         to={item.path}
+                        onClick={() => {
+                            onClick(item);
+                        }}
                         sx={listItemButtonStyle}
                     >
                         <StyledListItemIcon

frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx

@@ -12,6 +12,7 @@ import type { Theme } from '@mui/material/styles/createTheme';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StyledProjectIcon } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const listItemButtonStyle = (theme: Theme) => ({
     borderRadius: theme.spacing(0.5),
@@ -52,11 +53,23 @@ export const CommandResultGroup = ({
     groupName,
     items,
 }: CommandResultGroupProps) => {
+    const { trackEvent } = usePlausibleTracker();
     const slicedItems = items.slice(0, 3);
 
     if (items.length === 0) {
         return null;
     }
+
+    const onClick = (item: CommandResultGroupItem) => {
+        trackEvent('command-bar', {
+            props: {
+                eventType: `click`,
+                source: 'search',
+                eventTarget: groupName,
+                ...(groupName === 'Pages' && { pageType: item.name }),
+            },
+        });
+    };
     return (
         <>
             <StyledTypography color='textSecondary'>
@@ -68,6 +81,9 @@ export const CommandResultGroup = ({
                         key={`command-result-group-${groupName}-${index}`}
                         dense={true}
                         component={Link}
+                        onClick={() => {
+                            onClick(item);
+                        }}
                         to={item.link}
                         sx={listItemButtonStyle}
                     >

frontend/src/component/commandBar/RecentlyVisited/RecentlyVisited.tsx

@@ -16,6 +16,7 @@ import type { LastViewedPage } from 'hooks/useRecentlyVisited';
 import type { Theme } from '@mui/material/styles/createTheme';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const listItemButtonStyle = (theme: Theme) => ({
     border: `1px solid transparent`,
@@ -90,11 +91,23 @@ const RecentlyVisitedFeatureButton = ({
     projectId,
     featureId,
 }: { key: string; projectId: string; featureId: string }) => {
+    const { trackEvent } = usePlausibleTracker();
+
+    const onClick = () => {
+        trackEvent('command-bar', {
+            props: {
+                eventType: `click`,
+                source: 'recently-visited',
+                eventTarget: 'Flags',
+            },
+        });
+    };
     return (
         <ListItemButton
             key={key}
             dense={true}
             component={Link}
+            onClick={onClick}
             to={`/projects/${projectId}/features/${featureId}`}
             sx={listItemButtonStyle}
         >
@@ -115,12 +128,25 @@ const RecentlyVisitedPathButton = ({
     key,
     name,
 }: { path: string; key: string; name: string }) => {
+    const { trackEvent } = usePlausibleTracker();
+
+    const onClick = () => {
+        trackEvent('command-bar', {
+            props: {
+                eventType: `click`,
+                source: 'recently-visited',
+                eventTarget: 'Pages',
+                pageType: name,
+            },
+        });
+    };
     return (
         <ListItemButton
             key={key}
             dense={true}
             component={Link}
             to={path}
+            onClick={onClick}
             sx={listItemButtonStyle}
         >
             <StyledListItemIcon
@@ -145,8 +171,20 @@ const RecentlyVisitedProjectButton = ({
     projectId,
     key,
 }: { projectId: string; key: string }) => {
+    const { trackEvent } = usePlausibleTracker();
     const { project, loading } = useProjectOverview(projectId);
     const projectDeleted = !project.name && !loading;
+
+    const onClick = () => {
+        trackEvent('command-bar', {
+            props: {
+                eventType: `click`,
+                source: 'recently-visited',
+                eventTarget: 'Projects',
+            },
+        });
+    };
+
     if (projectDeleted) return null;
     return (
         <ListItemButton
@@ -154,6 +192,7 @@ const RecentlyVisitedProjectButton = ({
             dense={true}
             component={Link}
             to={`/projects/${projectId}`}
+            onClick={onClick}
             sx={listItemButtonStyle}
         >
             <StyledListItemIcon>

frontend/src/hooks/usePlausibleTracker.ts

@@ -61,7 +61,8 @@ export type CustomEvents =
     | 'insights-share'
     | 'many-strategies'
     | 'sdk-banner'
-    | 'feature-lifecycle';
+    | 'feature-lifecycle'
+    | 'command-bar';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);