Added null option

PostHog · Dec 11, 2024 · 456dcd2 · 456dcd2
1 parent be16a0d
commit 456dcd2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -166,7 +166,7 @@ function ValueDisplay({
                             }
                         >
                             <LemonTag
-                                className="font-mono uppercase ml-1"
+                                className="ml-1 font-mono uppercase"
                                 type={isTypeMismatched ? 'danger' : 'muted'}
                                 icon={isTypeMismatched ? <IconWarning /> : 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,25 +431,34 @@ export function PropertiesTable({
         return (
             <>
                 {(searchable || filterable) && (
-                    <div className="flex justify-between items-center gap-2 mb-2">
+                    <div className="flex items-center justify-between gap-2 mb-2">
                         <span className="flex justify-between gap-2">
                             {searchable && (
                                 <LemonInput
                                     type="search"
                                     placeholder="Search property keys and values"
                                     value={searchTerm || ''}
                                     onChange={setSearchTerm}
-                                    className="max-w-full w-64"
+                                    className="w-64 max-w-full"
                                 />
                             )}
 
                             {filterable && (
-                                <LemonCheckbox
-                                    checked={hidePostHogPropertiesInTable}
-                                    label="Hide PostHog properties"
-                                    bordered
-                                    onChange={setHidePostHogPropertiesInTable}
-                                />
+                                <>
+                                    <LemonCheckbox
+                                        checked={hidePostHogPropertiesInTable}
+                                        label="Hide PostHog properties"
+                                        bordered
+                                        onChange={setHidePostHogPropertiesInTable}
+                                    />
+
+                                    <LemonCheckbox
+                                        checked={hideNullValues}
+                                        label="Hide null values"
+                                        bordered
+                                        onChange={setHideNullValues}
+                                    />
+                                </>
                             )}
                         </span>
 

diff --git a/frontend/src/lib/logic/userPreferencesLogic.ts b/frontend/src/lib/logic/userPreferencesLogic.ts
@@ -7,6 +7,7 @@ export const userPreferencesLogic = kea<userPreferencesLogicType>([
     path(['lib', 'logic', 'userPreferencesLogic']),
     actions({
         setHidePostHogPropertiesInTable: (enabled: boolean) => ({ enabled }),
+        setHideNullValues: (enabled: boolean) => ({ enabled }),
     }),
     reducers(() => ({
         hidePostHogPropertiesInTable: [
@@ -16,5 +17,6 @@ export const userPreferencesLogic = kea<userPreferencesLogicType>([
                 setHidePostHogPropertiesInTable: (_, { enabled }) => enabled,
             },
         ],
+        hideNullValues: [true, { persist: true }, { setHideNullValues: (_, { enabled }) => enabled }],
     })),
 ])