PostHog · benjackwhite · Jun 18, 2025 · May 7, 2025 · May 7, 2025 · May 7, 2025
diff --git a/...__snapshots__/scenes-app-insights-funnels--funnel-top-to-bottom-edit--light.png b/...__snapshots__/scenes-app-insights-funnels--funnel-top-to-bottom-edit--light.png
diff --git a/frontend/src/lib/components/CyclotronJob/CyclotronJobInputs.tsx b/frontend/src/lib/components/CyclotronJob/CyclotronJobInputs.tsx
@@ -34,10 +34,12 @@ import { CyclotronJobInputIntegration } from './integrations/CyclotronJobInputIn
 import { CyclotronJobInputIntegrationField } from './integrations/CyclotronJobInputIntegrationField'
 import { CyclotronJobInputConfiguration } from './types'
 
+const INPUT_TYPE_LIST = ['string', 'number', 'boolean', 'dictionary', 'choice', 'json', 'integration', 'email'] as const
+
 export type CyclotronJobInputsProps = {
     configuration: CyclotronJobInputConfiguration
-    onInputSchemaChange: (schema: CyclotronJobInputSchemaType[]) => void
     onInputChange: (key: string, input: CyclotronJobInputType) => void
+    onInputSchemaChange?: (schema: CyclotronJobInputSchemaType[]) => void
     showSource: boolean
 }
 
@@ -88,8 +90,6 @@ export function CyclotronJobInputs({
     )
 }
 
