add properties node

PostHog · Oct 18, 2023 · 6c26f97 · 6c26f97
1 parent ac0ad71
commit 6c26f97
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeProperties.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeProperties.tsx
@@ -0,0 +1,55 @@
+import { NotebookNodeType } from '~/types'
+import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
+import { NotebookNodeProps } from '../Notebook/utils'
+import { LemonLabel } from '@posthog/lemon-ui'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { PropertiesTable } from 'lib/components/PropertiesTable'
+
+const Component = ({
+    attributes,
+    updateAttributes,
+}: NotebookNodeProps<NotebookNodePropertiesAttributes>): JSX.Element => {
+    const { nodeId } = attributes
+
+    const person = {
+        properties: {
+            $geoip_city_name: 'Modena',
+            $geoip_continent_code: 'EU',
+            $geoip_continent_name: 'Europe',
+            $geoip_country_code: 'IT',
+            $geoip_country_name: 'Italy',
+            $geoip_latitude: 44.6511,
+            $geoip_longitude: 10.9211,
+            $geoip_postal_code: '41124',
+            $geoip_subdivision_1_code: '45',
+            $geoip_subdivision_1_name: 'Emilia-Romagna',
+            $geoip_subdivision_2_code: 'MO',
+            $geoip_subdivision_2_name: 'Province of Modena',
+            $geoip_time_zone: 'Europe/Rome',
+        },
+    }
+
+    return (
+        <div className="p-2">
+            {Object.entries(person.properties).map(([key, value]) => (
+                <div key={key}>
+                    <LemonLabel>
+                        <PropertyKeyInfo value={key} />
+                    </LemonLabel>
+                    <PropertiesTable properties={value} rootKey={key} />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+type NotebookNodePropertiesAttributes = {}
+
+export const NotebookNodeProperties = createPostHogWidgetNode<NotebookNodePropertiesAttributes>({
+    nodeType: NotebookNodeType.Properties,
+    titlePlaceholder: 'Properties',
+    Component,
+    resizeable: true,
+    expandable: false,
+    attributes: {},
+})
diff --git a/frontend/src/scenes/notebooks/Notebook/Editor.tsx b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
@@ -25,6 +25,7 @@ import { lemonToast } from '@posthog/lemon-ui'
 import { NotebookNodeType } from '~/types'
 import { NotebookNodeImage } from '../Nodes/NotebookNodeImage'
 import { NotebookNodeMap } from '../Nodes/NotebookNodeMap'
+import { NotebookNodeProperties } from '../Nodes/NotebookNodeProperties'
 
 import { EditorFocusPosition, EditorRange, JSONContent, Node, textContent } from './utils'
 import { SlashCommandsExtension } from './SlashCommands'
@@ -111,6 +112,7 @@ export function Editor(): JSX.Element {
             NotebookNodeSurvey,
             NotebookNodeImage,
             NotebookNodeMap,
+            NotebookNodeProperties,
             SlashCommandsExtension,
             BacklinkCommandsExtension,
             NodeGapInsertionExtension,

diff --git a/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx b/frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx
@@ -304,6 +304,12 @@ order by count() desc
         icon: <IconRecording />,
         command: (chain) => chain.insertContent({ type: NotebookNodeType.Map, attrs: {} }),
     },
+    {
+        title: 'Properties',
+        search: 'properties',
+        icon: <IconRecording />,
+        command: (chain) => chain.insertContent({ type: NotebookNodeType.Properties, attrs: {} }),
+    },
 ]
 
 export const SlashCommands = forwardRef<SlashCommandsRef, SlashCommandsProps>(function SlashCommands(

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -3067,6 +3067,7 @@ export enum NotebookNodeType {
     ReplayTimestamp = 'ph-replay-timestamp',
     Image = 'ph-image',
     Map = 'ph-map',
+    Properties = 'ph-properties',
 }
 
 export type NotebookNodeResource = {