fix(activity): Recognize $set and the dollar props inside as special (

#20275)

* fix(activity): Recognize `$set` and the dollar props inside as special

* Add stories to test behavior

* Rename existing snapshot

* Update UI snapshots for `chromium` (1)

* Fix replay too

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof PropertiesTableComponent> = {
 }
 export default meta
 
-export const PropertiesTable: StoryFn = () => {
+export const Basic: StoryFn = () => {
     const properties = {
         name: 'John Doe',
         age: 30,
@@ -25,3 +25,36 @@ export const PropertiesTable: StoryFn = () => {
     }
     return <PropertiesTableComponent type={PropertyDefinitionType.Event} properties={properties} />
 }
+
+export const DollarPropertiesOnEvent: StoryFn = () => {
+    const properties = {
+        pineapple_enjoyment_score: 3,
+        $browser: 'Chrome',
+        utm_campaign: 'summer_sale',
+        $geoip_country_code: 'US',
+        $set: {
+            $browser: 'Chrome',
+            utm_campaign: 'summer_sale',
+            $geoip_country_code: 'US',
+        },
+        $set_once: {
+            $initial_browser: 'Chrome',
+            $initial_utm_campaign: 'summer_sale',
+            $initial_geoip_country_code: 'US',
+        },
+    }
+    return <PropertiesTableComponent type={PropertyDefinitionType.Event} properties={properties} />
+}
+
+export const DollarPropertiesOnPerson: StoryFn = () => {
+    const properties = {
+        pineapple_enjoyment_score: 3,
+        $browser: 'Chrome',
+        utm_campaign: 'summer_sale',
+        $geoip_country_code: 'US',
+        $initial_browser: 'Chrome',
+        $initial_utm_campaign: 'summer_sale',
+        $initial_geoip_country_code: 'US',
+    }
+    return <PropertiesTableComponent type={PropertyDefinitionType.Person} properties={properties} />
+}

frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx

@@ -22,6 +22,7 @@ import { PropertyDefinitionType, PropertyType } from '~/types'
 import { CopyToClipboardInline } from '../CopyToClipboard'
 import { PROPERTY_FILTER_TYPE_TO_TAXONOMIC_FILTER_GROUP_TYPE } from '../PropertyFilters/utils'
 import { PropertyKeyInfo } from '../PropertyKeyInfo'
+import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
 
 type HandledType = 'string' | 'number' | 'bigint' | 'boolean' | 'undefined' | 'null'
 type Type = HandledType | 'symbol' | 'object' | 'function'
@@ -293,7 +294,11 @@ export function PropertiesTable({
                         <div className="properties-table-key">
                             <PropertyKeyInfo
                                 value={item[0]}
-                                type={PROPERTY_FILTER_TYPE_TO_TAXONOMIC_FILTER_GROUP_TYPE[type]}
+                                type={
+                                    rootKey && type === 'event' && ['$set', '$set_once'].includes(rootKey)
+                                        ? TaxonomicFilterGroupType.PersonProperties
+                                        : PROPERTY_FILTER_TYPE_TO_TAXONOMIC_FILTER_GROUP_TYPE[type]
+                                }
                             />
                         </div>
                     )

frontend/src/lib/taxonomy.tsx

@@ -61,6 +61,14 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
             label: 'Screen',
             description: 'When a user loads a screen in a mobile app.',
         },
+        $set: {
+            label: 'Set',
+            description: 'Setting person properties.',
+        },
+        $opt_in: {
+            label: 'Opt In',
+            description: 'When a user opts into analytics.',
+        },
         $feature_flag_called: {
             label: 'Feature Flag Called',
             description: (
@@ -106,14 +114,6 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
             label: 'Rageclick',
             description: 'A user has rapidly and repeatedly clicked in a single place',
         },
-        $set: {
-            label: 'Set',
-            description: 'Person properties to be set',
-        },
-        $set_once: {
-            label: 'Set Once',
-            description: 'Person properties to be set if not set already (i.e. first-touch)',
-        },
         $exception: {
             label: 'Exception',
             description: 'Automatically captured exceptions from the client Sentry integration',
@@ -178,6 +178,14 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
     },
     event_properties: {
         distinct_id: {} as CoreFilterDefinition, // Copied from metadata down below
+        $set: {
+            label: 'Set',
+            description: 'Person properties to be set',
+        },
+        $set_once: {
+            label: 'Set Once',
+            description: 'Person properties to be set if not set already (i.e. first-touch)',
+        },
         $pageview_id: {
             label: 'Pageview ID',
             description: "PostHog's internal ID for matching events to a pageview.",
@@ -901,6 +909,7 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         },
     },
 } satisfies Partial<Record<TaxonomicFilterGroupType, Record<string, CoreFilterDefinition>>>
+
 CORE_FILTER_DEFINITIONS_BY_GROUP.person_properties = Object.fromEntries(
     Object.entries(CORE_FILTER_DEFINITIONS_BY_GROUP.event_properties).flatMap(([key, value]) =>
         eventToPersonProperties.has(key) || key.startsWith('$geoip_')

frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx

@@ -1,6 +1,7 @@
 import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
 import { ErrorDisplay } from 'lib/components/Errors/ErrorDisplay'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 import { autoCaptureEventToDescription, capitalizeFirstLetter } from 'lib/utils'
@@ -34,6 +35,7 @@ export function ItemEvent({ item, expanded, setExpanded }: ItemEventProps): JSX.
                         disablePopover
                         ellipsis={true}
                         value={capitalizeFirstLetter(autoCaptureEventToDescription(item.data))}
+                        type={TaxonomicFilterGroupType.Events}
                     />
                     {item.data.event === '$autocapture' ? <span className="text-muted-alt">(Autocapture)</span> : null}
                     {subValue ? (