-const typeList = ['string', 'number', 'boolean', 'dictionary', 'choice', 'json', 'integration', 'email'] as const
-
 function JsonConfigField(props: {
     input: CyclotronJobInputType
     onChange?: (input: CyclotronJobInputType) => void
@@ -400,7 +400,7 @@ function CyclotronJobInputSchemaControls({
             <div className="flex flex-wrap flex-1 gap-2 items-center">
                 <LemonSelect
                     size="small"
-                    options={typeList.map((type) => ({
+                    options={INPUT_TYPE_LIST.map((type) => ({
                         label: capitalizeFirstLetter(type),
                         value: type,
                     }))}

diff --git a/frontend/src/lib/components/CyclotronJob/cyclotronJobInputLogic.ts b/frontend/src/lib/components/CyclotronJob/cyclotronJobInputLogic.ts
@@ -20,7 +20,7 @@ export function formatJsonValue(value: any): string {
 }
 
 export const cyclotronJobInputLogic = kea<cyclotronJobInputLogicType>({
-    path: ['components', 'cyclotron-jobs', 'cyclotronJobInputLogic'],
+    path: ['lib', 'components', 'CyclotronJob', 'cyclotronJobInputLogic'],
     props: {} as CyclotronJobInputLogicProps,
     key: (props: CyclotronJobInputLogicProps) => `json_validation_${props.fieldKey}`,
 

diff --git a/frontend/src/scenes/hog-functions/configuration/HogFunctionInputLogic.ts b/frontend/src/scenes/hog-functions/configuration/HogFunctionInputLogic.ts
diff --git a/...src/scenes/hog-functions/configuration/components/hogFunctionTemplateSuggestionsLogic.tsx b/...src/scenes/hog-functions/configuration/components/hogFunctionTemplateSuggestionsLogic.tsx
diff --git a/frontend/src/scenes/hog-functions/email-templater/emailTemplaterLogic.tsx b/frontend/src/scenes/hog-functions/email-templater/emailTemplaterLogic.tsx
@@ -36,7 +36,7 @@ export interface EmailTemplaterLogicProps {
 
 export const emailTemplaterLogic = kea<emailTemplaterLogicType>([
     props({} as EmailTemplaterLogicProps),
-    path(() => ['scenes', 'pipeline', 'hogfunctions', 'emailTemplaterLogic']),
+    path(['scenes', 'hog-functions', 'email-templater', 'emailTemplaterLogic']),
     actions({
         setEmailEditorRef: (emailEditorRef: EditorRef | null) => ({ emailEditorRef }),
         onEmailEditorReady: true,

diff --git a/products/messaging/frontend/Campaigns/Workflows/Nodes/NodeDetailsPanel.tsx b/products/messaging/frontend/Campaigns/Workflows/Nodes/NodeDetailsPanel.tsx
@@ -0,0 +1,87 @@
+import { IconTrash, IconX } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+import { getOutgoers, Node, Panel, useEdges, useNodes } from '@xyflow/react'
+import { Form } from 'kea-forms'
+import { CyclotronJobInputs } from 'lib/components/CyclotronJob/CyclotronJobInputs'
+import { capitalizeFirstLetter } from 'lib/utils'
+
+import type { HogFlowAction } from '../types'
+import { nodeLogic } from './nodeLogic'
+import { getNodeInputsSchema } from './utils'
+
+export function NodeDetailsPanel({
+    node,
+    onChange,
+    onDelete,
+    onClose,
+}: {
+    node: Node<HogFlowAction>
+    onChange: (node: Node<HogFlowAction>) => void
+    onDelete: (node: Node<HogFlowAction>) => void
+    onClose: () => void
+}): JSX.Element {
+    const nodes = useNodes()
+    const edges = useEdges()
+
+    const canBeDeleted = (): boolean => {
+        const outgoingNodes = getOutgoers(node, nodes, edges)
+        if (outgoingNodes.length === 1) {
+            return true
+        }
+
+        return new Set(outgoingNodes.map((node) => node.id)).size === 1
+    }
+
+    const handleInputChange = (key: string, value: any): void => {
+        onChange({
+            ...node,
+            data: {
+                ...node.data,
+                config: {
+                    ...node.data.config,
+                    inputs: {
+                        ...node.data.config.inputs,
+                        [key]: value,
+                    },
+                },
+            },
+        })
+    }
+
+    return (
+        <Panel position="top-right">
+            <Form
+                logic={nodeLogic}
+                props={{ node }}
+                formKey="inputs"
+                className="bg-surface-primary rounded-md shadow-md p-4 gap-2 flex flex-col z-10 min-w-[300px] max-w-[500px] max-h-3/4 overflow-y-scroll"
+            >
+                <div className="flex justify-between items-center">
+                    <h3 className="font-semibold">Edit {capitalizeFirstLetter(node.data.type)} step</h3>
+                    <div className="flex gap-1 items-center">
+                        {node.deletable && (
+                            <LemonButton
+                                size="small"
+                                status="danger"
+                                 => onDelete(node)}
+                                icon={<IconTrash />}
+                                disabledReason={canBeDeleted() ? undefined : 'Clean up branching steps first'}
+                            />
+                        )}
+                        <LemonButton size="small" icon={<IconX />}  aria-label="close" />
+                    </div>
+                </div>
+                <div className="flex flex-col gap-2">
+                    <CyclotronJobInputs
+                        configuration={{
+                            inputs: node.data.config.inputs,
+                            inputs_schema: getNodeInputsSchema(node.data),
+                        }}
+                        >
+                        showSource={false}
+                    />
+                </div>
+            </Form>
+        </Panel>
+    )
+}
diff --git a/products/messaging/frontend/Campaigns/Workflows/Nodes/Nodes.tsx b/products/messaging/frontend/Campaigns/Workflows/Nodes/Nodes.tsx
@@ -1,5 +1,6 @@
 import { IconBolt, IconDecisionTree, IconHourglass, IconLeave, IconPlus, IconRevert, IconSend } from '@posthog/icons'
 import { Handle, useUpdateNodeInternals } from '@xyflow/react'
+import { capitalizeFirstLetter } from 'lib/utils'
 import { useEffect } from 'react'
 
 import type { HogFlowAction } from '../types'
@@ -58,7 +59,9 @@ function BaseNode({ id, icon, selected, type, data, children }: NodeProps): JSX.
         >
             <div className="flex items-center justify-center gap-1">
                 {icon}
-                <div className="text-xs">{data.name}</div>
+                <div className="text-xs">
+                    {data.config.inputs.name?.value || capitalizeFirstLetter(type || 'Untitled')}
+                </div>
             </div>
             {children}
             {handles?.map((handle) => (

diff --git a/products/messaging/frontend/Campaigns/Workflows/Nodes/StepDetails.tsx b/products/messaging/frontend/Campaigns/Workflows/Nodes/StepDetails.tsx