feat: format property keys in simple events list (#18410)

PostHog · Nov 6, 2023 · ec13358 · ec13358
1 parent ca01fa1
commit ec13358
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
@@ -1,5 +1,7 @@
 // A React component that renders a list of key-value pairs in a simple way.
 
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+
 export interface SimpleKeyValueListProps {
     item: Record<string, any>
 }
@@ -9,7 +11,9 @@ export function SimpleKeyValueList({ item }: SimpleKeyValueListProps): JSX.Eleme
         <div className="text-xs space-y-1 max-w-full">
             {Object.entries(item).map(([key, value]) => (
                 <div key={key} className="flex gap-4 items-start justify-between overflow-hidden">
-                    <span className="font-semibold">{key}</span>
+                    <span className="font-semibold">
+                        <PropertyKeyInfo value={key} />
+                    </span>
                     <pre className="text-primary-alt break-all mb-0">{JSON.stringify(value, null, 2)}</pre>
                 </div>
             ))}