diff --git a/frontend/src/scenes/activity/explore/EventDetails.tsx b/frontend/src/scenes/activity/explore/EventDetails.tsx index 8226a7289e266..d96b6d67702d0 100644 --- a/frontend/src/scenes/activity/explore/EventDetails.tsx +++ b/frontend/src/scenes/activity/explore/EventDetails.tsx @@ -26,6 +26,7 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem const displayedEventProperties: Properties = {} const visibleSystemProperties: Properties = {} + const featureFlagProperties: Properties = {} let systemPropsCount = 0 for (const key of Object.keys(event.properties)) { if (CORE_FILTER_DEFINITIONS_BY_GROUP.events[key] && CORE_FILTER_DEFINITIONS_BY_GROUP.events[key].system) { @@ -35,7 +36,11 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem } } if (!CORE_FILTER_DEFINITIONS_BY_GROUP.events[key] || !CORE_FILTER_DEFINITIONS_BY_GROUP.events[key].system) { - displayedEventProperties[key] = event.properties[key] + if (key.startsWith('$feature') || key === '$active_feature_flags') { + featureFlagProperties[key] = event.properties[key] + } else { + displayedEventProperties[key] = event.properties[key] + } } } @@ -99,5 +104,25 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem }) } + if (Object.keys(featureFlagProperties).length > 0) { + tabs.push({ + key: 'feature_flags', + label: 'Feature flags', + content: ( +