feat: Plausible search (#4625)

frontend/src/component/common/Search/Search.test.tsx

@@ -21,10 +21,7 @@ const testDisplayComponent = (
 );
 
 test('should read saved query from local storage', async () => {
-    const { value, setValue } = createLocalStorage(
+    const { setValue } = createLocalStorage('Search:localStorageId:v1', {});
-        'Search:localStorageId:v1',
-        {}
-    );
     setValue({
         query: 'oldquery',
     });

frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx

@@ -58,7 +58,9 @@ export const SearchDescription: VFC<ISearchDescriptionProps> = ({
                                     {filter.values.join(',')}
                                 </StyledCode>{' '}
                                 in {filter.header}. Options:{' '}
-                                {filter.options.slice(0, 10).join(', ')}
+                                {[...new Set(filter.options)]
+                                    .slice(0, 10)
+                                    .join(', ')}
                             </p>
                         ))}
                     </>

frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx

@@ -13,6 +13,7 @@ import {
     SearchInstructions,
     StyledCode,
 } from './SearchInstructions/SearchInstructions';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
     position: 'absolute',
@@ -55,13 +56,12 @@ interface SearchSuggestionsProps {
 
 const quote = (item: string) => (item.includes(' ') ? `"${item}"` : item);
 
-const randomIndex = (arr: any[]) => Math.floor(Math.random() * arr.length);
-
 export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
     getSearchContext,
     onSuggestion,
     savedQuery,
 }) => {
+    const { trackEvent } = usePlausibleTracker();
     const searchContext = getSearchContext();
 
     const filters = getFilterableColumns(searchContext.columns)
@@ -116,7 +116,14 @@ export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
                         <StyledBox>
                             <StyledHistory />
                             <StyledCode
-                                onClick={() => onSuggestion(savedQuery || '')}
+                                onClick={() => {
+                                    onSuggestion(savedQuery || '');
+                                    trackEvent('search-filter-suggestions', {
+                                        props: {
+                                            eventType: 'saved query',
+                                        },
+                                    });
+                                }}
                             >
                                 <span>{savedQuery}</span>
                             </StyledCode>
@@ -146,7 +153,14 @@ export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
                                 searchableColumnsString={
                                     searchableColumnsString
                                 }
-                                onClick={onSuggestion}
+                                onClick={suggestion => {
+                                    onSuggestion(suggestion);
+                                    trackEvent('search-filter-suggestions', {
+                                        props: {
+                                            eventType: 'filter',
+                                        },
+                                    });
+                                }}
                             />
                         }
                     />
@@ -159,9 +173,16 @@ export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
                     show="Combine filters and search: "
                 />
                 <StyledCode
-                    onClick={() =>
+                    onClick={() => {
-                        onSuggestion(selectedFilter + ' ' + suggestedTextSearch)
+                        onSuggestion(
-                    }
+                            selectedFilter + ' ' + suggestedTextSearch
+                        );
+                        trackEvent('search-filter-suggestions', {
+                            props: {
+                                eventType: 'search and filter',
+                            },
+                        });
+                    }}
                 >
                     <span key={selectedFilter}>{selectedFilter}</span>{' '}
                     <span>{suggestedTextSearch}</span>

frontend/src/hooks/usePlausibleTracker.ts

@@ -43,7 +43,8 @@ export type CustomEvents =
     | 'strategy-add'
     | 'playground'
     | 'feature-type-edit'
-    | 'strategy-variants';
+    | 'strategy-variants'
+    | 'search-filter-suggestions';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);