feat(web-analytics): Add UI to choose custom channel types

ee/hogai/taxonomy_agent/toolkit.py

@@ -8,7 +8,7 @@
 from pydantic import BaseModel, Field, RootModel
 
 from ee.hogai.taxonomy import CORE_FILTER_DEFINITIONS_BY_GROUP
-from posthog.hogql.database.schema.channel_type import POSSIBLE_CHANNEL_TYPES
+from posthog.hogql.database.schema.channel_type import DEFAULT_CHANNEL_TYPES
 from posthog.hogql_queries.ai.actors_property_taxonomy_query_runner import ActorsPropertyTaxonomyQueryRunner
 from posthog.hogql_queries.ai.event_taxonomy_query_runner import EventTaxonomyQueryRunner
 from posthog.hogql_queries.query_runner import ExecutionMode
@@ -353,7 +353,7 @@ def _retrieve_session_properties(self, property_name: str) -> str:
 
         sample_values: list[str | int | float]
         if property_name == "$channel_type":
-            sample_values = cast(list[str | int | float], POSSIBLE_CHANNEL_TYPES.copy())
+            sample_values = cast(list[str | int | float], DEFAULT_CHANNEL_TYPES.copy())
             sample_count = len(sample_values)
             is_str = True
         elif (

frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx

@@ -26,6 +26,7 @@ export interface PropertyValueProps {
     autoFocus?: boolean
     eventNames?: string[]
     addRelativeDateTimeOptions?: boolean
+    forceSingleSelect?: boolean
 }
 
 export function PropertyValue({
@@ -39,11 +40,12 @@ export function PropertyValue({
     autoFocus = false,
     eventNames = [],
     addRelativeDateTimeOptions = false,
+    forceSingleSelect = false,
 }: PropertyValueProps): JSX.Element {
     const { formatPropertyValueForDisplay, describeProperty, options } = useValues(propertyDefinitionsModel)
     const { loadPropertyValues } = useActions(propertyDefinitionsModel)
 
-    const isMultiSelect = operator && isOperatorMulti(operator)
+    const isMultiSelect = operator && isOperatorMulti(operator) && !forceSingleSelect
     const isDateTimeProperty = operator && isOperatorDate(operator)
     const propertyDefinitionType = propertyFilterTypeToPropertyDefinitionType(type)
 

frontend/src/lib/lemon-ui/VerticalNestedDND/VerticalNestedDND.stories.tsx

@@ -0,0 +1,84 @@
+import { UniqueIdentifier } from '@dnd-kit/core'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { VerticalNestedDND, VerticalNestedDNDProps } from './VerticalNestedDND'
+type Story = StoryObj<typeof VerticalNestedDND>
+const meta: Meta<typeof VerticalNestedDND> = {
+    title: 'Lemon UI/VerticalNestedDND',
+    component: VerticalNestedDND,
+    parameters: {
+        testOptions: {
+            waitForLoadersToDisappear: false,
+        },
+    },
+    tags: ['autodocs'],
+}
+export default meta
+
+interface ExampleSubItem {
+    id: UniqueIdentifier
+}
+interface ExampleItem {
+    id: UniqueIdentifier
+    items?: ExampleSubItem[]
+}
+let counter = 0
+
+const Template: StoryFn<typeof VerticalNestedDND> = (props: VerticalNestedDNDProps<ExampleSubItem, ExampleItem>) => {
+    const starterData: ExampleItem[] = [
+        {
+            id: 'A',
+            items: [
+                {
+                    id: 'A1',
+                },
+                {
+                    id: 'A2',
+                },
+                {
+                    id: 'A3',
+                },
+            ],
+        },
+        {
+            id: 'B',
+            items: [
+                {
+                    id: 'B1',
+                },
+                {
+                    id: 'B2',
+                },
+                {
+                    id: 'B3',
+                },
+            ],
+        },
+    ]
+
+    const createNewChildItem = (): ExampleSubItem => {
+        return {
+            id: `new-${counter++}`,
+        }
+    }
+
+    const createNewContainerItem = (): ExampleItem => {
+        return {
+            id: `new-${counter++}`,
+            items: [],
+        }
+    }
+
+    return (
+        <VerticalNestedDND
+            {...props}
+            createNewChildItem={createNewChildItem}
+            createNewContainerItem={createNewContainerItem}
+            /* eslint-disable-next-line no-console */
+            onChange={(items) => console.log('onChange', items)}
+            initialItems={starterData}
+        />
+    )
+}
+
+export const Base: Story = Template.bind({})