feat(surveys): Show only custom events in Event Select dropdown. (#23029

) The existing Event Select implementation shows all events, both client-sent and autocaptured by the Posthog platform, when selecting an event to activate a Survey popup. Instead, we would like to only show custom events sent by the client in this list and show the user a tooltip about how the events are observed and surveys are activated.
PostHog · Jun 18, 2024 · 5b68eba · 5b68eba
1 parent f0a8172
commit 5b68eba
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png
diff --git a/frontend/src/lib/components/EventSelect/EventSelect.tsx b/frontend/src/lib/components/EventSelect/EventSelect.tsx
@@ -8,10 +8,17 @@ interface EventSelectProps {
     onChange: (names: string[]) => void
     selectedEvents: string[]
     addElement: JSX.Element
+    filterGroupTypes?: TaxonomicFilterGroupType[]
 }
 
-export const EventSelect = ({ onChange, selectedEvents, addElement }: EventSelectProps): JSX.Element => {
+export const EventSelect = ({
+    onChange,
+    selectedEvents,
+    addElement,
+    filterGroupTypes,
+}: EventSelectProps): JSX.Element => {
     const [open, setOpen] = useState<boolean>(false)
+    const eventSelectFilterGroupTypes = filterGroupTypes || [TaxonomicFilterGroupType.Events]
 
     const handleChange = (name: string): void => {
         onChange(Array.from(new Set(selectedEvents.concat([name]))))
@@ -41,7 +48,7 @@ export const EventSelect = ({ onChange, selectedEvents, addElement }: EventSelec
                             handleChange(value as string)
                             setOpen(false)
                         }}
-                        taxonomicGroupTypes={[TaxonomicFilterGroupType.Events]}
+                        taxonomicGroupTypes={eventSelectFilterGroupTypes}
                     />
                 }
             >

diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -18,6 +18,7 @@ import {
 import { BindLogic, useActions, useValues } from 'kea'
 import { EventSelect } from 'lib/components/EventSelect/EventSelect'
 import { FlagSelector } from 'lib/components/FlagSelector'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { IconCancel } from 'lib/lemon-ui/icons'
 import { LemonField } from 'lib/lemon-ui/LemonField'
@@ -620,8 +621,12 @@ export default function SurveyEdit(): JSX.Element {
                                                 </BindLogic>
                                             </LemonField.Pure>
                                             {featureFlags[FEATURE_FLAGS.SURVEYS_EVENTS] && surveysEventsAvailable && (
-                                                <LemonField.Pure label="User sends events">
+                                                <LemonField.Pure
+                                                    label="User sends events"
+                                                    info="Note that these events are only observed, and activate this survey, in the current user session."
+                                                >
                                                     <EventSelect
+                                                        filterGroupTypes={[TaxonomicFilterGroupType.CustomEvents]}
                                                         onChange={(includedEvents) => {
                                                             setSurveyValue('conditions', {
                                                                 ...survey.conditions,