diff --git a/ui/src/features/Editor/components/OverlayUI/components/Toolbox/index.tsx b/ui/src/features/Editor/components/OverlayUI/components/Toolbox/index.tsx index 120ae1b07..debc2c5ee 100644 --- a/ui/src/features/Editor/components/OverlayUI/components/Toolbox/index.tsx +++ b/ui/src/features/Editor/components/OverlayUI/components/Toolbox/index.tsx @@ -27,12 +27,13 @@ type CanvasAction = "undo" | "redo"; type Action = ToolboxItem; type Props = { - undoDisabled?: boolean; + canUndo: boolean; + canRedo: boolean; onRedo?: () => void; onUndo?: () => void; }; -const Toolbox: React.FC = ({ onRedo, onUndo }) => { +const Toolbox: React.FC = ({ canUndo, canRedo, onRedo, onUndo }) => { const t = useT(); const availableTools: Tool[] = [ @@ -134,6 +135,7 @@ const Toolbox: React.FC = ({ onRedo, onUndo }) => { tooltipPosition="right" tooltipText={action.name} icon={action.icon} + disabled={action.id === "undo" ? !canUndo : !canRedo} onClick={() => action.id === "redo" ? onRedo?.() diff --git a/ui/src/features/Editor/components/OverlayUI/index.tsx b/ui/src/features/Editor/components/OverlayUI/index.tsx index 21b3404da..f4db68539 100644 --- a/ui/src/features/Editor/components/OverlayUI/index.tsx +++ b/ui/src/features/Editor/components/OverlayUI/index.tsx @@ -19,6 +19,8 @@ type OverlayUIProps = { nodeType: ActionNodeType; }; nodes: Node[]; + canUndo: boolean; + canRedo: boolean; onWorkflowDeployment: ( deploymentId?: string, description?: string, @@ -34,6 +36,8 @@ const OverlayUI: React.FC = ({ hoveredDetails, nodePickerOpen, nodes, + canUndo, + canRedo, onWorkflowDeployment, onNodesChange, onNodePickerClose, @@ -49,7 +53,12 @@ const OverlayUI: React.FC = ({ {/* {devMode && } */} {canvas} - + { - if (undoManager?.undoStack && undoManager.undoStack.length > 0) { + const stackLength = undoManager?.undoStack?.length ?? 0; + if (stackLength > 0) { undoManager?.undo(); } }, [undoManager]); const handleWorkflowRedo = useCallback(() => { - if (undoManager?.redoStack && undoManager.redoStack.length > 0) { + const stackLength = undoManager?.redoStack?.length ?? 0; + if (stackLength > 0) { undoManager?.redo(); } }, [undoManager]); + const canUndo = useMemo(() => { + const stackLength = undoManager?.undoStack?.length ?? 0; + return stackLength > 0; + }, [undoManager?.undoStack?.length]); + + const canRedo = useMemo(() => { + const stackLength = undoManager?.redoStack?.length ?? 0; + return stackLength > 0; + }, [undoManager?.redoStack?.length]); const rawWorkflows = useY(yWorkflows); @@ -166,6 +177,8 @@ export default ({ handleEdgesUpdate, handleWorkflowUndo, handleWorkflowRedo, + canUndo, + canRedo, handleWorkflowRename, }; };