feat: Action filtering for webhook apps

ee/api/test/test_action.py

@@ -78,8 +78,8 @@ def test_actions_does_not_nplus1(self):
             action.tagged_items.create(tag=tag)
 
         # django_session + user + team  + look up if rate limit is enabled (cached after first lookup)
-        # + organizationmembership + organization + action + taggeditem
-        with self.assertNumQueries(8):
+        # + organizationmembership + organization + action + taggeditem + plugin_configs
+        with self.assertNumQueries(10):
             response = self.client.get(f"/api/projects/{self.team.id}/actions")
         self.assertEqual(response.json()["results"][0]["tags"][0], "tag")
         self.assertEqual(response.status_code, status.HTTP_200_OK)

frontend/src/lib/components/ActionSelect.tsx

@@ -0,0 +1,49 @@
+import { LemonButtonProps } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
+import { actionLogic } from 'scenes/actions/actionLogic'
+
+interface LemonSelectActionProps {
+    value?: number | null
+    onChange?: (value: number | null) => void
+    disabled?: boolean
+    placeholder?: string
+    allowClear?: boolean
+    size?: LemonButtonProps['size']
+    fullWidth?: boolean
+}
+
+export function LemonSelectAction({
+    value,
+    onChange = () => {},
+    disabled,
+    placeholder = 'Select an action',
+    allowClear,
+    size,
+}: LemonSelectActionProps): JSX.Element {
+    const { action } = useValues(actionLogic({ id: value ?? undefined }))
+
+    return (
+        <TaxonomicPopover
+            groupType={TaxonomicFilterGroupType.Actions}
+            onChange={onChange}
+            disabled={disabled}
+            value={value}
+            type="secondary"
+            placeholder={placeholder}
+            data-attr="event-name-box"
+            renderValue={(v) =>
+                v !== null ? (
+                    <>
+                        <span>{value} - </span>
+                        <span>{action?.name ?? 'Loading...'}</span>
+                    </>
+                ) : null
+            }
+            allowClear={allowClear}
+            size={size}
+            fullWidth
+        />
+    )
+}

frontend/src/lib/constants.tsx

