feat: directly filter replay by flags (#27295)

PostHog · Jan 7, 2025 · 0d7165a · 0d7165a
1 parent 3b30cdd
commit 0d7165a
Show file tree

Hide file tree

Showing 9 changed files with 239 additions and 32 deletions.
diff --git a/frontend/src/lib/components/UniversalFilters/UniversalFilterButton.tsx b/frontend/src/lib/components/UniversalFilters/UniversalFilterButton.tsx
@@ -1,6 +1,6 @@
 import './UniversalFilterButton.scss'
 
-import { IconFilter, IconX } from '@posthog/icons'
+import { IconFilter, IconLogomark, IconX } from '@posthog/icons'
 import { LemonButton, PopoverReferenceContext } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useValues } from 'kea'
@@ -78,15 +78,19 @@ const PropertyLabel = ({ filter }: { filter: AnyPropertyFilter }): JSX.Element =
     const { cohortsById } = useValues(cohortsModel)
     const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)
 
-    const label = formatPropertyLabel(
+    let label = formatPropertyLabel(
         filter,
         cohortsById,
         (s) => formatPropertyValueForDisplay(filter.key, s)?.toString() || '?'
     )
+    const isEventFeature = label.startsWith('$feature/')
+    if (isEventFeature) {
+        label = label.replace('$feature/', 'Feature: ')
+    }
 
     return (
         <>
-            <PropertyFilterIcon type={filter.type} />
+            {isEventFeature ? <IconLogomark /> : <PropertyFilterIcon type={filter.type} />}
             <span className="UniversalFilterButton-content" title={label}>
                 {typeof label === 'string' ? midEllipsis(label, 32) : label}
             </span>

diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -238,6 +238,7 @@ export const FEATURE_FLAGS = {
     COOKIELESS_SERVER_HASH_MODE_SETTING: 'cookieless-server-hash-mode-setting', // owner: @robbie-c #team-web-analytics
     INSIGHT_COLORS: 'insight-colors', // owner @thmsobrmlr #team-product-analytics
     WEB_ANALYTICS_FOR_MOBILE: 'web-analytics-for-mobile', // owner @robbie-c #team-web-analytics
+    REPLAY_FLAGS_FILTERS: 'replay-flags-filters', // owner @pauldambra #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

diff --git a/frontend/src/scenes/feature-flags/featureFlagLogic.ts b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
@@ -214,29 +214,10 @@ export const getRecordingFilterForFlagVariant = (
                                   ],
                               }
                             : {
-                                  id: '$feature_flag_called',
-                                  name: '$feature_flag_called',
-                                  type: 'events',
-                                  properties: [
-                                      {
-                                          key: '$feature/' + flagKey,
-                                          type: PropertyFilterType.Event,
-                                          value: [variantKey ? variantKey : 'false'],
-                                          operator: variantKey ? PropertyOperator.Exact : PropertyOperator.IsNot,
-                                      },
-                                      {
-                                          key: '$feature/' + flagKey,
-                                          type: PropertyFilterType.Event,
-                                          value: 'is_set',
-                                          operator: PropertyOperator.IsSet,
-                                      },
-                                      {
-                                          key: '$feature_flag',
-                                          type: PropertyFilterType.Event,
-                                          value: flagKey,
-                                          operator: PropertyOperator.Exact,
-                                      },
-                                  ],
+                                  type: PropertyFilterType.Event,
+                                  key: `$feature/${flagKey}`,
+                                  operator: PropertyOperator.Exact,
+                                  value: [variantKey ? variantKey : 'true'],
                               },
                     ],
                 },

diff --git a/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx b/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx
@@ -21,6 +21,7 @@ export const RecordingsUniversalFilters = ({
     setFilters,
     className,
     allowReplayHogQLFilters = false,
+    allowReplayFlagsFilters = false,
 }: {
     filters: RecordingUniversalFilters
     setFilters: (filters: Partial<RecordingUniversalFilters>) => void
@@ -46,6 +47,10 @@ export const RecordingsUniversalFilters = ({
         taxonomicGroupTypes.push(TaxonomicFilterGroupType.HogQLExpression)
     }
 
+    if (allowReplayFlagsFilters) {
+        taxonomicGroupTypes.push(TaxonomicFilterGroupType.EventFeatureFlags)
+    }
+
     return (
         <div className={clsx('divide-y bg-bg-light rounded', className)}>
             <div className="flex justify-between px-2 py-1.5 flex-wrap gap-1">

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -49,6 +49,7 @@ export function SessionRecordingsPlaylist({
     const { featureFlags } = useValues(featureFlagLogic)
     const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
     const allowReplayHogQLFilters = !!featureFlags[FEATURE_FLAGS.REPLAY_HOGQL_FILTERS]
+    const allowReplayFlagsFilters = !!featureFlags[FEATURE_FLAGS.REPLAY_FLAGS_FILTERS]
 
     const pinnedDescription = isTestingSaved ? 'Saved' : 'Pinned'
 
@@ -101,6 +102,7 @@ export function SessionRecordingsPlaylist({
                         setFilters={setFilters}
                         className="border"
                         allowReplayHogQLFilters={allowReplayHogQLFilters}
+                        allowReplayFlagsFilters={allowReplayFlagsFilters}
                     />
                 )}
                 <Playlist

diff --git a/frontend/src/scenes/session-recordings/utils.ts b/frontend/src/scenes/session-recordings/utils.ts
@@ -12,6 +12,7 @@ export const isUniversalFilters = (
     return 'filter_group' in filters
 }
 
+// TODO we shouldn't be ever converting to filters any more, but I won't unpick this in this PR
 export const filtersFromUniversalFilterGroups = (filters: RecordingUniversalFilters): UniversalFilterValue[] => {
     const group = filters.filter_group.values[0] as UniversalFiltersGroup
     return group.values as UniversalFilterValue[]

diff --git a/posthog/session_recordings/queries/session_recording_list_from_query.py b/posthog/session_recordings/queries/session_recording_list_from_query.py
@@ -83,12 +83,12 @@ def _strip_person_and_event_and_cohort_properties(
         return None
 
     properties_to_keep = [
-        g
-        for g in properties
-        if not is_event_property(g)
-        and not is_person_property(g)
-        and not is_group_property(g)
-        and not is_cohort_property(g)
+        p
+        for p in properties
+        if not is_event_property(p)
+        and not is_person_property(p)
+        and not is_group_property(p)
+        and not is_cohort_property(p)
     ]
 
     return properties_to_keep