fuzzy finder: log user events (#45358)

sourcegraph · Dec 8, 2022 · 3a774ed · 3a774ed
1 parent b69b159
commit 3a774ed
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/client/web/src/components/fuzzyFinder/FuzzyFinder.tsx b/client/web/src/components/fuzzyFinder/FuzzyFinder.tsx
@@ -29,8 +29,8 @@ export const FuzzyFinderContainer: React.FunctionComponent<FuzzyFinderContainerP
     const { isVisible, setIsVisible } = props
     const isVisibleRef = useRef(isVisible)
     isVisibleRef.current = isVisible
-    const state = useFuzzyState(props, () => setIsVisible(false))
-    const { tabs, activeTab, setActiveTab, repoRevision, isScopeToggleDisabled, toggleScope } = state
+    const state = useFuzzyState(props)
+    const { tabs, activeTab, setActiveTab, repoRevision, scope, isScopeToggleDisabled, toggleScope } = state
     const isScopeToggleDisabledRef = useRef(isScopeToggleDisabled)
     isScopeToggleDisabledRef.current = isScopeToggleDisabled
 
@@ -79,6 +79,14 @@ export const FuzzyFinderContainer: React.FunctionComponent<FuzzyFinderContainerP
         }
     }, [props.telemetryService, isVisible])
 
+    const handleItemClick = useCallback(
+        (eventName: 'FuzzyFinderResultClicked' | 'FuzzyFinderGoToResultsPageClicked') => {
+            props.telemetryService.log(eventName, { activeTab, scope }, { activeTab, scope })
+            setIsVisible(false)
+        },
+        [props.telemetryService, setIsVisible, activeTab, scope]
+    )
+
     if (tabs.isAllDisabled()) {
         return null
     }
@@ -103,14 +111,26 @@ export const FuzzyFinderContainer: React.FunctionComponent<FuzzyFinderContainerP
                         />
                     ))
                 )}
-            {isVisible && <FuzzyFinder {...state} setIsVisible={setIsVisible} location={props.location} />}
+            {isVisible && (
+                <FuzzyFinder
+                    {...state}
+                    setIsVisible={setIsVisible}
+                    location={props.location}
+                    onClickItem={handleItemClick}
+                />
+            )}
         </>
     )
 }
 
 interface FuzzyFinderProps extends FuzzyState {
     setIsVisible: Dispatch<SetStateAction<boolean>>
 
+    /**
+     * Search result click handler.
+     */
+    onClickItem: (eventName: 'FuzzyFinderResultClicked' | 'FuzzyFinderGoToResultsPageClicked') => void
+
     location: H.Location
 
     /**

diff --git a/client/web/src/components/fuzzyFinder/FuzzyModal.tsx b/client/web/src/components/fuzzyFinder/FuzzyModal.tsx
@@ -54,6 +54,7 @@ export interface FuzzyModalProps extends FuzzyState {
     initialMaxResults: number
     initialQuery: string
     onClose: () => void
+    onClickItem: (eventName: 'FuzzyFinderResultClicked' | 'FuzzyFinderGoToResultsPageClicked') => void
     tabs: FuzzyTabs
     location: H.Location
 }
@@ -236,6 +237,7 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
     )
 
     // Stage 2: render results from the fuzzy matcher.
+    const handleResultClick = useCallback(() => onClickItem('FuzzyFinderResultClicked'), [onClickItem])
     const queryResult = useMemo<QueryResult>(() => {
         const fsmErrors = fuzzyErrors(tabs, activeTab, scope)
         if (fsmErrors.length > 0) {
@@ -247,7 +249,7 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
             maxResults,
             initialMaxResults,
             setMaxResults,
-            onClickItem
+            handleResultClick
         )
     }, [
         activeTab,
@@ -257,7 +259,7 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
         maxResults,
         initialMaxResults,
         setMaxResults,
-        onClickItem,
+        handleResultClick,
         tabs,
     ])
 
@@ -336,6 +338,10 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
           }
         : {}
 
+    const handleGoToResultsPageClick = useCallback(() => onClickItem('FuzzyFinderGoToResultsPageClicked'), [
+        onClickItem,
+    ])
+
     return (
         <Modal
             position="center"
@@ -427,7 +433,7 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
                 )}
                 <hr className="my-0 w-100" />
                 <div className="d-flex align-items-center w-100 p-3">
-                    <SearchQueryLink {...props} />
+                    <SearchQueryLink {...props} onClickItem={handleGoToResultsPageClick} />
                     <span className="ml-auto mr-2">
                         <ArrowKeyExplanation />
                     </span>
@@ -502,7 +508,7 @@ const ScopeSelect: React.FunctionComponent<ScopeSelectProps> = ({
     </Select>
 )
 
-const SearchQueryLink: React.FunctionComponent<FuzzyState> = props => {
+const SearchQueryLink: React.FunctionComponent<FuzzyState & { onClickItem: () => void }> = props => {
     const { onClickItem, scope } = props
     const searchQueryLink = useCallback(
         (query: string): JSX.Element => {

diff --git a/client/web/src/components/fuzzyFinder/FuzzyTabs.tsx b/client/web/src/components/fuzzyFinder/FuzzyTabs.tsx
@@ -107,7 +107,6 @@ export interface FuzzyState {
     isScopeToggleDisabled: boolean
     scope: FuzzyScope
     toggleScope: () => void
-    onClickItem: () => void
 }
 
 export function fuzzyIsActive(activeTab: FuzzyTabKey, tab: FuzzyTabKey): boolean {
@@ -177,7 +176,6 @@ export function defaultFuzzyState(): FuzzyState {
     let activeTab: FuzzyTabKey = 'all'
     return {
         query,
-        onClickItem: () => {},
         setQuery: newQuery => {
             if (typeof newQuery === 'function') {
                 query = newQuery(query)
@@ -219,7 +217,7 @@ export interface FuzzyTabsProps extends FuzzyActionProps {
     isVisible: boolean
 }
 
-export function useFuzzyState(props: FuzzyTabsProps, onClickItem: () => void): FuzzyState {
+export function useFuzzyState(props: FuzzyTabsProps): FuzzyState {
     const {
         themeState,
         isVisible,
@@ -383,7 +381,6 @@ export function useFuzzyState(props: FuzzyTabsProps, onClickItem: () => void): F
     ])
 
     return {
-        onClickItem,
         query,
         setQuery,
         activeTab,