Revert "feat(agentflow): update flow date change & save handlings and enhance examples"

This reverts commit 021cd20.

Author: jocelynlin-wd

packages/agentflow/TESTS.md

@@ -36,7 +36,7 @@ These modules carry the highest risk. Test in the same PR when modifying.
 | `src/infrastructure/api/nodes.ts` | `getAllNodes`, `getNodeByName`, `getNodeIconUrl` | ✅ Done |
 | `src/infrastructure/store/AgentflowContext.tsx` | `agentflowReducer` (all actions), `normalizeNodes`. Remaining: `deleteNode()`, `duplicateNode()`, `updateNodeData()`, `getFlowData()` | 🟡 Partial |
 | `src/useAgentflow.ts` | `getFlow()`, `toJSON()`, `validate()`, `addNode()`, `clear()` | ⬜ Not yet — thin wrapper |
-| `src/features/canvas/hooks/useFlowHandlers.ts` | `handleConnect`, `handleNodesChange`, `handleEdgesChange`, `handleAddNode` — synchronous `onFlowChange` callbacks, dirty tracking, viewport resolution, change filtering | ✅ Done |
+| `src/features/canvas/hooks/useFlowHandlers.ts` | `onConnect`, `onNodesChange`, `onEdgesChange`, `onAddNode` | ⬜ Not yet — coupled to ReactFlow |
 
 ### Tier 2 — Feature Hooks & Dialogs
 
@@ -70,7 +70,7 @@ Mostly JSX with minimal logic. Only add tests if business logic is introduced.
 | `src/atoms/NodeInputHandler.tsx` | If input rendering or position calculation logic changes | ⬜ Not yet |
 | `src/features/canvas/components/ConnectionLine.tsx` | If edge label determination logic becomes more complex | ⬜ Not yet |
 | `src/features/canvas/components/NodeStatusIndicator.tsx` | If status-to-color/icon mapping expands | ⬜ Not yet |
-| `src/Agentflow.tsx` | Integration test — dark mode, ThemeProvider, CSS variables, header rendering, keyboard shortcuts (Cmd+S / Ctrl+S save), generate flow dialog, imperative ref | ✅ Done |
+| `src/Agentflow.tsx` | Integration test — dark mode, ThemeProvider, CSS variables, header rendering, generate flow dialog, imperative ref | ✅ Done |
 
 Files that are pure styling or data constants (`styled.ts`, `nodeIcons.ts`, `MainCard.tsx`, `Input.tsx`, etc.) do not need dedicated tests.
 
@@ -127,7 +127,6 @@ Key features:
 -   **Coverage thresholds**: uniform 80% floor (`branches`, `functions`, `lines`, `statements`) enforced per-path:
     -   `./src/Agentflow.tsx`
     -   `./src/core/`
-    -   `./src/features/canvas/hooks/useFlowHandlers.ts`
     -   `./src/features/node-palette/search.ts`
     -   `./src/infrastructure/api/`
 -   **Coverage exclusions**:

packages/agentflow/examples/src/App.tsx

