chore(metrics): add metrics to track search query in AL

packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx

@@ -1,6 +1,6 @@
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
 import {Redirect, useHistory} from 'react-router'
 import {Link} from 'react-router-dom'
@@ -11,6 +11,8 @@ import {ActivityCard, ActivityCardImage} from '../ActivityCard'
 import ActivityDetailsSidebar from '../ActivityDetailsSidebar'
 import {CategoryID, CATEGORY_THEMES, QUICK_START_CATEGORY_ID} from '../Categories'
 import {TemplateDetails} from './TemplateDetails'
+import SendClientSideEvent from '../../../utils/SendClientSideEvent'
+import useAtmosphere from '../../../hooks/useAtmosphere'
 
 graphql`
   fragment ActivityDetails_template on MeetingTemplate {
@@ -37,6 +39,7 @@ export const query = graphql`
   query ActivityDetailsQuery($activityId: ID!) {
     viewer {
       ...ActivityDetailsSidebar_viewer
+      activityLibrarySearch
       preferredTeamId
       tier
       activity(activityId: $activityId) {
@@ -61,16 +64,27 @@ interface Props {
 }
 
 const ActivityDetails = (props: Props) => {
+  const atmosphere = useAtmosphere()
   const {queryRef} = props
   const data = usePreloadedQuery<ActivityDetailsQuery>(query, queryRef)
   const {viewer} = data
-  const {activity, preferredTeamId, teams} = viewer
+  const {activity, activityLibrarySearch, preferredTeamId, teams} = viewer
   const history = useHistory<{prevCategory?: string}>()
   const [isEditing, setIsEditing] = useState(false)
 
   if (!activity) {
     return <Redirect to='/activity-library' />
   }
+  useEffect(() => {
+    SendClientSideEvent(atmosphere, 'Viewed Template', {
+      meetingType: activity.type,
+      scope: activity.scope,
+      templateName: activity.name,
+      isFree: activity.isFree,
+      queryString: activityLibrarySearch
+    })
+  }, [])
+
   const {category, illustrationUrl, viewerLowestScope} = activity
   const prevCategory = history.location.state?.prevCategory
   const categoryLink = `/activity-library/category/${

packages/client/components/ActivityLibrary/ActivityLibrary.tsx

@@ -2,7 +2,7 @@ import * as ScrollArea from '@radix-ui/react-scroll-area'
 import graphql from 'babel-plugin-relay/macro'
 import clsx from 'clsx'
 import React, {useMemo} from 'react'
-import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
+import {PreloadedQuery, commitLocalUpdate, usePreloadedQuery} from 'react-relay'
 import {Redirect} from 'react-router'
 import {Link} from 'react-router-dom'
 import {ActivityLibraryQuery} from '~/__generated__/ActivityLibraryQuery.graphql'
@@ -25,6 +25,8 @@ import {
 } from './Categories'
 import CreateActivityCard from './CreateActivityCard'
 import SearchBar from './SearchBar'
+import useAtmosphere from '../../hooks/useAtmosphere'
+import SendClientSideEvent from '../../utils/SendClientSideEvent'
 
 graphql`
   fragment ActivityLibrary_templateSearchDocument on MeetingTemplate {
@@ -189,12 +191,26 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
 const MAX_PER_SUBCATEGORY = 6
 
 export const ActivityLibrary = (props: Props) => {
+  const atmosphere = useAtmosphere()
   const {queryRef} = props
   const data = usePreloadedQuery<ActivityLibraryQuery>(query, queryRef)
   const {viewer} = data
   const {featureFlags, availableTemplates, organizations} = viewer
   const hasOneOnOneFeatureFlag = !!organizations.find((org) => org.featureFlags.oneOnOne)
 
+  const setSearch = (value: string) => {
+    commitLocalUpdate(atmosphere, (store) => {
+      const viewer = store.getRoot().getLinkedRecord('viewer')
+      if (!viewer) return
+      viewer.setValue(value, 'activityLibrarySearch')
+    })
+    if (value.length > 2) {
+      SendClientSideEvent(atmosphere, 'Activity Library Searched', {
+        queryString: value
+      })
+    }
+  }
+
   const templates = useMemo(() => {
     const templatesMap = availableTemplates.edges.map((edge) => edge.node)
     if (!hasOneOnOneFeatureFlag) {
@@ -279,7 +295,13 @@ export const ActivityLibrary = (props: Props) => {
               </div>
             </div>
             <div className='hidden grow md:block'>
-              <SearchBar searchQuery={searchQuery} onChange={onQueryChange} />
+              <SearchBar
+                searchQuery={searchQuery}
+                onChange={(e) => {
+                  onQueryChange(e)
+                  setSearch(e.target.value)
+                }}
+              />
             </div>
             <Link
               className='rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600'
@@ -289,7 +311,13 @@ export const ActivityLibrary = (props: Props) => {
             </Link>
           </div>
           <div className='mt-4 flex w-full md:hidden'>
-            <SearchBar searchQuery={searchQuery} onChange={onQueryChange} />
+            <SearchBar
+              searchQuery={searchQuery}
+              onChange={(e) => {
+                onQueryChange(e)
+                setSearch(e.target.value)
+              }}
+            />
           </div>
         </div>
       </div>

packages/client/schemaExtensions/clientSchema.graphql

@@ -69,6 +69,7 @@ extend type User {
   # If positive, client clock is ahead of server clock by this many ms
   clientClockOffset: Int
   dashSearch: String
+  activityLibrarySearch: String
   pageName: String
   # The team we should default to in team pickers, etc.
   preferredTeamId: ID