test(storybook): update UI snapshots

Author: github-actions[bot]

frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag--dark.png

@@ -35,8 +35,6 @@ export function FeedbackTab({ featureFlag }: { featureFlag: FeatureFlagType }):
                         <QuickSurveyForm flag={featureFlag} />
                     </div>
                 </div>
-                {/* <pre>{JSON.stringify(featureFlag, null, 2)}</pre> */}
-                {/* <pre>{JSON.stringify(surveys, null, 2)}</pre> */}
             </div>
         )
     }

frontend/__snapshots__/scenes-app-feature-flags--edit-feature-flag--light.png

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+
+import { IconPlus } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+
+import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
+
+export interface AddEventButtonProps {
+    onEventSelect: (eventName: string) => void
+    excludedEvents?: string[]
+}
+
+export function AddEventButton({ onEventSelect, excludedEvents = [] }: AddEventButtonProps): JSX.Element {
+    const [popoverOpen, setPopoverOpen] = useState(false)
+
+    return (
+        <Popover
+            overlay={
+                <TaxonomicFilter
+                    groupType={TaxonomicFilterGroupType.Events}
+                    value=""
+                    onChange={(_, value) => {
+                        if (typeof value === 'string') {
+                            const eventName = value
+
+                            if (!excludedEvents.includes(eventName)) {
+                                onEventSelect(eventName)
+                            }
+                            setPopoverOpen(false)
+                        }
+                    }}
+                    allowNonCapturedEvents
+                    taxonomicGroupTypes={[TaxonomicFilterGroupType.CustomEvents, TaxonomicFilterGroupType.Events]}
+                />
+            }
+            visible={popoverOpen}
+            onClickOutside={() => setPopoverOpen(false)}
+            placement="bottom-start"
+        >
+            <LemonButton
+                type="secondary"
+                icon={<IconPlus />}
+                onClick={() => setPopoverOpen(!popoverOpen)}
+                size="small"
+                className="w-fit"
+            >
+                Add event
+            </LemonButton>
+        </Popover>
+    )
+}

frontend/src/scenes/feature-flags/FeatureFlagFeedbackTab.tsx