@@ -100,7 +100,7 @@ function LoadingFallback() {
 
 export default function App() {
     const [selectedExample, setSelectedExample] = useState<ExampleId>('basic')
-    const [showProps, setShowProps] = useState(false)
+    const [showProps, setShowProps] = useState(true)
     // Config loaded from environment variables
 
     const currentExample = examples.find((e) => e.id === selectedExample)

packages/agentflow/examples/src/FlowStatePanel.tsx

@@ -1,17 +1,15 @@
 /**
  * Basic Example
  *
- * Demonstrates basic @flowiseai/agentflow usage with imperative methods,
- * onFlowChange tracking, and save flow functionality.
+ * Demonstrates basic @flowiseai/agentflow usage with imperative methods.
  */
 
-import { useCallback, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 import type { AgentFlowInstance, FlowData, ValidationResult } from '@flowiseai/agentflow'
 import { Agentflow } from '@flowiseai/agentflow'
 
 import { apiBaseUrl, token } from '../config'
-import { FlowStatePanel } from '../FlowStatePanel'
 
 // Example flow data
 const initialFlow: FlowData = {
@@ -35,22 +33,18 @@ const initialFlow: FlowData = {
 }
 
 export function BasicExample() {
+    // Config loaded from environment variables
     const agentflowRef = useRef<AgentFlowInstance>(null)
     const [validationResult, setValidationResult] = useState<ValidationResult | null>(null)
-    const [currentFlow, setCurrentFlow] = useState<FlowData | null>(null)
-    const [savedFlow, setSavedFlow] = useState<FlowData | null>(null)
-    const [changeCount, setChangeCount] = useState(0)
 
-    const handleFlowChange = useCallback((flow: FlowData) => {
-        setCurrentFlow(flow)
-        setChangeCount((c) => c + 1)
-        console.log('onFlowChange:', flow)
-    }, [])
+    const handleFlowChange = (flow: FlowData) => {
+        console.log('Flow changed:', flow)
+    }
 
-    const handleSave = useCallback((flow: FlowData) => {
-        setSavedFlow(flow)
-        console.log('onSave:', flow)
-    }, [])
+    const handleSave = (flow: FlowData) => {
+        console.log('Flow saved:', flow)
+        alert('Flow saved! Check console for data.')
+    }
 
     const handleValidate = () => {
         if (agentflowRef.current) {
@@ -104,20 +98,17 @@ export function BasicExample() {
                 )}
             </div>
 
-            {/* Canvas + Flow State Panel */}
-            <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
-                <div style={{ flex: 1 }}>
-                    <Agentflow
-                        ref={agentflowRef}
-                        apiBaseUrl={apiBaseUrl}
-                        token={token ?? undefined}
-                        initialFlow={initialFlow}
-                        onFlowChange={handleFlowChange}
-                        onSave={handleSave}
-                        showDefaultHeader={true}
-                    />
-                </div>
-                <FlowStatePanel currentFlow={currentFlow} savedFlow={savedFlow} changeCount={changeCount} />
+            {/* Canvas */}
+            <div style={{ flex: 1 }}>
+                <Agentflow
+                    ref={agentflowRef}
+                    apiBaseUrl={apiBaseUrl}
+                    token={token ?? undefined}
+                    initialFlow={initialFlow}
+                    onFlowChange={handleFlowChange}
+                    onSave={handleSave}
+                    showDefaultHeader={true}
+                />
             </div>
         </div>
     )

packages/agentflow/examples/src/demos/BasicExample.tsx

@@ -260,11 +260,11 @@ export function CustomUIExample() {
                     apiBaseUrl={apiBaseUrl}
                     token={token ?? undefined}
                     initialFlow={initialFlow}
-                    renderHeader={(props: HeaderRenderProps) => <CustomHeader {...props} />}
-                    renderNodePalette={(props: PaletteRenderProps) => <CustomPalette {...props} />}
+                    renderHeader={(props) => <CustomHeader {...props} />}
+                    renderNodePalette={(props) => <CustomPalette {...props} />}
                     showDefaultHeader={false}
                     showDefaultPalette={false}
-                    onSave={(flow: FlowData) => {
+                    onSave={(flow) => {
                         console.log('Saving flow:', flow)
                         alert('Flow saved! Check console.')
                     }}

packages/agentflow/examples/src/demos/CustomUIExample.tsx

@@ -38,7 +38,6 @@ module.exports = {
     coverageThreshold: {
         './src/Agentflow.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/core/': { branches: 80, functions: 80, lines: 80, statements: 80 },
-        './src/features/canvas/hooks/useFlowHandlers.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/node-palette/search.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/infrastructure/api/': { branches: 80, functions: 80, lines: 80, statements: 80 }
     },

packages/agentflow/jest.config.js

@@ -305,65 +305,6 @@ describe('Agentflow Component', () => {
         })
     })
 
-    describe('Keyboard Shortcuts', () => {
-        it('should trigger save on Cmd+S', async () => {
-            const onSave = jest.fn()
-            const { container } = render(<Agentflow {...defaultProps} onSave={onSave} />)
-
-            await waitFor(() => {
-                expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
-            })
-
-            fireEvent.keyDown(document, { key: 's', metaKey: true })
-
-            expect(onSave).toHaveBeenCalledTimes(1)
-            expect(onSave).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    nodes: expect.any(Array),
-                    edges: expect.any(Array)
-                })
-            )
-        })
-
-        it('should trigger save on Ctrl+S', async () => {
-            const onSave = jest.fn()
-            const { container } = render(<Agentflow {...defaultProps} onSave={onSave} />)
-
-            await waitFor(() => {
-                expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
-            })
-
-            fireEvent.keyDown(document, { key: 's', ctrlKey: true })
-
-            expect(onSave).toHaveBeenCalledTimes(1)
-        })
-
-        it('should not trigger save on plain S key', async () => {
-            const onSave = jest.fn()
-            const { container } = render(<Agentflow {...defaultProps} onSave={onSave} />)
-
-            await waitFor(() => {
-                expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
-            })
-
-            fireEvent.keyDown(document, { key: 's' })
-
-            expect(onSave).not.toHaveBeenCalled()
-        })
-
-        it('should not error on Cmd+S when no onSave callback is provided', async () => {
-            const { container } = render(<Agentflow {...defaultProps} />)
-
-            await waitFor(() => {
-                expect(container.querySelector('.agentflow-container')).toBeInTheDocument()
-            })
-
-            expect(() => {
-                fireEvent.keyDown(document, { key: 's', metaKey: true })
-            }).not.toThrow()
-        })
-    })
-
     describe('Generate Flow', () => {
         it('should open generate dialog when button is clicked', async () => {
             const { container, getByTestId } = render(<Agentflow {...defaultProps} />)