feat(customers): Filter insight by group in GroupFeedCanvas

Author: arthurdedeus

products/customer_analytics/frontend/components/GroupFeedCanvas/GroupFeedCanvas.tsx

@@ -1,10 +1,12 @@
-import { BindLogic } from 'kea'
+import { BindLogic, useValues } from 'kea'
 
 import { uuid } from 'lib/utils'
 import { groupLogic } from 'scenes/groups/groupLogic'
 import { Notebook } from 'scenes/notebooks/Notebook/Notebook'
+import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
 
-import { Group } from '~/types'
+import { groupsModel } from '~/models/groupsModel'
+import { AnyPropertyFilter, Group, PropertyFilterType, PropertyOperator } from '~/types'
 
 interface GroupFeedCanvasProps {
     group: Group
@@ -14,69 +16,86 @@ interface GroupFeedCanvasProps {
 export const GroupFeedCanvas = ({ group, tabId }: GroupFeedCanvasProps): JSX.Element => {
     const groupKey = group.group_key
     const groupTypeIndex = group.group_type_index
+    const { aggregationLabel } = useValues(groupsModel)
+
+    const shortId = `canvas-${groupKey}-${tabId}`
+    const mode = 'canvas'
+
+    const groupFilter: AnyPropertyFilter[] = [
+        {
+            type: PropertyFilterType.EventMetadata,
+            key: `$group_${groupTypeIndex}`,
+            label: aggregationLabel(groupTypeIndex).singular,
+            value: groupKey,
+            operator: PropertyOperator.Exact,
+        },
+    ]
 
     return (
-        <BindLogic logic={groupLogic} props={{ groupKey, groupTypeIndex, tabId }}>
-            <Notebook
-                editable={false}
-                shortId={`canvas-${groupKey}-${tabId}`}
-                mode="canvas"
-                initialContent={{
-                    type: 'doc',
-                    content: [
-                        {
-                            type: 'ph-usage-metrics',
-                            attrs: {
-                                groupKey,
-                                groupTypeIndex,
-                                tabId,
-                                nodeId: uuid(),
-                                children: [
-                                    {
-                                        type: 'ph-group',
-                                        attrs: {
-                                            id: groupKey,
-                                            groupTypeIndex,
-                                            tabId,
-                                            nodeId: uuid(),
-                                            title: 'Info',
+        <BindLogic logic={notebookLogic} props={{ shortId, mode, canvasFiltersOverride: groupFilter }}>
+            <BindLogic logic={groupLogic} props={{ groupKey, groupTypeIndex, tabId }}>
+                <Notebook
+                    editable={false}
+                    shortId={`canvas-${groupKey}-${tabId}`}
+                    mode="canvas"
+                    canvasFiltersOverride={groupFilter}
+                    initialContent={{
+                        type: 'doc',
+                        content: [
+                            {
+                                type: 'ph-usage-metrics',
+                                attrs: {
+                                    groupKey,
+                                    groupTypeIndex,
+                                    tabId,
+                                    nodeId: uuid(),
+                                    children: [
+                                        {
+                                            type: 'ph-group',
+                                            attrs: {
+                                                id: groupKey,
+                                                groupTypeIndex,
+                                                tabId,
+                                                nodeId: uuid(),
+                                                title: 'Info',
+                                            },
                                         },
-                                    },
-                                    {
-                                        type: 'ph-group-properties',
-                                        attrs: {
-                                            nodeId: uuid(),
+                                        {
+                                            type: 'ph-group-properties',
+                                            attrs: {
+                                                nodeId: uuid(),
+                                            },
                                         },
-                                    },
-                                    {
-                                        type: 'ph-related-groups',
-                                        attrs: {
-                                            id: groupKey,
-                                            groupTypeIndex,
-                                            nodeId: uuid(),
-                                            title: 'Related people',
-                                            type: 'person',
+                                        {
+                                            type: 'ph-related-groups',
+                                            attrs: {
+                                                id: groupKey,
+                                                groupTypeIndex,
+                                                nodeId: uuid(),
+                                                title: 'Related people',
+                                                type: 'person',
+                                            },
                                         },
-                                    },
-                                ],
+                                    ],
+                                },
+                            },
+                            {
+                                type: 'ph-issues',
+                                attrs: { groupKey, groupTypeIndex, tabId, nodeId: uuid() },
                             },
-                        },
-                        {
-                            type: 'ph-issues',
-                            attrs: { groupKey, groupTypeIndex, tabId, nodeId: uuid() },
-                        },
-                        {
-                            type: 'ph-llm-trace',
-                            attrs: {
-                                groupKey,
-                                groupTypeIndex,
-                                tabId,
-                                nodeId: uuid(),
+                            {
+                                type: 'ph-llm-trace',
+                                attrs: {
+                                    groupKey,
+                                    groupTypeIndex,
+                                    tabId,
+                                    nodeId: uuid(),
+                                },
                             },
-                        },
-                    ],
-                }}
-            />
+                        ],
+                    }}
+                />
+            </BindLogic>
         </BindLogic>
     )
 }