diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx index 756844702c3e5..ef00497e9314c 100644 --- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx +++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx @@ -166,7 +166,7 @@ function ValueDisplay({ } > : undefined} > @@ -222,8 +222,8 @@ export function PropertiesTable({ parent, }: PropertiesTableType): JSX.Element { const [searchTerm, setSearchTerm] = useState('') - const { hidePostHogPropertiesInTable } = useValues(userPreferencesLogic) - const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic) + const { hidePostHogPropertiesInTable, hideNullValues } = useValues(userPreferencesLogic) + const { setHidePostHogPropertiesInTable, setHideNullValues } = useActions(userPreferencesLogic) const { isCloudOrDev } = useValues(preflightLogic) const objectProperties = useMemo(() => { @@ -283,11 +283,18 @@ export function PropertiesTable({ }) } - if (filterable && hidePostHogPropertiesInTable) { - entries = entries.filter(([key]) => { - const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key) - const isNonDollarPostHogProperty = isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key) - return !isPostHogProperty && !isNonDollarPostHogProperty + if (filterable) { + entries = entries.filter(([key, value]) => { + if (hideNullValues && value === null) { + return false + } + if (hidePostHogPropertiesInTable) { + const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key) + const isNonDollarPostHogProperty = + isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key) + return !isPostHogProperty && !isNonDollarPostHogProperty + } + return true }) } @@ -299,7 +306,7 @@ export function PropertiesTable({ }) } return entries - }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable]) + }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable, hideNullValues]) if (Array.isArray(properties)) { return ( @@ -424,7 +431,7 @@ export function PropertiesTable({ return ( <> {(searchable || filterable) && ( -
+
{searchable && ( )} {filterable && ( - + <> + + + + )} diff --git a/frontend/src/lib/logic/userPreferencesLogic.ts b/frontend/src/lib/logic/userPreferencesLogic.ts index 4bbcdd352a91c..f15d4abce5713 100644 --- a/frontend/src/lib/logic/userPreferencesLogic.ts +++ b/frontend/src/lib/logic/userPreferencesLogic.ts @@ -7,6 +7,7 @@ export const userPreferencesLogic = kea([ path(['lib', 'logic', 'userPreferencesLogic']), actions({ setHidePostHogPropertiesInTable: (enabled: boolean) => ({ enabled }), + setHideNullValues: (enabled: boolean) => ({ enabled }), }), reducers(() => ({ hidePostHogPropertiesInTable: [ @@ -16,5 +17,6 @@ export const userPreferencesLogic = kea([ setHidePostHogPropertiesInTable: (_, { enabled }) => enabled, }, ], + hideNullValues: [true, { persist: true }, { setHideNullValues: (_, { enabled }) => enabled }], })), ])