refactor: Pass down filter overrides through notebookLogic with BindLogic

Author: arthurdedeus

frontend/src/scenes/notebooks/Notebook/Notebook.tsx

@@ -14,7 +14,6 @@ import { NotebookLogicProps, notebookLogic } from 'scenes/notebooks/Notebook/not
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { SCRATCHPAD_NOTEBOOK } from '~/models/notebooksModel'
-import { AnyPropertyFilter } from '~/types'
 
 import { AddInsightsToNotebookModal } from '../AddInsightsToNotebookModal/AddInsightsToNotebookModal'
 import { Editor } from './Editor'
@@ -29,7 +28,6 @@ export type NotebookProps = NotebookLogicProps & {
     initialAutofocus?: EditorFocusPosition
     initialContent?: JSONContent
     editable?: boolean
-    canvasFiltersOverride?: AnyPropertyFilter[]
 }
 
 export function Notebook({
@@ -38,9 +36,8 @@ export function Notebook({
     editable = true,
     initialAutofocus = 'start',
     initialContent,
-    canvasFiltersOverride,
 }: NotebookProps): JSX.Element {
-    const logicProps: NotebookLogicProps = { shortId, mode, canvasFiltersOverride }
+    const logicProps: NotebookLogicProps = { shortId, mode }
     const logic = notebookLogic(logicProps)
     const { notebook, notebookLoading, editor, conflictWarningVisible, isEditable, isTemplate, notebookMissing } =
         useValues(logic)

frontend/src/scenes/persons/PersonFeedCanvas.tsx

@@ -1,8 +1,9 @@
-import { useValues } from 'kea'
+import { BindLogic, useValues } from 'kea'
 
 import { uuid } from 'lib/utils'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Notebook } from 'scenes/notebooks/Notebook/Notebook'
+import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
 
 import { AnyPropertyFilter, PersonType, PropertyFilterType, PropertyOperator } from '~/types'
 
@@ -15,6 +16,8 @@ const PersonFeedCanvas = ({ person }: PersonFeedCanvasProps): JSX.Element => {
 
     const id = person.id
     const distinctId = person.distinct_ids[0]
+    const shortId = `canvas-${id}`
+    const mode = 'canvas'
 
     const personFilter: AnyPropertyFilter[] = [
         {
@@ -26,60 +29,61 @@ const PersonFeedCanvas = ({ person }: PersonFeedCanvasProps): JSX.Element => {
     ]
 
     return (
-        <Notebook
-            editable={false}
-            shortId={`canvas-${id}`}
-            mode="canvas"
-            canvasFiltersOverride={personFilter}
-            initialContent={{
-                type: 'doc',
-                content: [
-                    { type: 'ph-usage-metrics', attrs: { personId: id, nodeId: uuid() } },
-                    {
-                        type: 'ph-person-feed',
-                        attrs: {
-                            height: null,
-                            title: null,
-                            nodeId: uuid(),
-                            id,
-                            distinctId,
-                            __init: null,
-                            children: [
-                                {
-                                    type: 'ph-person',
-                                    attrs: { id, distinctId, nodeId: uuid(), title: 'Info' },
-                                },
-                                ...(isCloudOrDev
-                                    ? [
-                                          {
-                                              type: 'ph-map',
-                                              attrs: { id, distinctId, nodeId: uuid() },
-                                          },
-                                      ]
-                                    : []),
-                                {
-                                    type: 'ph-person-properties',
-                                    attrs: { id, distinctId, nodeId: uuid() },
-                                },
-                                { type: 'ph-related-groups', attrs: { id, nodeId: uuid(), type: 'group' } },
-                            ],
+        <BindLogic logic={notebookLogic} props={{ shortId, mode, canvasFiltersOverride: personFilter }}>
+            <Notebook
+                editable={false}
+                shortId={shortId}
+                mode={mode}
+                initialContent={{
+                    type: 'doc',
+                    content: [
+                        { type: 'ph-usage-metrics', attrs: { personId: id, nodeId: uuid() } },
+                        {
+                            type: 'ph-person-feed',
+                            attrs: {
+                                height: null,
+                                title: null,
+                                nodeId: uuid(),
+                                id,
+                                distinctId,
+                                __init: null,
+                                children: [
+                                    {
+                                        type: 'ph-person',
+                                        attrs: { id, distinctId, nodeId: uuid(), title: 'Info' },
+                                    },
+                                    ...(isCloudOrDev
+                                        ? [
+                                              {
+                                                  type: 'ph-map',
+                                                  attrs: { id, distinctId, nodeId: uuid() },
+                                              },
+                                          ]
+                                        : []),
+                                    {
+                                        type: 'ph-person-properties',
+                                        attrs: { id, distinctId, nodeId: uuid() },
+                                    },
+                                    { type: 'ph-related-groups', attrs: { id, nodeId: uuid(), type: 'group' } },
+                                ],
+                            },
                         },
-                    },
-                    {
-                        type: 'ph-llm-trace',
-                        attrs: { personId: id, nodeId: uuid() },
-                    },
-                    {
-                        type: 'ph-zendesk-tickets',
-                        attrs: { personId: id, nodeId: uuid() },
-                    },
-                    {
-                        type: 'ph-issues',
-                        attrs: { personId: id, nodeId: uuid() },
-                    },
-                ],
-            }}
-        />
+                        {
+                            type: 'ph-llm-trace',
+                            attrs: { personId: id, nodeId: uuid() },
+                        },
+                        {
+                            type: 'ph-zendesk-tickets',
+                            attrs: { personId: id, nodeId: uuid() },
+                        },
+                        {
+                            type: 'ph-issues',
+                            attrs: { personId: id, nodeId: uuid() },
+                        },
+                    ],
+                }}
+            />
+        </BindLogic>
     )
 }