feat: actions as saved filters

frontend/src/queries/nodes/DataTable/DataTable.tsx

@@ -1,5 +1,6 @@
 import './DataTable.scss'
 
+import { LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { BindLogic, useValues } from 'kea'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
@@ -12,6 +13,7 @@ import { EventDetails } from 'scenes/activity/explore/EventDetails'
 import { InsightEmptyState, InsightErrorState } from 'scenes/insights/EmptyStates'
 import { PersonDeleteModal } from 'scenes/persons/PersonDeleteModal'
 
+import { actionsModel } from '~/models/actionsModel'
 import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
 import { DateRange } from '~/queries/nodes/DataNode/DateRange'
 import { ElapsedTime } from '~/queries/nodes/DataNode/ElapsedTime'
@@ -134,6 +136,7 @@ export function DataTable({
     const { dataTableRows, columnsInQuery, columnsInResponse, queryWithDefaults, canSort, sourceFeatures } = useValues(
         dataTableLogic(dataTableLogicProps)
     )
+    const { actions } = useValues(actionsModel())
 
     const {
         showActions,
@@ -417,6 +420,24 @@ export function DataTable({
         showEventFilter && sourceFeatures.has(QueryFeature.eventNameFilter) ? (
             <EventName key="event-name" query={query.source as EventsQuery} setQuery={setQuerySource} />
         ) : null,
+        showEventFilter && (
+            <LemonSelect
+                value={(query.source as EventsQuery).actionId}
+                options={
+                    (actions || []).map(({ id, name }) => ({
+                        value: id,
+                        label: name,
+                    })) as LemonSelectOptions<number>
+                }
+                data-attr="event-type-filter"
+                dropdownMatchSelectWidth={false}
+                onChange={(value) => {
+                    setQuerySource({ ...query.source, actionId: value } as EventsQuery)
+                }}
+                placeholder="Saved filters"
+                size="small"
+            />
+        ),
         showSearch && sourceFeatures.has(QueryFeature.personsSearch) ? (
             <PersonsSearch key="persons-search" query={query.source as PersonsNode} setQuery={setQuerySource} />
         ) : null,

frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx

@@ -1,6 +1,6 @@
 import './PropertyGroupFilters.scss'
 
-import { IconCopy, IconPlusSmall, IconTrash } from '@posthog/icons'
+import { IconCopy, IconPlusSmall, IconStar, IconTrash } from '@posthog/icons'
 import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
@@ -44,6 +44,7 @@ export function PropertyGroupFilters({
         setOuterPropertyGroupsType,
         setInnerPropertyGroupType,
         setPropertyFilters,
+        saveFilterGroupAsAction,
     } = useActions(propertyGroupFilterLogic(logicProps))
 
     const showHeader = propertyGroupFilter.type && propertyGroupFilter.values.length > 1
@@ -95,6 +96,12 @@ export function PropertyGroupFilters({
                                                             onClick={() => duplicateFilterGroup(propertyGroupIndex)}
                                                             size="small"
                                                         />
+                                                        <LemonButton
+                                                            icon={<IconStar />}
+                                                            onClick={() => saveFilterGroupAsAction(propertyGroupIndex)}
+                                                            size="small"
+                                                            tooltip="Save filter as an action"
+                                                        />
                                                         <LemonButton
                                                             icon={<IconTrash />}
                                                             onClick={() => removeFilterGroup(propertyGroupIndex)}

frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/propertyGroupFilterLogic.ts

@@ -1,7 +1,9 @@
 import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
+import { router } from 'kea-router'
 import { convertPropertiesToPropertyGroup } from 'lib/components/PropertyFilters/utils'
 import { objectsEqual } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { urls } from 'scenes/urls'
 
 import { StickinessQuery, TrendsQuery } from '~/queries/schema'
 import { FilterLogicalOperator, PropertyGroupFilter } from '~/types'
@@ -33,6 +35,7 @@ export const propertyGroupFilterLogic = kea<propertyGroupFilterLogicType>([
         setPropertyFilters: (properties, index: number) => ({ properties, index }),
         setInnerPropertyGroupType: (type: FilterLogicalOperator, index: number) => ({ type, index }),
         duplicateFilterGroup: (propertyGroupIndex: number) => ({ propertyGroupIndex }),
+        saveFilterGroupAsAction: (propertyGroupIndex: number) => ({ propertyGroupIndex }),
         addFilterGroup: true,
     }),
 
@@ -104,6 +107,11 @@ export const propertyGroupFilterLogic = kea<propertyGroupFilterLogicType>([
         update: () => {
             props.setQuery({ ...props.query, properties: values.filters })
         },
+        saveFilterGroupAsAction: ({ propertyGroupIndex }) => {
+            const filterGroup = values.filters.values[propertyGroupIndex]
+
+            router.actions.push(urls.createAction(filterGroup))
+        },
     })),
 
     selectors({

frontend/src/scenes/actions/Action.tsx

@@ -8,18 +8,28 @@ import { SceneExport } from 'scenes/sceneTypes'
 import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
 import { Query } from '~/queries/Query/Query'
 import { NodeKind } from '~/queries/schema'
-import { ActionType } from '~/types'
+import { ActionType, PropertyGroupFilterValue } from '~/types'
 
 import { ActionEdit } from './ActionEdit'
 
 export const scene: SceneExport = {
     logic: actionLogic,
     component: Action,
-    paramsToProps: ({ params: { id } }): ActionLogicProps => ({ id: id ? parseInt(id) : undefined }),
+    paramsToProps: ({ params: { id }, searchParams: { propertyFilter } }): ActionLogicProps => ({
+        id: id ? parseInt(id) : undefined,
+        propertyFilter: propertyFilter
+            ? (JSON.parse(decodeURIComponent(propertyFilter)) as PropertyGroupFilterValue)
+            : null,
+    }),
 }
 
-export function Action({ id }: { id?: ActionType['id'] } = {}): JSX.Element {
-    const { action, actionLoading, isComplete } = useValues(actionLogic)
+export interface ActionProps {
+    id?: ActionType['id']
+    propertyFilter?: PropertyGroupFilterValue
+}
+
+export function Action({ id }: ActionProps = {}): JSX.Element {
+    const { action, actionLoading, isComplete, propertyFilter } = useValues(actionLogic)
 
     if (actionLoading) {
         return (
@@ -43,7 +53,7 @@ export function Action({ id }: { id?: ActionType['id'] } = {}): JSX.Element {
 
     return (
         <>
-            <ActionEdit id={id} action={action} />
+            <ActionEdit id={id} action={action} propertyFilter={propertyFilter} />
             {id && (
                 <>
                     {isComplete ? (

frontend/src/scenes/actions/ActionEdit.tsx

@@ -24,11 +24,13 @@ import { ActionStepType, FilterLogicalOperator, ReplayTabs } from '~/types'
 import { actionEditLogic, ActionEditLogicProps, DEFAULT_ACTION_STEP } from './actionEditLogic'
 import { ActionStep } from './ActionStep'
 
-export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps): JSX.Element {
+export function ActionEdit({ action: loadedAction, id, propertyFilter }: ActionEditLogicProps): JSX.Element {
     const logicProps: ActionEditLogicProps = {
         id: id,
         action: loadedAction,
+        propertyFilter,
     }
+
     const logic = actionEditLogic(logicProps)
     const { action, actionLoading, actionChanged, migrationLoading, hasCohortFilters } = useValues(logic)
     const { submitAction, deleteAction, migrateToHogFunction } = useActions(logic)

frontend/src/scenes/actions/ActionHogFunctions.tsx

@@ -9,7 +9,7 @@ import { HogFunctionFiltersType } from '~/types'
 export function ActionHogFunctions(): JSX.Element | null {
     const { action } = useValues(actionLogic)
     const { hasCohortFilters, actionChanged, showCohortDisablesFunctionsWarning } = useValues(
-        actionEditLogic({ id: action?.id, action })
+        actionEditLogic({ id: action?.id, action, propertyFilter: null })
     )
     if (!action) {
         return null

frontend/src/scenes/actions/actionEditLogic.tsx

@@ -13,7 +13,7 @@ import { urls } from 'scenes/urls'
 
 import { actionsModel } from '~/models/actionsModel'
 import { tagsModel } from '~/models/tagsModel'
-import { ActionStepType, ActionType } from '~/types'
+import { ActionStepType, ActionType, FilterLogicalOperator, PropertyGroupFilterValue } from '~/types'
 
 import type { actionEditLogicType } from './actionEditLogicType'
 import { actionLogic } from './actionLogic'
@@ -25,13 +25,36 @@ export interface SetActionProps {
 export interface ActionEditLogicProps {
     id?: number
     action?: ActionType | null
+    propertyFilter: PropertyGroupFilterValue | null
 }
 
 export const DEFAULT_ACTION_STEP: ActionStepType = {
     event: '$pageview',
     href_matching: 'contains',
 }
 
+const getDefaultActionSteps = (propertyFilter: PropertyGroupFilterValue | null): ActionStepType[] => {
+    if (!propertyFilter) {
+        return [DEFAULT_ACTION_STEP]
+    }
+
+    if (propertyFilter.type === FilterLogicalOperator.And) {
+        // return just one match group
+        return [
+            {
+                event: null,
+                properties: propertyFilter.values,
+            } as ActionStepType,
+        ]
+    }
+
+    // separate step for each filter
+    return propertyFilter.values.map((property) => ({
+        event: null,
+        properties: [property],
+    })) as ActionStepType[]
+}
+
 export const actionEditLogic = kea<actionEditLogicType>([
     path((key) => ['scenes', 'actions', 'actionEditLogic', key]),
     props({} as ActionEditLogicProps),
@@ -71,7 +94,7 @@ export const actionEditLogic = kea<actionEditLogicType>([
                 props.action ??
                 ({
                     name: '',
-                    steps: [DEFAULT_ACTION_STEP],
+                    steps: getDefaultActionSteps(props.propertyFilter),
                 } as ActionType),
 
             submit: async (updatedAction, breakpoint) => {
@@ -156,8 +179,10 @@ export const actionEditLogic = kea<actionEditLogicType>([
                         if (hogFunctionListLogic.isMounted()) {
                             hogFunctionListLogic.actions.addHogFunction(hogFunction)
                         }
-                        if (actionLogic({ id: props.id }).isMounted()) {
-                            actionLogic({ id: props.id }).actions.updateAction({ post_to_slack: false })
+                        if (actionLogic({ id: props.id, propertyFilter: null }).isMounted()) {
+                            actionLogic({ id: props.id, propertyFilter: null }).actions.updateAction({
+                                post_to_slack: false,
+                            })
                         }
                         lemonToast.success('Action migrated to a destination!')
                     }
@@ -195,7 +220,7 @@ export const actionEditLogic = kea<actionEditLogicType>([
 
     afterMount(({ actions, props }) => {
         if (!props.id) {
-            actions.setActionValue('steps', [{ ...DEFAULT_ACTION_STEP }])
+            actions.setActionValue('steps', getDefaultActionSteps(props.propertyFilter))
         }
     }),
 

frontend/src/scenes/actions/actionLogic.ts

@@ -5,13 +5,14 @@ import { DataManagementTab } from 'scenes/data-management/DataManagementScene'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
-import { ActionType, Breadcrumb, HogFunctionType } from '~/types'
+import { ActionType, Breadcrumb, HogFunctionType, PropertyGroupFilterValue } from '~/types'
 
 import { actionEditLogic } from './actionEditLogic'
 import type { actionLogicType } from './actionLogicType'
 
 export interface ActionLogicProps {
     id?: ActionType['id']
+    propertyFilter: PropertyGroupFilterValue | null
 }
 
 export const actionLogic = kea<actionLogicType>([
@@ -104,6 +105,7 @@ export const actionLogic = kea<actionLogicType>([
             (s) => [s.action],
             (action) => action?.steps?.some((step) => step.properties?.find((p) => p.type === 'cohort')) ?? false,
         ],
+        propertyFilter: [(_, p) => [p.propertyFilter], (propertyFilter) => propertyFilter],
     }),
     listeners(({ actions, values }) => ({
         checkIsFinished: ({ action }) => {

frontend/src/scenes/urls.ts

@@ -15,6 +15,7 @@ import {
     PipelineStage,
     PipelineTab,
     ProductKey,
+    PropertyGroupFilterValue,
     RecordingUniversalFilters,
     ReplayTabs,
     SDKKey,
@@ -51,7 +52,11 @@ export const urls = {
         `/dashboard/${id}/subscriptions/${subscriptionId}`,
 
     sharedDashboard: (shareToken: string): string => `/shared_dashboard/${shareToken}`,
-    createAction: (): string => `/data-management/actions/new`,
+    createAction: (propertyFilter?: PropertyGroupFilterValue): string =>
+        combineUrl(
+            `/data-management/actions/new`,
+            propertyFilter ? { propertyFilter: encodeURIComponent(JSON.stringify(propertyFilter)) } : {}
+        ).url,
     duplicateAction: (action: ActionType | null): string => {
         const queryParams = action ? `?copy=${encodeURIComponent(JSON.stringify(action))}` : ''
         return `/data-management/actions/new/${queryParams}`