diff --git a/frontend/src/lib/components/CommandBar/actionBarLogic.ts b/frontend/src/lib/components/CommandBar/actionBarLogic.ts index 59ca378b25952..db1ad4f236874 100644 --- a/frontend/src/lib/components/CommandBar/actionBarLogic.ts +++ b/frontend/src/lib/components/CommandBar/actionBarLogic.ts @@ -1,5 +1,6 @@ import { afterMount, beforeUnmount, connect, kea, listeners, path } from 'kea' import { subscriptions } from 'kea-subscriptions' +import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { commandPaletteLogic } from '../CommandPalette/commandPaletteLogic' import type { actionBarLogicType } from './actionBarLogicType' @@ -24,6 +25,8 @@ export const actionBarLogic = kea([ 'onMouseEnterResult', 'onMouseLeaveResult', ], + eventUsageLogic, + ['reportCommandBarActionSearch', 'reportCommandBarActionResultExecuted'], ], values: [ commandBarLogic, @@ -44,6 +47,12 @@ export const actionBarLogic = kea([ // listen on hide action from legacy palette, and hide command bar actions.hideCommandBar() }, + setInput: ({ input }) => { + actions.reportCommandBarActionSearch(input) + }, + executeResult: ({ result }) => { + actions.reportCommandBarActionResultExecuted(result.display) + }, })), subscriptions(({ values, actions }) => ({ barStatus: (value, oldvalue) => { diff --git a/frontend/src/lib/components/CommandBar/commandBarLogic.ts b/frontend/src/lib/components/CommandBar/commandBarLogic.ts index 0cfcff7b5be64..8f99b98842be7 100644 --- a/frontend/src/lib/components/CommandBar/commandBarLogic.ts +++ b/frontend/src/lib/components/CommandBar/commandBarLogic.ts @@ -1,11 +1,16 @@ -import { actions, afterMount, beforeUnmount, kea, path, reducers } from 'kea' +import { actions, afterMount, beforeUnmount, connect, kea, path, reducers } from 'kea' +import { subscriptions } from 'kea-subscriptions' import { shouldIgnoreInput } from 'lib/utils' +import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import type { commandBarLogicType } from './commandBarLogicType' import { BarStatus } from './types' export const commandBarLogic = kea([ path(['lib', 'components', 'CommandBar', 'commandBarLogic']), + connect({ + actions: [eventUsageLogic, ['reportCommandBarStatusChanged']], + }), actions({ setCommandBar: (status: BarStatus, initialQuery?: string) => ({ status, initialQuery }), hideCommandBar: true, @@ -36,6 +41,13 @@ export const commandBarLogic = kea([ }, ], }), + subscriptions(({ actions }) => ({ + barStatus: (status, prevStatus) => { + if (prevStatus !== undefined) { + actions.reportCommandBarStatusChanged(status) + } + }, + })), afterMount(({ actions, cache }) => { // register keyboard shortcuts cache.onKeyDown = (event: KeyboardEvent) => { diff --git a/frontend/src/lib/components/CommandBar/searchBarLogic.ts b/frontend/src/lib/components/CommandBar/searchBarLogic.ts index be042869050c0..ee0625d21d312 100644 --- a/frontend/src/lib/components/CommandBar/searchBarLogic.ts +++ b/frontend/src/lib/components/CommandBar/searchBarLogic.ts @@ -3,6 +3,7 @@ import { loaders } from 'kea-loaders' import { router } from 'kea-router' import { subscriptions } from 'kea-subscriptions' import api, { CountedPaginatedResponse } from 'lib/api' +import { eventUsageLogic } from 'lib/utils/eventUsageLogic' import { urls } from 'scenes/urls' import { groupsModel } from '~/models/groupsModel' @@ -46,7 +47,12 @@ export const searchBarLogic = kea([ path(['lib', 'components', 'CommandBar', 'searchBarLogic']), connect({ values: [commandBarLogic, ['initialQuery', 'barStatus'], groupsModel, ['groupTypes', 'aggregationLabel']], - actions: [commandBarLogic, ['hideCommandBar', 'setCommandBar', 'clearInitialQuery']], + actions: [ + commandBarLogic, + ['hideCommandBar', 'setCommandBar', 'clearInitialQuery'], + eventUsageLogic, + ['reportCommandBarSearch', 'reportCommandBarSearchResultOpened'], + ], }), actions({ search: true, @@ -59,13 +65,15 @@ export const searchBarLogic = kea([ setIsAutoScrolling: (scrolling: boolean) => ({ scrolling }), openResult: (index: number) => ({ index }), }), - loaders(({ values }) => ({ + loaders(({ values, actions }) => ({ rawSearchResponse: [ null as SearchResponse | null, { loadSearchResponse: async (_, breakpoint) => { await breakpoint(DEBOUNCE_MS) + actions.reportCommandBarSearch(values.searchQuery.length) + if (clickhouseTabs.includes(values.activeTab)) { // prevent race conditions when switching tabs quickly return values.rawSearchResponse @@ -424,6 +432,7 @@ export const searchBarLogic = kea([ const result = values.combinedSearchResults![index] router.actions.push(urlForResult(result)) actions.hideCommandBar() + actions.reportCommandBarSearchResultOpened(result.type) }, })), subscriptions(({ values, actions }) => ({ diff --git a/frontend/src/lib/components/CommandBar/types.ts b/frontend/src/lib/components/CommandBar/types.ts index 26ba63c7c302a..8deec954a9c35 100644 --- a/frontend/src/lib/components/CommandBar/types.ts +++ b/frontend/src/lib/components/CommandBar/types.ts @@ -7,7 +7,7 @@ export enum BarStatus { SHOW_SHORTCUTS = 'show_shortcuts', } -export type ResultType = SearchableEntity | 'person' +export type ResultType = SearchableEntity | 'person' | 'group' export type PersonResult = { type: 'person' diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts index 15401da60b193..4ffa1b9efe939 100644 --- a/frontend/src/lib/utils/eventUsageLogic.ts +++ b/frontend/src/lib/utils/eventUsageLogic.ts @@ -1,4 +1,5 @@ import { actions, connect, kea, listeners, path } from 'kea' +import { BarStatus, ResultType } from 'lib/components/CommandBar/types' import { convertPropertyGroupToProperties, isGroupPropertyFilter } from 'lib/components/PropertyFilters/utils' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import type { Dayjs } from 'lib/dayjs' @@ -491,6 +492,12 @@ export const eventUsageLogic = kea([ reportOnboardingProductSelected: (productKey: string) => ({ productKey }), reportOnboardingCompleted: (productKey: string) => ({ productKey }), reportSubscribedDuringOnboarding: (productKey: string) => ({ productKey }), + // command bar + reportCommandBarStatusChanged: (status: BarStatus) => ({ status }), + reportCommandBarSearch: (queryLength: number) => ({ queryLength }), + reportCommandBarSearchResultOpened: (type: ResultType) => ({ type }), + reportCommandBarActionSearch: (query: string) => ({ query }), + reportCommandBarActionResultExecuted: (resultDisplay) => ({ resultDisplay }), }), listeners(({ values }) => ({ reportAxisUnitsChanged: (properties) => { @@ -1200,5 +1207,21 @@ export const eventUsageLogic = kea([ product_key: productKey, }) }, + // command bar + reportCommandBarStatusChanged: ({ status }) => { + posthog.capture('command bar status changed', { status }) + }, + reportCommandBarSearch: ({ queryLength }) => { + posthog.capture('command bar search', { queryLength }) + }, + reportCommandBarSearchResultOpened: ({ type }) => { + posthog.capture('command bar search result opened', { type }) + }, + reportCommandBarActionSearch: ({ query }) => { + posthog.capture('command bar action search', { query }) + }, + reportCommandBarActionResultExecuted: ({ resultDisplay }) => { + posthog.capture('command bar search result executed', { resultDisplay }) + }, })), ])