fix(ui): Disable Redo & Undo if no actions available (#679)

* fix(ui): Disable Redo & Undo if no actions available * feedback(ui): updated conditionals for handleWorkFlow Redo and Undo
reearth · Dec 6, 2024 · 3991f4e · 3991f4e
1 parent d0d6387
commit 3991f4e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git 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<CanvasAction>;
 
 type Props = {
-  undoDisabled?: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
   onRedo?: () => void;
   onUndo?: () => void;
 };
 
-const Toolbox: React.FC<Props> = ({ onRedo, onUndo }) => {
+const Toolbox: React.FC<Props> = ({ canUndo, canRedo, onRedo, onUndo }) => {
   const t = useT();
 
   const availableTools: Tool[] = [
@@ -134,6 +135,7 @@ const Toolbox: React.FC<Props> = ({ 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
@@ -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<OverlayUIProps> = ({
   hoveredDetails,
   nodePickerOpen,
   nodes,
+  canUndo,
+  canRedo,
   onWorkflowDeployment,
   onNodesChange,
   onNodePickerClose,
@@ -49,7 +53,12 @@ const OverlayUI: React.FC<OverlayUIProps> = ({
         {/* {devMode && <DevTools />} */}
         {canvas}
         <Breadcrumb />
-        <Toolbox onRedo={onWorkflowRedo} onUndo={onWorkflowUndo} />
+        <Toolbox
+          canUndo={canUndo}
+          canRedo={canRedo}
+          onRedo={onWorkflowRedo}
+          onUndo={onWorkflowUndo}
+        />
         <ActionBar
           allowedToDeploy={allowedToDeploy}
           onWorkflowDeployment={onWorkflowDeployment}

diff --git a/ui/src/features/Editor/hooks.ts b/ui/src/features/Editor/hooks.ts
@@ -45,6 +45,8 @@ export default ({
     handleWorkflowUndo,
     handleWorkflowRedo,
     handleWorkflowRename,
+    canUndo,
+    canRedo,
   } = useYjsStore({
     workflowId: currentWorkflowId,
     yWorkflows,
@@ -196,5 +198,7 @@ export default ({
     handleWorkflowRedo,
     handleWorkflowUndo,
     handleWorkflowRename,
+    canUndo,
+    canRedo,
   };
 };
diff --git a/ui/src/features/Editor/index.tsx b/ui/src/features/Editor/index.tsx
@@ -32,6 +32,8 @@ export default function Editor({
     hoveredDetails,
     nodePickerOpen,
     openPanel,
+    canUndo,
+    canRedo,
     handleWorkflowAdd,
     handleWorkflowDeployment,
     handlePanelOpen,
@@ -63,6 +65,8 @@ export default function Editor({
             hoveredDetails={hoveredDetails}
             nodePickerOpen={nodePickerOpen}
             nodes={nodes}
+            canUndo={canUndo}
+            canRedo={canRedo}
             onWorkflowDeployment={handleWorkflowDeployment}
             onWorkflowUndo={handleWorkflowUndo}
             onWorkflowRedo={handleWorkflowRedo}

diff --git a/ui/src/lib/yjs/useYjsStore.ts b/ui/src/lib/yjs/useYjsStore.ts
@@ -37,16 +37,27 @@ export default ({
   const { createDeployment, useUpdateDeployment } = useDeployment();
 
   const handleWorkflowUndo = useCallback(() => {
-    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,
   };
 };