From bedd616d92325b1ffc8ea97c9c82020f991aa0e4 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Thu, 31 Jul 2025 14:01:08 -0700
Subject: [PATCH] Add new add widget behavior. Edit mode is enabled upon 'Add
 Widget' and user must either Save/Cancel their changes before navigating away
 from My Dashboard

---
 .../layout/Canvas/views/DashboardCanvas.jsx   | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 0e11076..a6b7d0c 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -14,42 +14,53 @@ import DeleteAllButton from "../components/DeleteAllButton";
 export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
   const [newCounter, setNewCounter] = useState(3);
 
+  // Adding a widget triggers Edit mode
   const onAddWidget = () => {
     const newId = newCounter.toString();
+    
     setLayout(prev => [
-    ...prev,
+      ...prev,
     {
       i: newId,
       x: (prev.length * 3) % 12,
       y: Infinity, 
       w: 3, 
       h: 3,
+      static: false,
     }
     ]);
     setNewCounter(prev => prev + 1);
+    onEditWidgets();
   };
 
-  useEffect(() => {
-    console.log("static change effect");
-    setLayout(prevLayout => 
-      prevLayout.map(item => ({
-        ...item,
-        static: !isEditable  // static false means resizable/editable
-      }))
-    );
-  }, [isEditable]);
-
   const onEditWidgets = () => {
     console.log("widgets are now editable");
     setOriginalLayout(layout); // Backup layout before editing
+    
+    // Set all widgets to editable, static: false
+    setLayout(prevLayout =>
+      prevLayout.map(item => ({
+        ...item, 
+        static: false
+      }))
+    );
     setIsEditable(true); // Enable edit mode
   }
 
   const onSave = () => {
     console.log("saving widgets...");
+
+    // Set all widgets back to static: true
+    setLayout(prevLayout => 
+      prevLayout.map(item => ({
+        ...item,
+        static: true
+    }))
+  );
+
     setIsEditable(false);
     setIsDelete(false);
-    setOriginalLayout([]) // Clear backup layout
+    setOriginalLayout([]); // Clear backup layout
   }
 
   const onDeleteWidgets = () => {