fix: fix tracking of menu bar for no search results (#8326)

Previously it sending plausible event before the query had loaded and
making false positives.

frontend/src/component/commandBar/CommandBar.tsx

@@ -21,7 +21,10 @@ import { CommandPageSuggestions } from './CommandPageSuggestions';
 import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes';
 import { useAsyncDebounce } from 'react-table';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
-import { CommandSearchFeatures } from './CommandSearchFeatures';
+import {
+    type CommandQueryCounter,
+    CommandSearchFeatures,
+} from './CommandSearchFeatures';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { CommandQuickSuggestions } from './CommandQuickSuggestions';
 import { CommandSearchPages } from './CommandSearchPages';
@@ -105,7 +108,8 @@ export const CommandBar = () => {
     const [searchedPages, setSearchedPages] = useState<
         CommandResultGroupItem[]
     >([]);
-    const [searchedFlagCount, setSearchedFlagCount] = useState(0);
+    const [searchedFlagCount, setSearchedFlagCount] =
+        useState<CommandQueryCounter>({ query: '', count: 0 });
     const [hasNoResults, setHasNoResults] = useState(false);
     const [value, setValue] = useState<string>('');
     const { routes } = useRoutes();
@@ -155,7 +159,8 @@ export const CommandBar = () => {
             query.length !== 0 &&
             mappedProjects.length === 0 &&
             mappedPages.length === 0 &&
-            searchedFlagCount === 0;
+            searchedFlagCount.count === 0 &&
+            searchedFlagCount.query === query;
         if (noResultsFound) {
             trackEvent('command-bar', {
                 props: {
@@ -169,7 +174,7 @@ export const CommandBar = () => {
 
     useEffect(() => {
         debouncedSetSearchState(value);
-    }, [searchedFlagCount]);
+    }, [JSON.stringify(searchedFlagCount)]);
 
     const onSearchChange = (value: string) => {
         debouncedSetSearchState(value);

frontend/src/component/commandBar/CommandSearchFeatures.tsx

@@ -6,9 +6,14 @@ import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureS
 import { useEffect } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
+export type CommandQueryCounter = {
+    query: string;
+    count: number;
+};
+
 interface ICommandBar {
     searchString: string;
-    setSearchedFlagCount: (count: number) => void;
+    setSearchedFlagCount: (count: CommandQueryCounter) => void;
     onClick: () => void;
     setSearchLoading: (loading: boolean) => void;
 }
@@ -36,8 +41,8 @@ export const CommandSearchFeatures = ({
     }));
 
     useEffect(() => {
-        setSearchedFlagCount(flags.length);
-    }, [JSON.stringify(flags)]);
+        setSearchedFlagCount({ count: flags.length, query: searchString });
+    }, [loading]);
 
     useEffect(() => {
         setSearchLoading(loading);