@@ -0,0 +1,170 @@
+import '@testing-library/jest-dom'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { useMocks } from '~/mocks/jest'
+import { initKeaTests } from '~/test/init'
+import { AccessControlLevel, FeatureFlagEvaluationRuntime, type FeatureFlagType } from '~/types'
+
+import { QuickSurveyForm } from './QuickSurveyModal'
+
+jest.mock('scenes/surveys/SurveyAppearancePreview', () => ({
+    SurveyAppearancePreview: () => <div>Preview</div>,
+}))
+jest.mock('scenes/surveys/SurveySettings', () => ({
+    SurveyPopupToggle: () => <div>Survey Toggle</div>,
+}))
+jest.mock('scenes/surveys/AddEventButton', () => ({
+    AddEventButton: ({ onEventSelect }: any) => <button onClick={() => onEventSelect('test-event')}>Add event</button>,
+}))
+
+const mockFlag: FeatureFlagType = {
+    id: 1,
+    key: 'test-flag',
+    name: 'Test Flag',
+    filters: { groups: [], multivariate: null, payloads: {} },
+    deleted: false,
+    active: true,
+    created_at: '2023-01-01',
+    created_by: null,
+    is_simple_flag: false,
+    rollout_percentage: null,
+    ensure_experience_continuity: false,
+    experiment_set: [],
+    rollback_conditions: [],
+    performed_rollback: false,
+    can_edit: true,
+    tags: [],
+    features: [],
+    usage_dashboard: undefined,
+    analytics_dashboards: [],
+    has_enriched_analytics: false,
+    surveys: [],
+    updated_at: '2023-01-01',
+    version: 1,
+    last_modified_by: null,
+    evaluation_tags: [],
+    is_remote_configuration: false,
+    has_encrypted_payloads: false,
+    status: 'ACTIVE',
+    evaluation_runtime: FeatureFlagEvaluationRuntime.ALL,
+    user_access_level: AccessControlLevel.Admin,
+}
+
+describe('QuickSurveyForm', () => {
+    beforeEach(() => {
+        initKeaTests()
+        useMocks({
+            get: {
+                '/api/projects/:team_id/property_definitions': { results: [], count: 0 },
+                '/api/projects/:team_id/surveys': { results: [] },
+            },
+            post: {
+                '/api/projects/:team_id/surveys': () => [200, { id: 'new-survey' }],
+            },
+            patch: {
+                '/api/environments/@current/add_product_intent/': () => [200, {}],
+            },
+        })
+    })
+
+    afterEach(() => {
+        cleanup()
+    })
+
+    it('disables create button when question is empty', async () => {
+        render(<QuickSurveyForm flag={mockFlag} />)
+
+        const questionInput = screen.getByPlaceholderText('What do you think?')
+        userEvent.clear(questionInput)
+
+        expect(screen.getByRole('button', { name: /create & launch/i })).toHaveAttribute('aria-disabled', 'true')
+    })
+
+    it('creates survey with selected events in conditions', async () => {
+        let capturedRequest: any
+        useMocks({
+            post: {
+                '/api/projects/:team_id/surveys': async (req) => {
+                    capturedRequest = await req.json()
+                    return [200, { id: 'new-survey' }]
+                },
+            },
+        })
+
+        render(<QuickSurveyForm flag={mockFlag} />)
+
+        // Add an event
+        await userEvent.click(screen.getByRole('button', { name: /add event/i }))
+        expect(screen.getByText('test-event')).toBeInTheDocument()
+
+        // Create survey
+        await userEvent.click(screen.getByRole('button', { name: /create & launch/i }))
+
+        await waitFor(() => {
+            expect(capturedRequest).not.toBeUndefined()
+            expect(capturedRequest.conditions.events.values).toEqual([{ name: 'test-event' }])
+            expect(capturedRequest.linked_flag_id).toBe(1)
+        })
+    })
+
+    it('creates survey without events when none selected', async () => {
+        let capturedRequest: any
+        useMocks({
+            post: {
+                '/api/projects/:team_id/surveys': async (req) => {
+                    capturedRequest = await req.json()
+                    return [200, { id: 'new-survey' }]
+                },
+            },
+        })
+
+        render(<QuickSurveyForm flag={mockFlag} />)
+
+        await userEvent.click(screen.getByRole('button', { name: /create & launch/i }))
+
+        await waitFor(() => {
+            expect(capturedRequest).not.toBeUndefined()
+            expect(capturedRequest.conditions.events.values).toEqual([])
+        })
+    })
+
+    it('includes selected variant in survey conditions', async () => {
+        const multivariateFlag: FeatureFlagType = {
+            ...mockFlag,
+            filters: {
+                groups: [],
+                multivariate: {
+                    variants: [
+                        { key: 'control', rollout_percentage: 50 },
+                        { key: 'test', rollout_percentage: 50 },
+                    ],
+                },
+                payloads: {},
+            },
+        }
+
+        let capturedRequest: any
+        useMocks({
+            post: {
+                '/api/projects/:team_id/surveys': async (req) => {
+                    capturedRequest = await req.json()
+                    return [200, { id: 'new-survey' }]
+                },
+            },
+        })
+
+        render(<QuickSurveyForm flag={multivariateFlag} />)
+
+        // Select the 'test' variant
+        const testVariantRadio = screen.getByLabelText(/test/i, { selector: 'input[type="radio"]' })
+        await userEvent.click(testVariantRadio)
+
+        await userEvent.click(screen.getByRole('button', { name: /create & launch/i }))
+
+        await waitFor(() => {
+            expect(capturedRequest).not.toBeUndefined()
+            expect(capturedRequest.conditions.linkedFlagVariant).toBe('test')
+        })
+    })
+})

frontend/src/scenes/surveys/AddEventButton.tsx

@@ -2,6 +2,7 @@ import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { useEffect, useMemo, useState } from 'react'
 
+import { IconX } from '@posthog/icons'
 import { LemonButton, LemonLabel, LemonModal, LemonTextArea, lemonToast } from '@posthog/lemon-ui'
 
 import api from 'lib/api'
@@ -10,8 +11,9 @@ import { LemonInputSelect } from 'lib/lemon-ui/LemonInputSelect/LemonInputSelect
 import { LemonMenuOverlay } from 'lib/lemon-ui/LemonMenu/LemonMenu'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { addProductIntent } from 'lib/utils/product-intents'
+import { AddEventButton } from 'scenes/surveys/AddEventButton'
 import { SurveyAppearancePreview } from 'scenes/surveys/SurveyAppearancePreview'
