feat(flags): UX for feature flag dependencies

frontend/src/lib/api.ts

@@ -1422,6 +1422,9 @@ const api = {
         async get(id: FeatureFlagType['id']): Promise<FeatureFlagType> {
             return await new ApiRequest().featureFlag(id).get()
         },
+        async bulkKeys(ids: FeatureFlagType['id'][]): Promise<{ keys: Record<string, string> }> {
+            return await new ApiRequest().featureFlags().withAction('bulk_keys').create({ data: { ids } })
+        },
         async createStaticCohort(id: FeatureFlagType['id']): Promise<{ cohort: CohortType }> {
             return await new ApiRequest().featureFlagCreateStaticCohort(id).create()
         },

frontend/src/lib/components/Cards/InsightCard/InsightDetails.tsx

@@ -3,6 +3,7 @@ import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
 import {
     convertPropertiesToPropertyGroup,
     formatPropertyLabel,
+    getPropertyTypeFromFilter,
     isAnyPropertyfilter,
     isCohortPropertyFilter,
     isPropertyFilterWithOperator,
@@ -16,7 +17,8 @@ import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { Link } from 'lib/lemon-ui/Link'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
-import { allOperatorsMapping, capitalizeFirstLetter } from 'lib/utils'
+import { capitalizeFirstLetter, chooseOperatorMap } from 'lib/utils'
+
 import React from 'react'
 import { BreakdownTag } from 'scenes/insights/filters/BreakdownFilter/BreakdownTag'
 import { humanizePathsEventTypes } from 'scenes/insights/utils'
@@ -130,12 +132,14 @@ function CompactPropertyFiltersDisplay({
                                                     />
                                                 )}
                                             </span>
-                                            {
-                                                allOperatorsMapping[
+                                            {(() => {
+                                                const propertyType = getPropertyTypeFromFilter(leafFilter)
+                                                const operatorMap = chooseOperatorMap(propertyType)
+                                                return operatorMap[
                                                     (isPropertyFilterWithOperator(leafFilter) && leafFilter.operator) ||
                                                         'exact'
                                                 ]
-                                            }{' '}
+                                            })()}{' '}
                                             <b>
                                                 {isAnyPropertyfilter(leafFilter) &&
                                                     (Array.isArray(leafFilter.value)

frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx

@@ -245,6 +245,7 @@ export function PropertiesTable({
                     [PropertyDefinitionType.Meta]: TaxonomicFilterGroupType.Metadata,
                     [PropertyDefinitionType.Resource]: TaxonomicFilterGroupType.Resources,
                     [PropertyDefinitionType.Log]: TaxonomicFilterGroupType.LogAttributes,
+                    [PropertyDefinitionType.FlagValue]: TaxonomicFilterGroupType.EventFeatureFlags,
                 }
 
                 const propertyType = propertyTypeMap[type] || TaxonomicFilterGroupType.EventProperties

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

@@ -2,7 +2,6 @@ import { LemonSelect, LemonSelectProps } from '@posthog/lemon-ui'
 import { allOperatorsToHumanName } from 'lib/components/DefinitionPopover/utils'
 import { dayjs } from 'lib/dayjs'
 import {
-    allOperatorsMapping,
     chooseOperatorMap,
     isMobile,
     isOperatorCohort,
@@ -11,6 +10,7 @@ import {
     isOperatorRange,
     isOperatorRegex,
 } from 'lib/utils'
+import { getPropertyTypeFromFilter } from 'lib/components/PropertyFilters/utils'
 import { useEffect, useState } from 'react'
 
 import {
@@ -47,6 +47,7 @@ interface OperatorSelectProps extends Omit<LemonSelectProps<any>, 'options'> {
     operators: Array<PropertyOperator>
     onChange: (operator: PropertyOperator) => void
     defaultOpen?: boolean
+    propertyType?: PropertyFilterType
 }
 
 function getValidationError(operator: PropertyOperator, value: any, property?: string): string | null {
@@ -114,6 +115,8 @@ export function OperatorValueSelect({
             propertyType = PropertyType.Selector
         } else if (propertyKey === 'id' && type === PropertyFilterType.Cohort) {
             propertyType = PropertyType.Cohort
+        } else if (type === PropertyFilterType.FlagDependency) {
+            propertyType = PropertyType.Flag
         } else if (propertyKey === 'assignee' && type === PropertyFilterType.ErrorTrackingIssue) {
             propertyType = PropertyType.Assignee
         } else if (
@@ -152,6 +155,7 @@ export function OperatorValueSelect({
                     <OperatorSelect
                         operator={currentOperator || PropertyOperator.Exact}
                         operators={operators}
+                        propertyType={type}
                         onChange={(newOperator: PropertyOperator) => {
                             const tentativeValidationError =
                                 newOperator && value ? getValidationError(newOperator, value, propertyKey) : null
@@ -228,9 +232,20 @@ export function OperatorValueSelect({
     )
 }
 
-export function OperatorSelect({ operator, operators, onChange, className, size }: OperatorSelectProps): JSX.Element {
+export function OperatorSelect({
+    operator,
+    operators,
+    onChange,
+    className,
+    size,
+    propertyType,
+}: OperatorSelectProps): JSX.Element {
+    // Use contextual operator mapping based on property type
+    const propertyTypeForMapping = getPropertyTypeFromFilter({ type: propertyType })
+    const operatorMap = chooseOperatorMap(propertyTypeForMapping)
+
     const operatorOptions = operators.map((op) => ({
-        label: <span className="operator-value-option">{allOperatorsMapping[op || PropertyOperator.Exact]}</span>,
+        label: <span className="operator-value-option">{operatorMap[op || PropertyOperator.Exact]}</span>,
         value: op || PropertyOperator.Exact,
     }))
     return (

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

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'kea'
+import { PropertyValue } from './PropertyValue'
+import { PropertyFilterType, PropertyOperator } from '~/types'
+import { initKeaTests } from '~/test/init'
+
+// Mock kea hooks
+jest.mock('kea', () => {
+    const actual = jest.requireActual('kea')
+    return {
+        ...actual,
+        useValues: jest.fn(() => ({
+            formatPropertyValueForDisplay: (_key: string, value: any) => value,
+            describeProperty: () => null,
+            options: {
+                testProp: {
+                    values: [{ name: true }, { name: false }, { name: 'some-variant' }, { name: 'true' }],
+                    status: 'loaded',
+                    allowCustomValues: true,
+                },
+            },
+        })),
+        useActions: jest.fn(() => ({
+            loadPropertyValues: jest.fn(),
+        })),
+    }
+})
+
+describe('PropertyValue with Flag Dependencies', () => {
+    beforeEach(() => {
+        initKeaTests()
+    })
+
+    const defaultProps = {
+        propertyKey: 'testProp',
+        type: PropertyFilterType.FlagDependency,
+        operator: PropertyOperator.Exact,
+        value: true,
+        onSet: jest.fn(),
+        endpoint: 'test',
+        eventNames: [],
+        addRelativeDateTimeOptions: false,
+        groupTypeIndex: undefined,
+        editable: true,
+        preloadValues: false,
+    }
+
+    it('preserves boolean values for flag dependencies', () => {
+        render(
+            <Provider>
+                <PropertyValue {...defaultProps} />
+            </Provider>
+        )
+
+        // The component should render the boolean value
+        // Since it's a select component, the value should be in the placeholder or input
+        const input = screen.getByPlaceholderText('true')
+        expect(input).toBeInTheDocument()
+    })
+
+    it('handles string variant values', () => {
+        const props = {
+            ...defaultProps,
+            value: 'some-variant',
+        }
+
+        render(
+            <Provider>
+                <PropertyValue {...props} />
+            </Provider>
+        )
+
+        // The component should render the string value
+        const input = screen.getByPlaceholderText('some-variant')
+        expect(input).toBeInTheDocument()
+    })
+})

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

@@ -11,7 +11,7 @@ import { DurationPicker } from 'lib/components/DurationPicker/DurationPicker'
 import { PropertyFilterDatePicker } from 'lib/components/PropertyFilters/components/PropertyFilterDatePicker'
 import { propertyFilterTypeToPropertyDefinitionType } from 'lib/components/PropertyFilters/utils'
 import { dayjs } from 'lib/dayjs'
-import { LemonInputSelect } from 'lib/lemon-ui/LemonInputSelect/LemonInputSelect'
+import { LemonInputSelect, LemonInputSelectOption } from 'lib/lemon-ui/LemonInputSelect/LemonInputSelect'
 import { formatDate, isOperatorDate, isOperatorFlag, isOperatorMulti, toString } from 'lib/utils'
 import { useEffect } from 'react'
 
@@ -62,8 +62,10 @@ export function PropertyValue({
 }: PropertyValueProps): JSX.Element {
     const { formatPropertyValueForDisplay, describeProperty, options } = useValues(propertyDefinitionsModel)
     const { loadPropertyValues } = useActions(propertyDefinitionsModel)
+    const propertyOptions = options[propertyKey]
+    const isFlagDependencyProperty = type === PropertyFilterType.FlagDependency
 
-    const isMultiSelect = operator && isOperatorMulti(operator)
+    const isMultiSelect = operator && !isFlagDependencyProperty && isOperatorMulti(operator)
     const isDateTimeProperty = operator && isOperatorDate(operator)
     const propertyDefinitionType = propertyFilterTypeToPropertyDefinitionType(type)
 
@@ -98,7 +100,7 @@ export function PropertyValue({
         }
     }, [propertyKey, isDateTimeProperty])
 
-    const displayOptions = options[propertyKey]?.values || []
+    const displayOptions = propertyOptions?.values || []
 
     const onSearchTextChange = (newInput: string): void => {
         if (!Object.keys(options).includes(newInput) && !(operator && isOperatorFlag(operator))) {
@@ -142,6 +144,15 @@ export function PropertyValue({
         (label) => String(formatPropertyValueForDisplay(propertyKey, label, propertyDefinitionType, groupTypeIndex))
     )
 
+    // For flag dependencies, we need to preserve the original typed values
+    const typedValues = isFlagDependencyProperty
+        ? value === null || value === undefined
+            ? []
+            : Array.isArray(value)
+            ? value
+            : [value]
+        : formattedValues
+
     if (!editable) {
         return <>{formattedValues.join(' or ')}</>
     }
@@ -199,15 +210,30 @@ export function PropertyValue({
         )
     }
 
+    function formatLabelContent(value: any): JSX.Element {
+        const name = toString(value)
+        if (name === '') {
+            return <i>(empty string)</i>
+        }
+        // Render boolean flag values with code tags to distinguish them from string values
+        // e.g. true vs "true" - this is important for flag dependencies where type matters
+        if (isFlagDependencyProperty && typeof value === 'boolean') {
+            return <code>{name}</code>
+        }
+        return <>{formatPropertyValueForDisplay(propertyKey, name, propertyDefinitionType, groupTypeIndex)}</>
+    }
+
     return (
         <LemonInputSelect
             className={inputClassName}
             data-attr="prop-val"
-            loading={options[propertyKey]?.status === 'loading'}
-            value={formattedValues}
+            loading={propertyOptions?.status === 'loading'}
+            value={isFlagDependencyProperty ? typedValues : formattedValues}
             mode={isMultiSelect ? 'multiple' : 'single'}
-            allowCustomValues={options[propertyKey]?.allowCustomValues ?? true}
-            onChange={(nextVal) => (isMultiSelect ? setValue(nextVal) : setValue(nextVal[0]))}
+            allowCustomValues={propertyOptions?.allowCustomValues ?? true}
+            onChange={(nextVal) =>
+                isMultiSelect ? setValue(nextVal as PropertyFilterValue) : setValue(nextVal[0] ?? null)
+            }
             onInputChange={onSearchTextChange}
             placeholder={placeholder}
             size={size}
@@ -219,21 +245,36 @@ export function PropertyValue({
                     : undefined
             }
             popoverClassName="max-w-200"
-            options={displayOptions.map(({ name: _name }, index) => {
-                const name = toString(_name)
-                return {
+            options={displayOptions.map(({ name: value }, index) => {
+                const name = toString(value)
+                const hasVariants = isFlagDependencyProperty && displayOptions.length > 2
+                let tooltip: string | undefined = undefined
+
+                // Add tooltip for boolean values when flag has variants
+                if (isFlagDependencyProperty && typeof value === 'boolean' && hasVariants) {
+                    tooltip = value
+                        ? 'Matches any variant of the flag'
+                        : "Flag is disabled or doesn't match any conditions"
+                }
+
+                const option: LemonInputSelectOption<PropertyFilterValue> = {
                     key: name,
                     label: name,
                     labelComponent: (
                         <span key={name} data-attr={'prop-val-' + index} className="ph-no-capture" title={name}>
-                            {name === '' ? (
-                                <i>(empty string)</i>
-                            ) : (
-                                formatPropertyValueForDisplay(propertyKey, name, propertyDefinitionType, groupTypeIndex)
-                            )}
+                            {formatLabelContent(value)}
                         </span>
                     ),
                 }
+
+                if (isFlagDependencyProperty) {
+                    option.value = value
+                    if (tooltip) {
+                        option.tooltip = tooltip
+                    }
+                }
+
+                return option
             })}
         />
     )