@@ -205,6 +205,7 @@ export const FEATURE_FLAGS = {
     HEATMAPS_UI: 'heatmaps-ui', // owner: @benjackwhite
     THEME: 'theme', // owner: @aprilfools
     SESSION_TABLE_PROPERTY_FILTERS: 'session-table-property-filters', // owner: @robbie-c
+    PLUGINS_ACTION_MATCHING: 'plugins-action-matching', // owner: @benjackwhite
     SESSION_REPLAY_HOG_QL_FILTERING: 'session-replay-hogql-filtering', // owner: #team-replay
     INSIGHT_LOADING_BAR: 'insight-loading-bar', // owner: @aspicer
     SESSION_REPLAY_ARTIFICIAL_LAG: 'artificial-lag-query-performance', // owner: #team-replay

frontend/src/scenes/actions/Action.tsx

@@ -11,6 +11,7 @@ import { NodeKind } from '~/queries/schema'
 import { ActionType } from '~/types'
 
 import { ActionEdit } from './ActionEdit'
+import { ActionPlugins } from './ActionPlugins'
 
 export const scene: SceneExport = {
     logic: actionLogic,
@@ -46,6 +47,8 @@ export function Action({ id }: { id?: ActionType['id'] } = {}): JSX.Element {
             <ActionEdit id={id} action={action} />
             {id && (
                 <>
+                    <ActionPlugins />
+
                     {isComplete ? (
                         <div className="mt-8">
                             <h2 className="subtitle">Matching events</h2>

frontend/src/scenes/actions/ActionPlugins.tsx

@@ -0,0 +1,49 @@
+import { LemonButton } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
+import { actionLogic } from 'scenes/actions/actionLogic'
+import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
+import { urls } from 'scenes/urls'
+
+import { PipelineNodeTab, PipelineStage } from '~/types'
+
+export function ActionPlugins(): JSX.Element | null {
+    const { action } = useValues(actionLogic)
+
+    if (!action?.plugin_configs?.length) {
+        return null
+    }
+
+    return (
+        <>
+            <h2 className="subtitle">Connected apps</h2>
+
+            {action.plugin_configs.map((pluginConfig) => (
+                <div key={pluginConfig.id} className="flex items-center gap-2 border rounded bg-bg-light p-2">
+                    <PluginImage plugin={pluginConfig.plugin_info} size="small" />
+                    <LemonTableLink
+                        title={pluginConfig.plugin_info.name}
+                        to={urls.pipelineNode(
+                            PipelineStage.Destination,
+                            pluginConfig.id,
+                            PipelineNodeTab.Configuration
+                        )}
+                    />
+                    <span className="flex-1" />
+
+                    <LemonButton
+                        type="secondary"
+                        size="small"
+                        to={urls.pipelineNode(
+                            PipelineStage.Destination,
+                            pluginConfig.id,
+                            PipelineNodeTab.Configuration
+                        )}
+                    >
+                        Configure
+                    </LemonButton>
+                </div>
+            ))}
+        </>
+    )
+}

frontend/src/scenes/actions/actionEditLogic.tsx

@@ -17,17 +17,13 @@ import { ActionStepType, ActionType } from '~/types'
 import type { actionEditLogicType } from './actionEditLogicType'
 import { actionLogic } from './actionLogic'
 
-export type NewActionType = Partial<ActionType> &
-    Pick<ActionType, 'name' | 'post_to_slack' | 'slack_message_format' | 'steps'>
-export type ActionEditType = ActionType | NewActionType
-
 export interface SetActionProps {
     merge?: boolean
 }
 
 export interface ActionEditLogicProps {
     id?: number
-    action?: ActionEditType
+    action?: ActionType | null
 }
 
 export const DEFAULT_ACTION_STEP: ActionStepType = {
@@ -36,7 +32,7 @@ export const DEFAULT_ACTION_STEP: ActionStepType = {
 }
 
 export const actionEditLogic = kea<actionEditLogicType>([
-    path(['scenes', 'actions', 'actionEditLogic']),
+    path((key) => ['scenes', 'actions', 'actionEditLogic', key]),
     props({} as ActionEditLogicProps),
     key((props) => props.id || 'new'),
     connect({
@@ -51,7 +47,7 @@ export const actionEditLogic = kea<actionEditLogicType>([
         values: [sceneLogic, ['activeScene']],
     }),
     actions({
-        setAction: (action: Partial<ActionEditType>, options: SetActionProps = { merge: true }) => ({
+        setAction: (action: Partial<ActionType>, options: SetActionProps = { merge: true }) => ({
             action,
             options,
         }),
@@ -70,10 +66,12 @@ export const actionEditLogic = kea<actionEditLogicType>([
 
     forms(({ actions, props }) => ({
         action: {
-            defaults: props.action ?? {
-                name: '',
-                steps: [{ event: '$pageview' }],
-            },
+            defaults:
+                props.action ??
+                ({
+                    name: '',
+                    steps: [DEFAULT_ACTION_STEP],
+                } as ActionType),
 
             submit: async (updatedAction, breakpoint) => {
                 let action: ActionType
@@ -122,10 +120,10 @@ export const actionEditLogic = kea<actionEditLogicType>([
 
     loaders(({ props, values }) => ({
         action: [
-            { ...props.action } as ActionEditType,
+            { ...props.action } as ActionType,
             {
                 setAction: ({ action, options: { merge } }) =>
-                    (merge ? { ...values.action, ...action } : action) as ActionEditType,
+                    (merge ? { ...values.action, ...action } : action) as ActionType,
             },
         ],
     })),
@@ -136,19 +134,23 @@ export const actionEditLogic = kea<actionEditLogicType>([
             if (!actionId) {
                 return
             }
-            await deleteWithUndo({
-                endpoint: api.actions.determineDeleteEndpoint(),
-                object: values.action,
-                callback: (undo: boolean) => {
-                    if (undo) {
-                        router.actions.push(urls.action(actionId))
-                    } else {
-                        actions.resetAction()
-                        router.actions.push(urls.actions())
-                        actions.loadActions()
-                    }
-                },
-            })
+            try {
+                await deleteWithUndo({
+                    endpoint: api.actions.determineDeleteEndpoint(),
+                    object: values.action,
+                    callback: (undo: boolean) => {
+                        if (undo) {
+                            router.actions.push(urls.action(actionId))
+                        } else {
+                            actions.resetAction()
+                            router.actions.push(urls.actions())
+                            actions.loadActions()
+                        }
+                    },
+                })
+            } catch (e: any) {
+                lemonToast.error(`Error deleting action: ${e.detail}`)
+            }
         },
     })),
 

frontend/src/scenes/actions/actionLogic.ts

@@ -24,14 +24,17 @@ export const actionLogic = kea<actionLogicType>([
         setIsComplete: (isComplete) => ({ isComplete }),
     })),
     loaders(({ props }) => ({
-        action: {
-            loadAction: async () => {
-                if (!props.id) {
-                    throw new Error('Cannot fetch an unsaved action from the API.')
-                }
-                return await api.actions.get(props.id)
+        action: [
+            null as ActionType | null,
+            {
+                loadAction: async () => {
+                    if (!props.id) {
+                        throw new Error('Cannot fetch an unsaved action from the API.')
+                    }
+                    return await api.actions.get(props.id)
+                },
             },
-        },
+        ],
     })),
     reducers(() => ({
         pollTimeout: [

frontend/src/scenes/pipeline/Destinations.tsx

@@ -44,7 +44,6 @@ export function Destinations(): JSX.Element {
 
 export function DestinationsTable({ inOverview = false }: { inOverview?: boolean }): JSX.Element {
     const { loading, destinations } = useValues(pipelineDestinationsLogic)
-
     const data = inOverview ? destinations.filter((destination) => destination.enabled) : destinations
 
     return (