chore: make PropertySelect component generic

frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx → frontend/src/lib/components/PropertySelect/PropertySelect.stories.tsx

@@ -3,12 +3,13 @@ import { useState } from 'react'
 
 import { mswDecorator } from '~/mocks/browser'
 
-import { PersonPropertySelect, PersonPropertySelectProps } from './PersonPropertySelect'
+import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
+import { PropertySelect, PropertySelectProps } from './PropertySelect'
 
-type Story = StoryObj<typeof PersonPropertySelect>
-const meta: Meta<typeof PersonPropertySelect> = {
-    title: 'Filters/Person Property Select',
-    component: PersonPropertySelect,
+type Story = StoryObj<typeof PropertySelect>
+const meta: Meta<typeof PropertySelect> = {
+    title: 'Filters/Property Select',
+    component: PropertySelect,
     decorators: [
         mswDecorator({
             get: {
@@ -31,7 +32,7 @@ const meta: Meta<typeof PersonPropertySelect> = {
 }
 export default meta
 
-const Template: StoryFn<typeof PersonPropertySelect> = (props: Partial<PersonPropertySelectProps>) => {
+const Template: StoryFn<typeof PropertySelect> = (props: Partial<PropertySelectProps>) => {
     const [selectedProperties, setSelectProperties] = useState<string[]>([
         '$initial_geoip_postal_code',
         '$initial_geoip_latitude',
@@ -54,9 +55,10 @@ const Template: StoryFn<typeof PersonPropertySelect> = (props: Partial<PersonPro
     ])
 
     return (
-        <PersonPropertySelect
+        <PropertySelect
             selectedProperties={selectedProperties}
             onChange={setSelectProperties}
+            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
             addText="Add"
             {...props}
         />

frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx → frontend/src/lib/components/PropertySelect/PropertySelect.tsx

@@ -11,11 +11,12 @@ import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { useState } from 'react'
 
-export interface PersonPropertySelectProps {
+export interface PropertySelectProps {
     addText: string
     onChange: (names: string[]) => void
     selectedProperties: string[]
     sortable?: boolean
+    taxonomicFilterGroup: TaxonomicFilterGroupType.PersonProperties | TaxonomicFilterGroupType.EventProperties
 }
 
 const SortableProperty = ({
@@ -46,12 +47,13 @@ const SortableProperty = ({
     )
 }
 
-export const PersonPropertySelect = ({
+export const PropertySelect = ({
     onChange,
     selectedProperties,
     addText,
     sortable = false,
-}: PersonPropertySelectProps): JSX.Element => {
+    taxonomicFilterGroup,
+}: PropertySelectProps): JSX.Element => {
     const [open, setOpen] = useState<boolean>(false)
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 1 } }))
 
@@ -114,7 +116,7 @@ export const PersonPropertySelect = ({
                             handleChange(value as string)
                             setOpen(false)
                         }}
-                        taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties]}
+                        taxonomicGroupTypes={[taxonomicFilterGroup]}
                     />
                 }
             >

frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx

@@ -5,8 +5,9 @@ import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
 import { ConfigProvider, Empty, Table } from 'antd'
 import Column from 'antd/lib/table/Column'
 import { useActions, useValues } from 'kea'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { VisibilitySensor } from 'lib/components/VisibilitySensor/VisibilitySensor'
 import { IconSelectProperties, IconTrendingDown, IconTrendingUp } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
@@ -148,7 +149,8 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
                                 onClickOutside={() => setIsPropertiesOpen(false)}
                                 overlay={
                                     <div className="p-4">
-                                        <PersonPropertySelect
+                                        <PropertySelect
+                                            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
                                             onChange={setPropertyNames}
                                             selectedProperties={
                                                 propertyNames.length === 1 && propertyNames[0] === '$all'

frontend/src/scenes/settings/project/CorrelationConfig.tsx

@@ -1,7 +1,8 @@
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { EventSelect } from 'lib/components/EventSelect/EventSelect'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { IconPlus, IconSelectEvents, IconSelectProperties } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
@@ -48,7 +49,8 @@ export function CorrelationConfig(): JSX.Element {
                             <IconSelectProperties className="text-lg" />
                             Excluded person properties
                         </h3>
-                        <PersonPropertySelect
+                        <PropertySelect
+                            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
                             onChange={(properties) => handleChange(properties)}
                             selectedProperties={funnelCorrelationConfig.excluded_person_property_names || []}
                             addText="Add exclusion"

frontend/src/scenes/settings/project/PersonDisplayNameProperties.tsx

@@ -1,6 +1,7 @@
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { PERSON_DEFAULT_DISPLAY_NAME_PROPERTIES } from 'lib/constants'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { useEffect, useState } from 'react'
@@ -27,7 +28,8 @@ export function PersonDisplayNameProperties(): JSX.Element {
                 property to be found on the Person will be used. Drag the items to re-order the priority.
             </p>
             <div className="space-y-4">
-                <PersonPropertySelect
+                <PropertySelect
+                    taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
                     onChange={(properties) => setValue(properties)}
                     selectedProperties={value || []}
                     addText="Add"