feat: move feature flags to their own tab in activity view (#25628)

Co-authored-by: camerondeleone <[email protected]>
PostHog · Oct 16, 2024 · e9d35b5 · e9d35b5
1 parent 80499c8
commit e9d35b5
Showing 1 changed file with 26 additions and 1 deletion.
diff --git 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: (
+                <div className="ml-10 mt-2">
+                    <PropertiesTable
+                        type={PropertyDefinitionType.Event}
+                        properties={{
+                            ...featureFlagProperties,
+                        }}
+                        useDetectedPropertyType={true}
+                        tableProps={tableProps}
+                        searchable
+                    />
+                </div>
+            ),
+        })
+    }
+
     return <LemonTabs data-attr="event-details" tabs={tabs} activeKey={activeTab} onChange={setActiveTab} />
 }