fix(global-header): Emit search analytics data from global header searchbar (#520)

* fix(global-header): Emit search analytics data from global header search bar

* add changeset

* add analytics API in the application

Author: karthikjeeyar

workspaces/global-header/.changeset/tall-zoos-pump.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Emit search analytics events for search and discover events

workspaces/global-header/packages/app/src/apis.ts

@@ -20,6 +20,8 @@ import {
   ScmAuth,
 } from '@backstage/integration-react';
 import {
+  analyticsApiRef,
+  AnalyticsEvent,
   AnyApiFactory,
   configApiRef,
   createApiFactory,
@@ -44,4 +46,11 @@ export const apis: AnyApiFactory[] = [
     factory: ({ fetchApi, discoveryApi }) =>
       new NotificationsClient({ fetchApi, discoveryApi }),
   }),
+
+  createApiFactory(analyticsApiRef, {
+    captureEvent: (event: AnalyticsEvent) => {
+      // eslint-disable-next-line no-console
+      console.log('Captured event:', event);
+    },
+  }),
 ];

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchBar.test.tsx

@@ -25,6 +25,10 @@ import { mockApis, TestApiProvider } from '@backstage/test-utils';
 import { MemoryRouter, useNavigate } from 'react-router-dom';
 import { configApiRef } from '@backstage/core-plugin-api';
 
+jest.mock('../../hooks/useDebouncedCallback', () => ({
+  useDebouncedCallback: (fn: (...args: any[]) => void) => fn,
+}));
+
 const createInitialState = ({
   term = 'term',
   filters = {},

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchBar.tsx

@@ -18,13 +18,15 @@ import React, { useEffect, useRef, useState } from 'react';
 import {
   SearchResultState,
   SearchResultProps,
+  useSearch,
 } from '@backstage/plugin-search-react';
 import Autocomplete from '@mui/material/Autocomplete';
 import { createSearchLink } from '../../utils/stringUtils';
 import { useNavigate } from 'react-router-dom';
 import { SearchInput } from './SearchInput';
 import { SearchOption } from './SearchOption';
 import { useTheme } from '@mui/material/styles';
+import { useDebouncedCallback } from '../../hooks/useDebouncedCallback';
 
 interface SearchBarProps {
   query: SearchResultProps['query'];
@@ -36,6 +38,12 @@ export const SearchBar = (props: SearchBarProps) => {
   const theme = useTheme();
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const highlightedIndexRef = useRef(highlightedIndex);
+  const { setTerm } = useSearch();
+
+  const onInputChange = useDebouncedCallback((_, inputValue) => {
+    setSearchTerm(inputValue);
+    setTerm(inputValue);
+  }, 300);
 
   useEffect(() => {
     highlightedIndexRef.current = highlightedIndex;
@@ -64,7 +72,7 @@ export const SearchBar = (props: SearchBarProps) => {
             loading={loading}
             value={query?.term ?? ''}
             getOptionLabel={option => option ?? ''}
-            onInputChange={(_, inputValue) => setSearchTerm(inputValue)}
+            onInputChange={onInputChange}
             onHighlightChange={(_, option) =>
               setHighlightedIndex(options.indexOf(option ?? ''))
             }

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchResultItem.test.tsx

@@ -15,15 +15,24 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { SearchResultItem } from './SearchResultItem';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Result, SearchDocument } from '@backstage/plugin-search-common';
+import { useAnalytics } from '@backstage/core-plugin-api';
 
 jest.mock('../../utils/stringUtils', () => ({
   highlightMatch: jest.fn((text, _) => text),
 }));
 
+jest.mock('@backstage/core-plugin-api', () => {
+  const actual = jest.requireActual('@backstage/core-plugin-api');
+  return {
+    ...actual,
+    useAnalytics: jest.fn(),
+  };
+});
+
 describe('SearchResultItem', () => {
   const renderProps = {};
   const query = { term: 'test' };
@@ -93,4 +102,37 @@ describe('SearchResultItem', () => {
 
     expect(screen.getByRole('link')).toHaveAttribute('href', '/');
   });
+
+  it('should trigger the analytics discover event', () => {
+    const result = {
+      rank: 1,
+      document: { title: 'Result 1', location: '/result-1' },
+    } as Result<SearchDocument>;
+
+    const captureEventMock = jest.fn();
+    (useAnalytics as jest.Mock).mockReturnValue({
+      captureEvent: captureEventMock,
+    });
+
+    render(
+      <Router>
+        <SearchResultItem
+          option="Result 1"
+          query={query}
+          result={result}
+          renderProps={renderProps}
+        />
+      </Router>,
+    );
+    const resultItem = screen.getByText('Result 1');
+
+    fireEvent.click(resultItem);
+
+    expect(useAnalytics).toHaveBeenCalled();
+    expect(captureEventMock).toHaveBeenCalled();
+    expect(captureEventMock).toHaveBeenCalledWith('discover', 'Result 1', {
+      attributes: { to: '/result-1' },
+      value: 1,
+    });
+  });
 });

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchResultItem.tsx

@@ -22,6 +22,7 @@ import Typography from '@mui/material/Typography';
 import { highlightMatch } from '../../utils/stringUtils';
 import { SearchResultProps } from '@backstage/plugin-search-react';
 import { Result, SearchDocument } from '@backstage/plugin-search-common';
+import { useAnalytics } from '@backstage/core-plugin-api';
 
 interface SearchResultItemProps {
   option: string;
@@ -37,14 +38,26 @@ export const SearchResultItem = ({
   renderProps,
 }: SearchResultItemProps) => {
   const isNoResultsFound = option === 'No results found';
+  const analytics = useAnalytics();
+
   return (
     <Box
       component={isNoResultsFound ? 'div' : Link}
       to={result?.document.location}
       underline="none"
       sx={{ width: '100%', ...(isNoResultsFound ? {} : { cursor: 'pointer' }) }}
     >
-      <ListItem {...renderProps} sx={{ py: 1 }}>
+      <ListItem
+        {...renderProps}
+        sx={{ py: 1 }}
+        onClick={e => {
+          analytics.captureEvent('discover', result?.document.title ?? '', {
+            attributes: { to: result?.document.location ?? '#' },
+            value: result?.rank,
+          });
+          renderProps?.onClick?.(e);
+        }}
+      >
         <Typography sx={{ color: 'text.primary', flexGrow: 1 }}>
           {isNoResultsFound
             ? option

workspaces/global-header/plugins/global-header/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const useDebouncedCallback = <T extends (...args: any[]) => void>(
+  callback: T,
+  delay: number,
+) => {
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return React.useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay],
+  );
+};