feat: capture quick filters related events (#42481)

Author: ablaszkiewicz

frontend/src/lib/components/QuickFilters/consts.ts

@@ -0,0 +1,6 @@
+export const QuickFiltersEvents = {
+    QuickFilterCreated: 'quick filter created',
+    QuickFilterUpdated: 'quick filter updated',
+    QuickFilterSelected: 'quick filter selected',
+    QuickFiltersModalOpened: 'quick filters modal opened',
+}

frontend/src/lib/components/QuickFilters/quickFiltersLogic.ts

@@ -1,12 +1,14 @@
 import { actions, afterMount, kea, key, path, props } from 'kea'
 import { loaders } from 'kea-loaders'
+import posthog from 'posthog-js'
 
 import api from 'lib/api'
 import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 
 import { QuickFilterContext } from '~/queries/schema/schema-general'
 import { QuickFilter } from '~/types'
 
+import { QuickFiltersEvents } from './consts'
 import type { quickFiltersLogicType } from './quickFiltersLogicType'
 
 export interface QuickFiltersLogicProps {
@@ -42,12 +44,27 @@ export const quickFiltersLogic = kea<quickFiltersLogicType>([
                         ...payload,
                         contexts: [props.context],
                     })
+
                     lemonToast.success('Quick filter created successfully')
+                    posthog.capture(QuickFiltersEvents.QuickFilterCreated, {
+                        name: payload.name,
+                        property_name: payload.property_name,
+                        type: payload.type,
+                        options: payload.options,
+                        context: props.context,
+                    })
                     return [newFilter, ...values.quickFilters]
                 },
                 updateFilter: async ({ id, payload }) => {
                     const updatedFilter = await api.quickFilters.update(id, payload)
                     lemonToast.success('Quick filter updated successfully')
+                    posthog.capture(QuickFiltersEvents.QuickFilterUpdated, {
+                        ...(payload.name && { name: payload.name }),
+                        ...(payload.property_name && { property_name: payload.property_name }),
+                        ...(payload.type && { type: payload.type }),
+                        ...(payload.options && { options: payload.options }),
+                        context: props.context,
+                    })
                     return values.quickFilters.map((f: QuickFilter) => (f.id === id ? updatedFilter : f))
                 },
                 deleteFilter: async ({ id }) => {

frontend/src/lib/components/QuickFilters/quickFiltersModalLogic.ts

@@ -1,7 +1,9 @@
 import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import posthog from 'posthog-js'
 
 import { QuickFilter } from '~/types'
 
+import { QuickFiltersEvents } from './consts'
 import { QuickFiltersLogicProps, quickFiltersLogic } from './quickFiltersLogic'
 import type { quickFiltersModalLogicType } from './quickFiltersModalLogicType'
 
@@ -65,7 +67,7 @@ export const quickFiltersModalLogic = kea<quickFiltersModalLogicType>([
         ],
     }),
 
-    listeners(({ actions }) => ({
+    listeners(({ actions, props }) => ({
         startAddNew: () => {
             actions.setEditingFilter(null)
             actions.setView('form')
@@ -82,5 +84,10 @@ export const quickFiltersModalLogic = kea<quickFiltersModalLogicType>([
         handleFormBack: () => {
             actions.setView('list')
         },
+        openModal: () => {
+            posthog.capture(QuickFiltersEvents.QuickFiltersModalOpened, {
+                context: props.context,
+            })
+        },
     })),
 ])

frontend/src/lib/components/QuickFilters/quickFiltersSectionLogic.ts

@@ -1,10 +1,12 @@
 import { actions, connect, kea, key, listeners, path, props, reducers } from 'kea'
+import posthog from 'posthog-js'
 
 import { quickFiltersLogic } from 'lib/components/QuickFilters'
 
 import { QuickFilterContext } from '~/queries/schema/schema-general'
 import { PropertyOperator, QuickFilterOption } from '~/types'
 
+import { QuickFiltersEvents } from './consts'
 import type { quickFiltersSectionLogicType } from './quickFiltersSectionLogicType'
 
 export interface SelectedQuickFilter {
@@ -58,12 +60,21 @@ export const quickFiltersSectionLogic = kea<quickFiltersSectionLogicType>([
         ],
     }),
 
-    listeners(({ actions, values }) => ({
+    listeners(({ actions, values, props }) => ({
         deleteFilter: ({ id }) => {
             const deletedFilter = values.quickFilters.find((f) => f.id === id)
             if (deletedFilter) {
                 actions.clearQuickFilter(deletedFilter.property_name)
             }
         },
+        setQuickFilterValue: ({ propertyName, option }) => {
+            posthog.capture(QuickFiltersEvents.QuickFilterSelected, {
+                name: values.quickFilters.find((f) => f.property_name === propertyName)?.name,
+                property_name: propertyName,
+                label: option.label,
+                value: option.value,
+                context: props.context,
+            })
+        },
     })),
 ])