diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--light.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--light.png index 89519aef5a9cb..7eac6dcbb97a8 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--light.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--light.png differ diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx index c92ee4b29439e..c663bffb3e921 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx @@ -24,7 +24,7 @@ import { urls } from 'scenes/urls' import { cohortsModel } from '~/models/cohortsModel' import { groupsModel } from '~/models/groupsModel' -import { AnyPropertyFilter, FeatureFlagGroupType } from '~/types' +import { AnyPropertyFilter, FeatureFlagGroupType, PropertyOperator } from '~/types' import { featureFlagLogic } from './featureFlagLogic' import { @@ -32,6 +32,59 @@ import { FeatureFlagReleaseConditionsLogicProps, } from './FeatureFlagReleaseConditionsLogic' +function PropertyValueComponent({ + property, + cohortsById, +}: { + property: AnyPropertyFilter + cohortsById: Record +}): JSX.Element { + if (property.type === 'cohort') { + return ( + } + targetBlank + > + {(property.value && cohortsById[property.value]?.name) || `ID ${property.value}`} + + ) + } + + if (property.value === PropertyOperator.IsNotSet || property.value === PropertyOperator.IsSet) { + return <> + } + const propertyValues = Array.isArray(property.value) ? property.value : [property.value] + + return ( + <> + {propertyValues.map((val, idx) => ( + + {val} + + {isPropertyFilterWithOperator(property) && + ['is_date_before', 'is_date_after'].includes(property.operator) && + dateStringToComponents(String(val)) // check it's a relative date + ? ` ( ${dateFilterToText( + String(val), + undefined, + '', + [], + false, + String(val).slice(-1) === 'h' ? 'MMMM D, YYYY HH:mm:ss' : 'MMMM D, YYYY', + true + )}{' '} + )` + : ''} + + + ))} + + ) +} + export function FeatureFlagReleaseConditions({ id, readOnly, @@ -187,46 +240,7 @@ export function FeatureFlagReleaseConditions({ {allOperatorsToHumanName(property.operator)} ) : null} - {property.type === 'cohort' ? ( - } - targetBlank - > - {(property.value && cohortsById[property.value]?.name) || - `ID ${property.value}`} - - ) : ( - [...(Array.isArray(property.value) ? property.value : [property.value])].map( - (val, idx) => ( - - {val} - - {isPropertyFilterWithOperator(property) && - ['is_date_before', 'is_date_after'].includes( - property.operator - ) && - dateStringToComponents(String(val)) // check it's a relative date - ? ` ( ${dateFilterToText( - String(val), - undefined, - '', - [], - false, - String(val).slice(-1) === 'h' - ? 'MMMM D, YYYY HH:mm:ss' - : 'MMMM D, YYYY', - true - )}{' '} - )` - : ''} - - - ) - ) - )} + ))}