feat: Person feed properties node

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

@@ -0,0 +1,66 @@
+import { NotebookNodeType, PropertyDefinitionType } from '~/types'
+import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
+import { LemonLabel, LemonSkeleton } from '@posthog/lemon-ui'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { PropertiesTable } from 'lib/components/PropertiesTable'
+import { useValues } from 'kea'
+import { personLogic } from 'scenes/persons/personLogic'
+import { NotebookNodeProps } from '../Notebook/utils'
+import { NotFound } from 'lib/components/NotFound'
+import { notebookNodeLogic } from './notebookNodeLogic'
+
+const Component = ({ attributes }: NotebookNodeProps<NotebookNodePropertiesAttributes>): JSX.Element | null => {
+    const { id } = attributes
+
+    const { expanded } = useValues(notebookNodeLogic)
+
+    const logic = personLogic({ id })
+    const { person, personLoading } = useValues(logic)
+
+    if (personLoading) {
+        return <LemonSkeleton className="h-6" />
+    } else if (!person) {
+        return <NotFound object="person" />
+    }
+
+    const numProperties = Object.keys(person.properties).length
+
+    if (!expanded) {
+        return null
+    }
+
+    return (
+        <div className="py-2 px-4 text-xs">
+            {Object.entries(person.properties).map(([key, value], index) => {
+                const isLast = index === numProperties - 1
+
+                return (
+                    <div key={key} className="mb-1">
+                        <LemonLabel className="leading-4">
+                            <PropertyKeyInfo value={key} />
+                        </LemonLabel>
+                        <div className={`${!isLast && 'border-b border-border-light pb-1'}`}>
+                            <PropertiesTable properties={value} rootKey={key} type={PropertyDefinitionType.Person} />
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+type NotebookNodePropertiesAttributes = {
+    id: string
+}
+
+export const NotebookNodeProperties = createPostHogWidgetNode({
+    nodeType: NotebookNodeType.Properties,
+    titlePlaceholder: 'Properties',
+    Component,
+    resizeable: false,
+    expandable: true,
+    startExpanded: true,
+    attributes: {
+        id: {},
+    },
+})

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

@@ -39,6 +39,7 @@ import { sampleOne } from 'lib/utils'
 import { NotebookNodeGroup } from '../Nodes/NotebookNodeGroup'
 import { NotebookNodeCohort } from '../Nodes/NotebookNodeCohort'
 import { NotebookNodePersonFeed } from '../Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed'
+import { NotebookNodeProperties } from '../Nodes/NotebookNodeProperties'
 import { NotebookNodeMap } from '../Nodes/NotebookNodeMap'
 
 const CustomDocument = ExtensionDocument.extend({
@@ -117,6 +118,7 @@ export function Editor(): JSX.Element {
             NotebookNodeEarlyAccessFeature,
             NotebookNodeSurvey,
             NotebookNodeImage,
+            NotebookNodeProperties,
             SlashCommandsExtension,
             BacklinkCommandsExtension,
             NodeGapInsertionExtension,

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

@@ -125,6 +125,7 @@ export const textContent = (node: any): string => {
         'ph-group': customOrTitleSerializer,
         'ph-cohort': customOrTitleSerializer,
         'ph-person-feed': customOrTitleSerializer,
+        'ph-properties': customOrTitleSerializer,
         'ph-map': customOrTitleSerializer,
     }
 

frontend/src/scenes/notebooks/NotebooksTable/ContainsTypeFilter.tsx

@@ -4,7 +4,7 @@ import { NotebooksListFilters } from 'scenes/notebooks/NotebooksTable/notebooksT
 
 export const fromNodeTypeToLabel: Omit<
     Record<NotebookNodeType, string>,
-    NotebookNodeType.Backlink | NotebookNodeType.PersonFeed | NotebookNodeType.Map
+    NotebookNodeType.Backlink | NotebookNodeType.PersonFeed | NotebookNodeType.Properties | NotebookNodeType.Map
 > = {
     [NotebookNodeType.FeatureFlag]: 'Feature flags',
     [NotebookNodeType.FeatureFlagCodeExample]: 'Feature flag Code Examples',

frontend/src/scenes/persons/PersonFeedCanvas.tsx

@@ -36,6 +36,10 @@ const PersonFeedCanvas = ({ person }: PersonFeedCanvasProps): JSX.Element => {
                                     type: 'ph-map',
                                     attrs: { id: personId, nodeId: uuid() },
                                 },
+                                {
+                                    type: 'ph-properties',
+                                    attrs: { id: personId, nodeId: uuid() },
+                                },
                             ],
                         },
                     },

frontend/src/types.ts

@@ -3082,6 +3082,7 @@ export enum NotebookNodeType {
     ReplayTimestamp = 'ph-replay-timestamp',
     Image = 'ph-image',
     PersonFeed = 'ph-person-feed',
+    Properties = 'ph-properties',
     Map = 'ph-map',
 }