feat(customers): Filter replay playlist by person UUID in person feed canvas (#42323)

Author: arthurdedeus

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

@@ -19,6 +19,7 @@ import { urls } from 'scenes/urls'
 
 import { FilterType, RecordingUniversalFilters, ReplayTabs } from '~/types'
 
+import { notebookLogic } from '../Notebook/notebookLogic'
 import { NotebookNodeAttributeProperties, NotebookNodeProps, NotebookNodeType } from '../types'
 import { notebookNodeLogic } from './notebookNodeLogic'
 
@@ -28,11 +29,13 @@ const Component = ({
 }: NotebookNodeProps<NotebookNodePlaylistAttributes>): JSX.Element => {
     const { pinned, nodeId, universalFilters } = attributes
     const playerKey = `notebook-${nodeId}`
+    const { personUUIDFromCanvasOverride } = useValues(notebookLogic)
 
     const recordingPlaylistLogicProps: SessionRecordingPlaylistLogicProps = useMemo(
         () => ({
             logicKey: playerKey,
             filters: universalFilters,
+            ...(personUUIDFromCanvasOverride ? { personUUID: personUUIDFromCanvasOverride } : {}),
             updateSearchParams: false,
             autoPlay: false,
             onFiltersChange: (newFilters) => updateAttributes({ universalFilters: newFilters }),

frontend/src/scenes/notebooks/Notebook/notebookLogic.ts

@@ -503,6 +503,17 @@ export const notebookLogic = kea<notebookLogicType>([
                 return insightNodes?.map((node) => node?.attrs?.query?.shortId)
             },
         ],
+
+        personUUIDFromCanvasOverride: [
+            () => [(_, props) => props],
+            (props: NotebookLogicProps): string | null => {
+                if (!props.canvasFiltersOverride || props.canvasFiltersOverride.length === 0) {
+                    return null
+                }
+                return props.canvasFiltersOverride.find((filter: AnyPropertyFilter) => filter.key === 'person_id')
+                    ?.value as string
+            },
+        ],
     }),
     listeners(({ values, actions, cache }) => ({
         insertAfterLastNode: async ({ content }) => {