feat(agentflow): Node Info Icon on Toolbar Action (FLOWISE-375) (#6053)

- Reintroduced NodeInfoDialog component with improved structure and functionality.
- Added new properties (badge, tags, documentation) to NodeData interface for better metadata handling.
- Updated flowExport and nodeFactory utilities to preserve new metadata during data processing.
- Implemented tests for NodeInfoDialog to ensure proper rendering and functionality.
- Adjusted Jest configuration to include coverage for the new NodeInfoDialog component.

Author: jocelynlin-wd

packages/agentflow/jest.config.js

@@ -54,6 +54,7 @@ module.exports = {
         './src/features/canvas/components/ConnectionLine.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         // Only getMinimumNodeHeight() is tested; the component is Tier 3 UI with no business logic
         './src/features/canvas/components/NodeOutputHandles.tsx': { branches: 0, functions: 10, lines: 30, statements: 30 },
+        './src/features/canvas/containers/NodeInfoDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/canvas/hooks/': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/generator/GenerateFlowDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/node-editor/': { branches: 80, functions: 80, lines: 80, statements: 80 },

packages/agentflow/src/core/types/node.ts

@@ -21,6 +21,10 @@ export interface NodeData {
     icon?: string
     selected?: boolean
     hideInput?: boolean
+    // Metadata from component definition
+    badge?: string
+    tags?: string[]
+    documentation?: string
     // Status properties
     status?: 'INPROGRESS' | 'FINISHED' | 'ERROR' | 'STOPPED' | 'TERMINATED'
     error?: string
@@ -86,6 +90,16 @@ export interface InputParam {
     codeExample?: string // Example code snippet shown via an "Example" button
 }
 
+export interface NodeConfigEntry {
+    node: string
+    nodeId: string
+    label: string
+    name: string
+    type: string
+    enabled?: boolean
+    schema?: Record<string, string> | Array<{ name: string; type: string }>
+}
+
 export interface EdgeData {
     sourceColor?: string
     targetColor?: string

packages/agentflow/src/core/utils/flowExport.ts

@@ -21,6 +21,7 @@ function pickExportNodeData(data: NodeData): NodeData {
         color: data.color,
         hideInput: data.hideInput,
         baseClasses: data.baseClasses,
+        tags: data.tags,
         category: data.category,
         description: data.description,
         inputs: data.inputs,

packages/agentflow/src/core/utils/nodeFactory.test.ts

@@ -223,14 +223,17 @@ describe('initNode', () => {
             badge: 'NEW',
             author: 'Flowise',
             documentation: 'https://docs.example.com',
+            tags: ['LLM', 'OpenAI'],
             loadMethods: { listModels: () => Promise.resolve([]) }
         } as Partial<NodeData>)
         const result = initNode(nodeData, 'n1')
         expect(result).not.toHaveProperty('filePath')
-        expect(result).not.toHaveProperty('badge')
         expect(result).not.toHaveProperty('author')
-        expect(result).not.toHaveProperty('documentation')
         expect(result).not.toHaveProperty('loadMethods')
+        // badge, tags, documentation are preserved for NodeInfoDialog display
+        expect(result.badge).toBe('NEW')
+        expect(result.tags).toEqual(['LLM', 'OpenAI'])
+        expect(result.documentation).toBe('https://docs.example.com')
     })
 
     it('should strip runtime-only state from node data', () => {

packages/agentflow/src/core/utils/nodeFactory.ts

@@ -90,12 +90,12 @@ function createAgentFlowOutputs(nodeData: NodeData, newNodeId: string): Array<{
 
 /**
  * Pick only the properties that belong to NodeData from a server API response.
- * Strips server-only metadata (filePath, badge, author, loadMethods, etc.)
+ * Strips server-only metadata (filePath, author, loadMethods, etc.)
  * and runtime-only state (status, error, warning, hint, validationErrors)
  * that should not be persisted in flow data.
  *
- * Mirrors the allowlist used by generateExportFlowData in agentflow v2
- * (packages/ui/src/utils/genericHelper.js).
+ * Preserves component metadata needed at runtime (badge, tags, documentation)
+ * for display in the NodeInfoDialog.
  */
 function pickNodeData(raw: NodeData): NodeData {
     return {
@@ -114,7 +114,10 @@ function pickNodeData(raw: NodeData): NodeData {
         outputAnchors: raw.outputAnchors,
         color: raw.color,
         icon: raw.icon,
-        hideInput: raw.hideInput
+        hideInput: raw.hideInput,
+        badge: raw.badge,
+        tags: raw.tags,
+        documentation: raw.documentation
     }
 }
 

packages/agentflow/src/features/canvas/components/NodeInfoDialog.tsx

@@ -2,7 +2,6 @@ export type { AgentflowHeaderProps } from './AgentflowHeader'
 export { AgentflowHeader, createHeaderProps } from './AgentflowHeader'
 export { ConnectionLine } from './ConnectionLine'
 export { NodeIcon } from './NodeIcon'
-export { NodeInfoDialog } from './NodeInfoDialog'
 export { NodeInputHandle } from './NodeInputHandle'
 export { NodeModelConfigs } from './NodeModelConfigs'
 export { getMinimumNodeHeight, NodeOutputHandles } from './NodeOutputHandles'

packages/agentflow/src/features/canvas/components/index.ts

@@ -7,7 +7,6 @@ import type { NodeData } from '@/core/types'
 import { useApiContext, useConfigContext } from '@/infrastructure/store'
 
 import { NodeIcon } from '../components/NodeIcon'
-import { NodeInfoDialog } from '../components/NodeInfoDialog'
 import { NodeInputHandle } from '../components/NodeInputHandle'
 import { NodeModelConfigs } from '../components/NodeModelConfigs'
 import { getMinimumNodeHeight, NodeOutputHandles } from '../components/NodeOutputHandles'
@@ -17,6 +16,8 @@ import { useOpenNodeEditor } from '../hooks'
 import { useNodeColors } from '../hooks/useNodeColors'
 import { CardWrapper } from '../styled'
 
+import { NodeInfoDialog } from './NodeInfoDialog'
+
 /** Width of the node icon container in pixels (theme.spacing(6.25) = 50px) */
 const NODE_ICON_CONTAINER_WIDTH = 50
 
@@ -118,14 +119,7 @@ function AgentFlowNodeComponent({ data }: AgentFlowNodeProps) {
                 </Box>
             </CardWrapper>
 
-            <NodeInfoDialog
-                open={showInfoDialog}
-                onClose={() => setShowInfoDialog(false)}
-                label={data.label}
-                name={data.name}
-                nodeId={data.id}
-                description={data.description}
-            />
+            <NodeInfoDialog open={showInfoDialog} onClose={() => setShowInfoDialog(false)} data={data} />
         </div>
     )
 }

packages/agentflow/src/features/canvas/containers/AgentFlowNode.tsx

@@ -8,14 +8,15 @@ import type { NodeData } from '@/core/types'
 import { useAgentflowContext, useApiContext, useConfigContext } from '@/infrastructure/store'
 
 import { NodeIcon } from '../components/NodeIcon'
-import { NodeInfoDialog } from '../components/NodeInfoDialog'
 import { NodeInputHandle } from '../components/NodeInputHandle'
 import { getMinimumNodeHeight, NodeOutputHandles } from '../components/NodeOutputHandles'
 import { NodeStatusIndicator } from '../components/NodeStatusIndicator'
 import { NodeToolbarActions } from '../components/NodeToolbarActions'
 import { useNodeColors } from '../hooks/useNodeColors'
 import { CardWrapper } from '../styled'
 
+import { NodeInfoDialog } from './NodeInfoDialog'
+
 export interface IterationNodeProps {
     data: NodeData
 }
@@ -162,14 +163,7 @@ function IterationNodeComponent({ data }: IterationNodeProps) {
                 </Box>
             </CardWrapper>
 
-            <NodeInfoDialog
-                open={showInfoDialog}
-                onClose={() => setShowInfoDialog(false)}
-                label={data.label}
-                name={data.name}
-                nodeId={data.id}
-                description={data.description}
-            />
+            <NodeInfoDialog open={showInfoDialog} onClose={() => setShowInfoDialog(false)} data={data} />
         </div>
     )
 }