feat: Add Batch Exports Filters UI

frontend/src/lib/constants.tsx

@@ -212,6 +212,7 @@ export const FEATURE_FLAGS = {
     ALERTS: 'alerts', // owner: github.com/nikitaevg
     ERROR_TRACKING: 'error-tracking', // owner: #team-replay
     SETTINGS_BOUNCE_RATE_PAGE_VIEW_MODE: 'settings-bounce-rate-page-view-mode', // owner: @robbie-c
+    BATCH_EXPORT_FILTERING: 'batch-export-filtering', // owner: @tomasfarias
     SURVEYS_BRANCHING_LOGIC: 'surveys-branching-logic', // owner: @jurajmajerik #team-feature-success
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

frontend/src/scenes/batch_exports/BatchExportEditForm.tsx

@@ -1,5 +1,6 @@
 import { IconInfo } from '@posthog/icons'
 import { LemonButton, LemonCheckbox, LemonDivider, LemonInput, LemonSelect } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { FEATURE_FLAGS } from 'lib/constants'
@@ -101,13 +102,12 @@ export function BatchExportGeneralEditFields({
 
     return (
         <>
-            <div className="space-y-4 max-w-200">
+            <div className={clsx('space-y-4', !isPipeline && 'max-w-200')}>
                 {!isPipeline && (
                     <LemonField name="name" label="Name">
                         <LemonInput placeholder="Name your workflow for future reference" />
                     </LemonField>
                 )}
-
                 <div className="flex gap-2 items-start flex-wrap">
                     <LemonField
                         name="interval"
@@ -155,7 +155,6 @@ export function BatchExportGeneralEditFields({
                         </LemonField>
                     )}
                 </div>
-
                 {isPipeline ? (
                     <LemonBanner type="info">
                         The export will be created in a paused state, once configured your exporter, you can trigger a
@@ -167,7 +166,6 @@ export function BatchExportGeneralEditFields({
                         date. Once you have configured your exporter, you can trigger a manual export for historic data.
                     </LemonBanner>
                 )}
-
                 {isNew && !isPipeline ? (
                     <LemonField name="paused">
                         <LemonCheckbox
@@ -194,14 +192,16 @@ export function BatchExportGeneralEditFields({
 
 export function BatchExportsEditFields({
     isNew,
+    isPipeline = false,
     batchExportConfigForm,
 }: {
     isNew: boolean
+    isPipeline?: boolean
     batchExportConfigForm: BatchExportConfigurationForm
 }): JSX.Element {
     return (
         <>
-            <div className="space-y-4 max-w-200">
+            <div className={clsx('space-y-4', !isPipeline && 'max-w-200')}>
                 {batchExportConfigForm.destination === 'S3' ? (
                     <>
                         <div className="flex gap-4">

frontend/src/scenes/batch_exports/BatchExports.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { router } from 'kea-router'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { useEffect } from 'react'
 import { App } from 'scenes/App'
 import { urls } from 'scenes/urls'
@@ -20,6 +21,7 @@ export default {
         },
         mockDate: '2023-02-01',
         viewMode: 'story',
+        featureFlags: [FEATURE_FLAGS.BATCH_EXPORT_FILTERING],
     },
     decorators: [
         mswDecorator(

frontend/src/scenes/pipeline/PipelineBatchExportConfiguration.tsx

@@ -12,6 +12,7 @@ import { BatchExportConfigurationForm } from 'scenes/batch_exports/batchExportEd
 
 import { BATCH_EXPORT_SERVICE_NAMES, BatchExportService } from '~/types'
 
+import { PipelineNodeFilters } from './configuration/PipelineNodeFilters'
 import { pipelineBatchExportConfigurationLogic } from './pipelineBatchExportConfigurationLogic'
 import { RenderBatchExportIcon } from './utils'
 
@@ -27,6 +28,7 @@ export function PipelineBatchExportConfiguration({ service, id }: { service?: st
         batchExportConfigLoading,
         configurationChanged,
         batchExportConfig,
+        filteringEnabled,
     } = useValues(logic)
     const { resetConfiguration, submitConfiguration } = useActions(logic)
 
@@ -71,66 +73,75 @@ export function PipelineBatchExportConfiguration({ service, id }: { service?: st
                     formKey="configuration"
                     className="space-y-3"
                 >
-                    <div className="flex items-start gap-2 flex-wrap">
-                        <div className="border bg-bg-light p-3 rounded space-y-2 flex-1 min-w-100">
-                            <div className="flex flex-row gap-2 min-h-16 items-center">
-                                {configuration.destination ? (
-                                    <>
-                                        <RenderBatchExportIcon size="medium" type={configuration.destination} />
-                                        <div className="flex-1 font-semibold text-sm">{configuration.destination}</div>
-                                    </>
-                                ) : (
-                                    <div className="flex-1" />
-                                )}
+                    <div className="flex flex-wrap gap-4 items-start">
+                        <div className="flex flex-col gap-4 flex-1 min-w-100">
+                            <div className="border bg-bg-light rounded p-3 space-y-2">
+                                <div className="flex flex-row gap-2 min-h-16 items-center">
+                                    {configuration.destination ? (
+                                        <>
+                                            <RenderBatchExportIcon size="medium" type={configuration.destination} />
+                                            <div className="flex-1 font-semibold text-sm">
+                                                {configuration.destination}
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <div className="flex-1" />
+                                    )}
+
+                                    <LemonField
+                                        name="paused"
+                                        info="Start in a paused state or continuously exporting from now"
+                                    >
+                                        {({ value, onChange }) => (
+                                            <LemonSwitch
+                                                label="Paused"
+                                                onChange={() => onChange(!value)}
+                                                checked={value}
+                                                bordered
+                                            />
+                                        )}
+                                    </LemonField>
+                                </div>
 
                                 <LemonField
-                                    name="paused"
-                                    info="Start in a paused state or continuously exporting from now"
+                                    name="name"
+                                    label="Name"
+                                    info="Customising the name can be useful if multiple instances of the same type are used."
                                 >
-                                    {({ value, onChange }) => (
-                                        <LemonSwitch
-                                            label="Paused"
-                                            onChange={() => onChange(!value)}
-                                            checked={value}
-                                            bordered
-                                        />
-                                    )}
+                                    <LemonInput type="text" />
                                 </LemonField>
                             </div>
 
-                            <LemonField
-                                name="name"
-                                label="Name"
-                                info="Customising the name can be useful if multiple instances of the same type are used."
-                            >
-                                <LemonInput type="text" />
-                            </LemonField>
+                            {filteringEnabled ? (
+                                <>
+                                    <PipelineNodeFilters
+                                        description={
+                                            <>
+                                                The exported will to only include events that match any of the above
+                                                filters.
+                                            </>
+                                        }
+                                    />
+                                </>
+                            ) : null}
                         </div>
                         <div className="border bg-bg-light p-3 rounded flex-2 min-w-100">
-                            <BatchExportConfigurationFields
+                            <BatchExportGeneralEditFields
                                 isNew={isNew}
-                                formValues={configuration as BatchExportConfigurationForm}
+                                isPipeline
+                                batchExportConfigForm={configuration as BatchExportConfigurationForm}
+                            />
+                            <BatchExportsEditFields
+                                isNew={isNew}
+                                isPipeline
+                                batchExportConfigForm={configuration as BatchExportConfigurationForm}
                             />
                         </div>
                     </div>
+
                     <div className="flex gap-2 justify-end">{buttons}</div>
                 </Form>
             </>
         </div>
     )
 }
-
-function BatchExportConfigurationFields({
-    isNew,
-    formValues,
-}: {
-    isNew: boolean
-    formValues: BatchExportConfigurationForm
-}): JSX.Element {
-    return (
-        <>
-            <BatchExportGeneralEditFields isNew={isNew} isPipeline batchExportConfigForm={formValues} />
-            <BatchExportsEditFields isNew={isNew} batchExportConfigForm={formValues} />
-        </>
-    )
-}

frontend/src/scenes/pipeline/configuration/PipelineNodeFilters.tsx

@@ -0,0 +1,69 @@
+import { useValues } from 'kea'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { TestAccountFilterSwitch } from 'lib/components/TestAccountFiltersSwitch'
+import { LemonField } from 'lib/lemon-ui/LemonField'
+import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter'
+import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
+
+import { groupsModel } from '~/models/groupsModel'
+import { EntityTypes } from '~/types'
+
+export type PipelineNodeFiltersProps = {
+    description?: JSX.Element
+}
+
+export function PipelineNodeFilters({ description }: PipelineNodeFiltersProps): JSX.Element {
+    const { groupsTaxonomicTypes } = useValues(groupsModel)
+
+    return (
+        <div className="border bg-bg-light rounded p-3 space-y-2">
+            <LemonField name="filters" label="Filters by events and actions">
+                {({ value, onChange }) => (
+                    <>
+                        <TestAccountFilterSwitch
+                            checked={value?.filter_test_accounts ?? false}
+                            onChange={(val) => onChange({ ...value, filter_test_accounts: val })}
+                            fullWidth
+                        />
+                        <ActionFilter
+                            bordered
+                            filters={value ?? {}}
+                            setFilters={(payload) => {
+                                onChange({
+                                    ...payload,
+                                    filter_test_accounts: value?.filter_test_accounts,
+                                })
+                            }}
+                            typeKey="plugin-filters"
+                            mathAvailability={MathAvailability.None}
+                            hideRename
+                            hideDuplicate
+                            showNestedArrow={false}
+                            actionsTaxonomicGroupTypes={[
+                                TaxonomicFilterGroupType.Events,
+                                TaxonomicFilterGroupType.Actions,
+                            ]}
+                            propertiesTaxonomicGroupTypes={[
+                                TaxonomicFilterGroupType.EventProperties,
+                                TaxonomicFilterGroupType.EventFeatureFlags,
+                                TaxonomicFilterGroupType.Elements,
+                                TaxonomicFilterGroupType.PersonProperties,
+                                TaxonomicFilterGroupType.HogQLExpression,
+                                ...groupsTaxonomicTypes,
+                            ]}
+                            propertyFiltersPopover
+                            addFilterDefaultOptions={{
+                                id: '$pageview',
+                                name: '$pageview',
+                                type: EntityTypes.EVENTS,
+                            }}
+                            buttonCopy="Add event filter"
+                        />
+                    </>
+                )}
+            </LemonField>
+
+            <p className="italic text-muted-alt">{description}</p>
+        </div>
+    )
+}

frontend/src/scenes/pipeline/configuration/filters.tsx

@@ -0,0 +1,34 @@
+import { FilterType, PluginConfigFilters } from '~/types'
+
+export function sanitizeFilters(filters?: FilterType): PluginConfigFilters | null {
+    if (!filters) {
+        return null
+    }
+    const sanitized: PluginConfigFilters = {}
+
+    if (filters.events) {
+        sanitized.events = filters.events.map((f) => ({
+            id: f.id,
+            type: 'events',
+            name: f.name,
+            order: f.order,
+            properties: f.properties,
+        }))
+    }
+
+    if (filters.actions) {
+        sanitized.actions = filters.actions.map((f) => ({
+            id: f.id,
+            type: 'actions',
+            name: f.name,
+            order: f.order,
+            properties: f.properties,
+        }))
+    }
+
+    if (filters.filter_test_accounts) {
+        sanitized.filter_test_accounts = filters.filter_test_accounts
+    }
+
+    return Object.keys(sanitized).length > 0 ? sanitized : null
+}