feat: improve properties display in properties table and replay inspe…

…ctor (PostHog#25605)

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

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

@@ -8,10 +8,16 @@ import { combineUrl } from 'kea-router'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
 import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
-import { CORE_FILTER_DEFINITIONS_BY_GROUP, PROPERTY_KEYS } from 'lib/taxonomy'
+import {
+    CORE_FILTER_DEFINITIONS_BY_GROUP,
+    getCoreFilterDefinition,
+    NON_DOLLAR_POSTHOG_PROPERTY_KEYS,
+    PROPERTY_KEYS,
+} from 'lib/taxonomy'
 import { isURL } from 'lib/utils'
 import { useMemo, useState } from 'react'
 import { NewProperty } from 'scenes/persons/NewProperty'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { urls } from 'scenes/urls'
 
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
@@ -209,12 +215,26 @@ export function PropertiesTable({
     const [searchTerm, setSearchTerm] = useState('')
     const { hidePostHogPropertiesInTable } = useValues(userPreferencesLogic)
     const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic)
+    const { isCloudOrDev } = useValues(preflightLogic)
 
     const objectProperties = useMemo(() => {
         if (!properties || Array.isArray(properties)) {
             return []
         }
-        let entries = Object.entries(properties)
+        let entries = Object.entries(properties).sort((a, b) => {
+            // if this is a posthog property we want to sort by its label
+            const left = getCoreFilterDefinition(a[0], TaxonomicFilterGroupType.EventProperties)?.label || a[0]
+            const right = getCoreFilterDefinition(b[0], TaxonomicFilterGroupType.EventProperties)?.label || b[0]
+
+            if (left < right) {
+                return -1
+            }
+            if (left > right) {
+                return 1
+            }
+            return 0
+        })
+
         if (searchTerm) {
             const normalizedSearchTerm = searchTerm.toLowerCase()
             entries = entries.filter(([key, value]) => {
@@ -228,7 +248,11 @@ export function PropertiesTable({
         }
 
         if (filterable && hidePostHogPropertiesInTable) {
-            entries = entries.filter(([key]) => !key.startsWith('$') && !PROPERTY_KEYS.includes(key))
+            entries = entries.filter(([key]) => {
+                const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
+                const isNonDollarPostHogProperty = isCloudOrDev && NON_DOLLAR_POSTHOG_PROPERTY_KEYS.includes(key)
+                return !isPostHogProperty && !isNonDollarPostHogProperty
+            })
         }
 
         if (sortProperties) {