feat(customers): Filter replay playlist by person/group in feed canvases

Author: arthurdedeus

frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx

@@ -17,8 +17,9 @@ import {
 } from 'scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic'
 import { urls } from 'scenes/urls'
 
-import { FilterType, RecordingUniversalFilters, ReplayTabs } from '~/types'
+import { AnyPropertyFilter, FilterType, PropertyFilterType, RecordingUniversalFilters, ReplayTabs } from '~/types'
 
+import { notebookLogic } from '../Notebook/notebookLogic'
 import { NotebookNodeAttributeProperties, NotebookNodeProps, NotebookNodeType } from '../types'
 import { notebookNodeLogic } from './notebookNodeLogic'
 
@@ -28,11 +29,21 @@ const Component = ({
 }: NotebookNodeProps<NotebookNodePlaylistAttributes>): JSX.Element => {
     const { pinned, nodeId, universalFilters } = attributes
     const playerKey = `notebook-${nodeId}`
+    const { canvasFiltersOverride } = useValues(notebookLogic)
+    const convertedOverrides = convertCanvasFiltersOverrideToRecordingFilters(canvasFiltersOverride)
+
+    const filters = {
+        ...universalFilters,
+        filter_group: {
+            ...universalFilters.filter_group,
+            values: [...universalFilters.filter_group.values, ...convertedOverrides],
+        },
+    }
 
     const recordingPlaylistLogicProps: SessionRecordingPlaylistLogicProps = useMemo(
         () => ({
             logicKey: playerKey,
-            filters: universalFilters,
+            filters,
             updateSearchParams: false,
             autoPlay: false,
             onFiltersChange: (newFilters) => updateAttributes({ universalFilters: newFilters }),
@@ -164,3 +175,34 @@ export function buildPlaylistContent(filters: Partial<FilterType>): JSONContent
         attrs: { filters },
     }
 }
+
+function convertCanvasFiltersOverrideToRecordingFilters(canvasFilters: AnyPropertyFilter[]): AnyPropertyFilter[] {
+    if (!canvasFilters.length) {
+        return []
+    }
+
+    return canvasFilters.map((filter) => {
+        switch (filter.key) {
+            case 'person_id':
+                return {
+                    type: PropertyFilterType.HogQL,
+                    key: `person_id = '${filter.value}'`,
+                    value: null,
+                }
+
+            case '$group_0':
+            case '$group_1':
+            case '$group_2':
+            case '$group_3':
+            case '$group_4':
+                return {
+                    type: PropertyFilterType.HogQL,
+                    key: `properties.${filter.key} = '${filter.value}'`,
+                    value: null,
+                }
+
+            default:
+                return filter
+        }
+    })
+}