fix(events): Fix PostHog property filtering (#25732)

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

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

@@ -1,4 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react'
+import { useActions } from 'kea'
+import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
+import { useEffect } from 'react'
 
 import { PropertyDefinitionType } from '~/types'
 
@@ -46,7 +49,7 @@ export const DollarPropertiesOnEvent: StoryFn = () => {
     return <PropertiesTableComponent type={PropertyDefinitionType.Event} properties={properties} />
 }
 
-export const DollarPropertiesOnPerson: StoryFn = () => {
+export const DollarPropertiesOnPersonSearchable: StoryFn = () => {
     const properties = {
         pineapple_enjoyment_score: 3,
         $browser: 'Chrome',
@@ -56,5 +59,24 @@ export const DollarPropertiesOnPerson: StoryFn = () => {
         $initial_utm_campaign: 'summer_sale',
         $initial_geoip_country_code: 'US',
     }
-    return <PropertiesTableComponent type={PropertyDefinitionType.Person} properties={properties} />
+    return <PropertiesTableComponent type={PropertyDefinitionType.Person} properties={properties} searchable />
+}
+
+export const DollarPropertiesOnPersonHidden: StoryFn = () => {
+    const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic)
+
+    useEffect(() => setHidePostHogPropertiesInTable(true), [])
+
+    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} searchable filterable />
+    )
 }

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

@@ -9,9 +9,9 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
 import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
 import {
+    CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS,
     CORE_FILTER_DEFINITIONS_BY_GROUP,
     getCoreFilterDefinition,
-    NON_DOLLAR_POSTHOG_PROPERTY_KEYS,
     PROPERTY_KEYS,
 } from 'lib/taxonomy'
 import { isURL } from 'lib/utils'
@@ -249,8 +249,8 @@ export function PropertiesTable({
 
         if (filterable && hidePostHogPropertiesInTable) {
             entries = entries.filter(([key]) => {
-                const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
-                const isNonDollarPostHogProperty = isCloudOrDev && NON_DOLLAR_POSTHOG_PROPERTY_KEYS.includes(key)
+                const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key)
+                const isNonDollarPostHogProperty = isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
                 return !isPostHogProperty && !isNonDollarPostHogProperty
             })
         }
@@ -410,9 +410,10 @@ export function PropertiesTable({
                             {searchable && (
                                 <LemonInput
                                     type="search"
-                                    placeholder="Search for property keys and values"
+                                    placeholder="Search property keys and values"
                                     value={searchTerm || ''}
                                     onChange={setSearchTerm}
+                                    className="max-w-full w-64"
                                 />
                             )}
 

frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss

@@ -1,4 +1,6 @@
 .LemonCheckbox {
+    --lemon-checkbox-height: calc(2.125rem + 3px); // Medium size button height + button shadow height;
+
     display: flex;
     align-items: center;
     width: fit-content;
@@ -88,7 +90,7 @@
         line-height: 1.4;
 
         label {
-            min-height: 2.5rem;
+            min-height: var(--lemon-checkbox-height);
             padding: 0 0.75rem;
             background: var(--bg-light);
             border: 1px solid var(--border);

frontend/src/lib/taxonomy.tsx

@@ -158,7 +158,7 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
             description: 'Automatically captured exceptions from the client Sentry integration',
         },
         $web_vitals: {
-            label: 'Web vitals',
+            label: 'Web Vitals',
             description: 'Automatically captured web vitals data',
         },
         // Mobile SDKs events
@@ -1417,7 +1417,7 @@ export const PROPERTY_KEYS = Object.keys(CORE_FILTER_DEFINITIONS_BY_GROUP.event_
  * but often more numerous than actual properties set on events and useful to hide
  * to make those properties discoverable
  */
-export const NON_DOLLAR_POSTHOG_PROPERTY_KEYS = [
+export const CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS = [
     'billing_period_end',
     'billing_period_start',
     'current_amount_usd.data_warehouse',
@@ -1443,6 +1443,13 @@ export const NON_DOLLAR_POSTHOG_PROPERTY_KEYS = [
     'custom_limits.product_analytics',
     'custom_limits.session_replay',
     'custom_limits.surveys',
+    'custom_limits_usd.data_warehouse',
+    'custom_limits_usd.feature_flags',
+    'custom_limits_usd.integrations',
+    'custom_limits_usd.platform_and_support',
+    'custom_limits_usd.product_analytics',
+    'custom_limits_usd.session_replay',
+    'custom_limits_usd.surveys',
     'free_allocation.data_warehouse',
     'free_allocation.feature_flags',
     'free_allocation.integrations',

frontend/src/scenes/session-recordings/player/inspector/components/eventPropertyFilteringLogic.ts

@@ -1,6 +1,6 @@
 import { connect, kea, path, selectors } from 'kea'
 import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
-import { NON_DOLLAR_POSTHOG_PROPERTY_KEYS, PROPERTY_KEYS } from 'lib/taxonomy'
+import { CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS, PROPERTY_KEYS } from 'lib/taxonomy'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
 import type { eventPropertyFilteringLogicType } from './eventPropertyFilteringLogicType'
@@ -50,7 +50,7 @@ export const eventPropertyFilteringLogic = kea<eventPropertyFilteringLogicType>(
                         Object.entries(props).filter(([key]) => {
                             const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
                             const isNonDollarPostHogProperty =
-                                isCloudOrDev && NON_DOLLAR_POSTHOG_PROPERTY_KEYS.includes(key)
+                                isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
                             return !isPostHogProperty && !isNonDollarPostHogProperty
                         })
                     )

frontend/src/scenes/teamLogic.tsx

@@ -260,7 +260,7 @@ export const teamLogic = kea<teamLogicType>([
         if (switchedTeam) {
             lemonToast.info(
                 <>
-                    You've switched to&nbsp;project
+                    You've switched to&nbsp;project{' '}
                     {values.featureFlags[FEATURE_FLAGS.ENVIRONMENTS]
                         ? `${currentProject?.name}, environment ${currentTeam?.name}`
                         : currentTeam?.name}