Implement Tree Editor with visual preview and documentation updates
Tree Editor Features: - Zustand store with immer middleware and zundo for undo/redo - Form-based node editing (Decision, Action, Solution types) - Visual tree preview with solution connection indicators - NodePicker with type-grouped dropdown (Decisions/Actions/Solutions) - SharedLinksMap for detecting nodes with multiple sources - Modal component with scrollable body, fixed header/footer New Components: - TreeEditorLayout, TreeMetadataForm, NodeList, NodeEditorModal - NodeFormDecision, NodeFormAction, NodeFormResolution - DynamicArrayField, NodePicker - TreePreviewPanel, TreePreviewNode Documentation: - Updated README.md status to Phase 2 - Added Tree Editor details to CURRENT-STATE.md - Added modal/Zustand lessons to LESSONS-LEARNED.md - Updated file structure in CLAUDE-SETUP.md - Added Tree Editor progress to PROGRESS.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
152
frontend/src/components/tree-editor/NodeFormAction.tsx
Normal file
152
frontend/src/components/tree-editor/NodeFormAction.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { DynamicArrayField } from './DynamicArrayField'
|
||||
import { NodePicker } from './NodePicker'
|
||||
import { useTreeEditorStore } from '@/store/treeEditorStore'
|
||||
import type { TreeStructure } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NodeFormActionProps {
|
||||
node: TreeStructure
|
||||
onUpdate: (updates: Partial<TreeStructure>) => void
|
||||
}
|
||||
|
||||
export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
|
||||
const { validationErrors } = useTreeEditorStore()
|
||||
|
||||
const titleError = validationErrors.find(
|
||||
e => e.nodeId === node.id && e.field === 'title'
|
||||
)
|
||||
|
||||
const nextNodeError = validationErrors.find(
|
||||
e => e.nodeId === node.id && e.field === 'next_node_id'
|
||||
)
|
||||
|
||||
const handleAddCommand = () => {
|
||||
onUpdate({
|
||||
commands: [...(node.commands || []), '']
|
||||
})
|
||||
}
|
||||
|
||||
const handleRemoveCommand = (index: number) => {
|
||||
const newCommands = [...(node.commands || [])]
|
||||
newCommands.splice(index, 1)
|
||||
onUpdate({ commands: newCommands })
|
||||
}
|
||||
|
||||
const handleUpdateCommand = (index: number, value: string) => {
|
||||
const newCommands = [...(node.commands || [])]
|
||||
newCommands[index] = value
|
||||
onUpdate({ commands: newCommands })
|
||||
}
|
||||
|
||||
const handleReorderCommands = (fromIndex: number, toIndex: number) => {
|
||||
const newCommands = [...(node.commands || [])]
|
||||
const [moved] = newCommands.splice(fromIndex, 1)
|
||||
newCommands.splice(toIndex, 0, moved)
|
||||
onUpdate({ commands: newCommands })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Title <span className="text-destructive">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={node.title || ''}
|
||||
onChange={(e) => onUpdate({ title: e.target.value })}
|
||||
placeholder="e.g., Restart the Service"
|
||||
className={cn(
|
||||
'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
|
||||
'bg-background text-foreground placeholder:text-muted-foreground',
|
||||
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
|
||||
titleError ? 'border-destructive' : 'border-input'
|
||||
)}
|
||||
/>
|
||||
{titleError && (
|
||||
<p className="mt-1 text-xs text-destructive">{titleError.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={node.description || ''}
|
||||
onChange={(e) => onUpdate({ description: e.target.value })}
|
||||
placeholder="Detailed instructions for this action..."
|
||||
rows={3}
|
||||
className={cn(
|
||||
'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
|
||||
'bg-background text-foreground placeholder:text-muted-foreground',
|
||||
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Commands */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Commands
|
||||
</label>
|
||||
<p className="mb-2 text-xs text-muted-foreground">
|
||||
PowerShell or CLI commands to execute
|
||||
</p>
|
||||
<DynamicArrayField
|
||||
items={node.commands || []}
|
||||
onAdd={handleAddCommand}
|
||||
onRemove={handleRemoveCommand}
|
||||
onReorder={handleReorderCommands}
|
||||
addLabel="Add Command"
|
||||
renderItem={(command, index) => (
|
||||
<input
|
||||
type="text"
|
||||
value={command}
|
||||
onChange={(e) => handleUpdateCommand(index, e.target.value)}
|
||||
placeholder="e.g., Get-Service BrokerAgent"
|
||||
className={cn(
|
||||
'block w-full rounded-md border border-input px-3 py-2 font-mono text-sm',
|
||||
'bg-background text-foreground placeholder:text-muted-foreground',
|
||||
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Expected Outcome
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={node.expected_outcome || ''}
|
||||
onChange={(e) => onUpdate({ expected_outcome: e.target.value })}
|
||||
placeholder="e.g., Service should show as Running"
|
||||
className={cn(
|
||||
'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
|
||||
'bg-background text-foreground placeholder:text-muted-foreground',
|
||||
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Next Node */}
|
||||
<NodePicker
|
||||
value={node.next_node_id || ''}
|
||||
onChange={(nodeId) => onUpdate({ next_node_id: nodeId })}
|
||||
parentNodeId={node.id}
|
||||
excludeNodeId={node.id}
|
||||
label="Next Node (after action)"
|
||||
placeholder="Select or create next node..."
|
||||
error={nextNodeError?.message}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NodeFormAction
|
||||
Reference in New Issue
Block a user