-import { SurveySettings } from 'scenes/surveys/SurveySettings'
+import { SurveyPopupToggle } from 'scenes/surveys/SurveySettings'
 import { NewSurvey, SURVEY_CREATED_SOURCE, defaultSurveyAppearance } from 'scenes/surveys/constants'
 import { surveysLogic } from 'scenes/surveys/surveysLogic'
 import { urls } from 'scenes/urls'
@@ -30,6 +32,7 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
     const [question, setQuestion] = useState(`You're trying our latest new feature. What do you think?`)
     const [targetVariant, setTargetVariant] = useState<string | null>(null)
     const [targetUrl, setTargetUrl] = useState<string>('')
+    const [selectedEvents, setSelectedEvents] = useState<string[]>([])
     const [isCreating, setIsCreating] = useState(false)
 
     const { showSurveysDisabledBanner } = useValues(surveysLogic)
@@ -38,6 +41,8 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
     const { options } = useValues(propertyDefinitionsModel)
     const { loadPropertyValues } = useActions(propertyDefinitionsModel)
 
+    const [shouldShowSurveyToggle, _] = useState<boolean>(!!showSurveysDisabledBanner)
+
     const variants = flag.filters?.multivariate?.variants || []
     const isMultivariate = variants.length > 1
     const urlOptions = options['$current_url']
@@ -58,7 +63,7 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
     const buildSurveyData = (launch: boolean): Partial<Survey> => {
         const randomId = Math.random().toString(36).substring(2, 8)
         return {
-            name: `${flagName} - Quick feedback #${randomId}`,
+            name: `${flagName}${targetVariant ? ` (${targetVariant})` : ''} - Quick feedback #${randomId}`,
             type: SurveyType.Popover,
             questions: [
                 {
@@ -70,17 +75,7 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
             conditions: {
                 actions: null,
                 events: {
-                    values: [
-                        {
-                            name: '$feature_flag_called',
-                            propertyFilters: {
-                                $feature_flag: {
-                                    values: [flag.key],
-                                    operator: 'exact' as const,
-                                },
-                            },
-                        },
-                    ],
+                    values: selectedEvents.map((name) => ({ name })),
                 },
                 ...(targetVariant ? { linkedFlagVariant: targetVariant } : {}),
                 ...(targetUrl ? { url: targetUrl } : {}),
@@ -99,7 +94,7 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
                 created_at: '',
                 created_by: null,
             }) as NewSurvey,
-        [question, targetVariant, targetUrl, buildSurveyData]
+        [question, targetVariant, targetUrl, selectedEvents, flag] // oxlint-disable-line react-hooks/exhaustive-deps
     )
 
     const handleCreate = async ({ createType }: { createType: 'launch' | 'edit' | 'draft' }): Promise<void> => {
@@ -122,6 +117,7 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
                     source: SURVEY_CREATED_SOURCE.FEATURE_FLAGS,
                     created_successfully: true,
                     quick_survey: true,
+                    create_mode: createType,
                 },
             })
 
@@ -211,6 +207,35 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
                             data-attr="quick-survey-url-input"
                         />
                     </div>
+
+                    <div>
+                        <LemonLabel className="mb-2">Trigger on events (optional)</LemonLabel>
+                        {selectedEvents.length > 0 && (
+                            <div className="space-y-2 mb-2">
+                                {selectedEvents.map((eventName) => (
+                                    <div
+                                        key={eventName}
+                                        className="flex items-center justify-between p-2 border rounded bg-bg-light"
+                                    >
+                                        <span className="text-sm font-medium">{eventName}</span>
+                                        <LemonButton
+                                            size="xsmall"
+                                            icon={<IconX />}
+                                            onClick={() =>
+                                                setSelectedEvents(selectedEvents.filter((e) => e !== eventName))
+                                            }
+                                            type="tertiary"
+                                            status="alt"
+                                        />
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                        <AddEventButton
+                            onEventSelect={(eventName) => setSelectedEvents([...selectedEvents, eventName])}
+                            excludedEvents={selectedEvents}
+                        />
+                    </div>
                 </div>
 
                 <div>
@@ -221,9 +246,9 @@ export function QuickSurveyForm({ flag, onCancel }: QuickSurveyFormProps): JSX.E
             </div>
 
             <div className="mt-6">
-                {showSurveysDisabledBanner && (
+                {shouldShowSurveyToggle && (
                     <div className="mb-4 p-4 border rounded bg-warning-highlight">
-                        <SurveySettings isModal />
+                        <SurveyPopupToggle />
                     </div>
                 )}