From cb03639d112e41fd92eddb78b27c84c2a0007317 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Fri, 29 Nov 2024 19:01:34 +0000
Subject: [PATCH] start adding tabs to items

---
 .../scenes/activity/explore/EventDetails.tsx  |  7 +--
 .../playerInspector/ItemPerformanceEvent.tsx  |  1 +
 .../player/inspector/components/ItemEvent.tsx | 55 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/frontend/src/scenes/activity/explore/EventDetails.tsx b/frontend/src/scenes/activity/explore/EventDetails.tsx
index 1b7a1733cf48f..7090a03210d27 100644
--- a/frontend/src/scenes/activity/explore/EventDetails.tsx
+++ b/frontend/src/scenes/activity/explore/EventDetails.tsx
@@ -1,6 +1,5 @@
 import './EventDetails.scss'
 
-import { Properties } from '@posthog/plugin-scaffold'
 import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
 import { HTMLElementsDisplay } from 'lib/components/HTMLElementsDisplay/HTMLElementsDisplay'
 import { JSONViewer } from 'lib/components/JSONViewer'
@@ -24,9 +23,9 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem
     const [showSystemProps, setShowSystemProps] = useState(false)
     const [activeTab, setActiveTab] = useState(event.event === '$exception' ? 'exception' : 'properties')
 
-    const displayedEventProperties: Properties = {}
-    const visibleSystemProperties: Properties = {}
-    const featureFlagProperties: Properties = {}
+    const displayedEventProperties = {}
+    const visibleSystemProperties = {}
+    const featureFlagProperties = {}
     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) {
diff --git a/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
index e1130078d530c..dc118953ea57d 100644
--- a/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
+++ b/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
@@ -291,6 +291,7 @@ export function ItemPerformanceEventDetail({ item }: ItemPerformanceEventProps):
             <LemonDivider dashed />
 
             <LemonTabs
+                size="small"
                 activeKey={activeTab}
                 onChange={(newKey) => setActiveTab(newKey)}
                 tabs={[
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
index 6cd133ea5d92d..e9d7885faae71 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
@@ -1,6 +1,6 @@
 import './ImagePreview.scss'
 
-import { LemonButton, LemonDivider, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonTabs, Tooltip } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
@@ -8,8 +8,9 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TitledSnack } from 'lib/components/TitledSnack'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { Spinner } from 'lib/lemon-ui/Spinner'
-import { POSTHOG_EVENT_PROMOTED_PROPERTIES } from 'lib/taxonomy'
+import { CORE_FILTER_DEFINITIONS_BY_GROUP, POSTHOG_EVENT_PROMOTED_PROPERTIES } from 'lib/taxonomy'
 import { autoCaptureEventToDescription, capitalizeFirstLetter, isString } from 'lib/utils'
+import { useState } from 'react'
 import { insightUrlForEvent } from 'scenes/insights/utils'
 import { eventPropertyFilteringLogic } from 'scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic'
 import { DEFAULT_INSPECTOR_ROW_HEIGHT } from 'scenes/session-recordings/player/inspector/PlayerInspectorList'
@@ -18,6 +19,7 @@ import { ElementType } from '~/types'
 
 import { InspectorListItemEvent } from '../playerInspectorLogic'
 import { SimpleKeyValueList } from './SimpleKeyValueList'
+
 export interface ItemEventProps {
     item: InspectorListItemEvent
 }
@@ -138,11 +140,26 @@ export function ItemEvent({ item }: ItemEventProps): JSX.Element {
 }
 
 export function ItemEventDetail({ item }: ItemEventProps): JSX.Element {
+    const [activeTab, setActiveTab] = useState<'properties' | 'flags' | 'raw'>('properties')
+
     const insightUrl = insightUrlForEvent(item.data)
     const { filterProperties } = useValues(eventPropertyFilteringLogic)
 
     const promotedKeys = POSTHOG_EVENT_PROMOTED_PROPERTIES[item.data.event]
 
+    const properties = {}
+    const featureFlagProperties = {}
+
+    for (const key of Object.keys(item.data.properties)) {
+        if (!CORE_FILTER_DEFINITIONS_BY_GROUP.events[key] || !CORE_FILTER_DEFINITIONS_BY_GROUP.events[key].system) {
+            if (key.startsWith('$feature') || key === '$active_feature_flags') {
+                featureFlagProperties[key] = item.data.properties[key]
+            } else {
+                properties[key] = item.data.properties[key]
+            }
+        }
+    }
+
     return (
         <div data-attr="item-event" className="font-light w-full">
             <div className="px-2 py-1 text-xs border-t">
@@ -168,7 +185,39 @@ export function ItemEventDetail({ item }: ItemEventProps): JSX.Element {
                     item.data.event === '$exception' ? (
                         <ErrorDisplay eventProperties={item.data.properties} />
                     ) : (
-                        <SimpleKeyValueList item={filterProperties(item.data.properties)} promotedKeys={promotedKeys} />
+                        <LemonTabs
+                            size="small"
+                            activeKey={activeTab}
+                            onChange={(newKey) => setActiveTab(newKey)}
+                            tabs={[
+                                {
+                                    key: 'properties',
+                                    label: 'Properties',
+                                    content: (
+                                        <SimpleKeyValueList
+                                            item={filterProperties(properties)}
+                                            promotedKeys={promotedKeys}
+                                        />
+                                    ),
+                                },
+                                {
+                                    key: 'flags',
+                                    label: 'Flags',
+                                    content: (
+                                        <SimpleKeyValueList item={featureFlagProperties} promotedKeys={promotedKeys} />
+                                    ),
+                                },
+                                {
+                                    key: 'raw',
+                                    label: 'Raw',
+                                    content: (
+                                        <pre className="text-xs text-muted-alt whitespace-pre-wrap">
+                                            {JSON.stringify(item.data.properties, null, 2)}
+                                        </pre>
+                                    ),
+                                },
+                            ]}
+                        />
                     )
                 ) : (
                     <div className="text-muted-alt flex gap-1 items-center">