Add Editable state to canvas along with Save and Cancel buttons while in Editable mode. Save - saves the new state after editing. Cancel - reverts to the widget state before Edit mode

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -1,4 +1,4 @@
-import { HStack, Flex, Tabs, Box } from "@chakra-ui/react";
+import { HStack, Flex, Tabs, Button, Box } from "@chakra-ui/react";
 import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
 import { SearchBar } from "../components/SearchBar";
 import { SettingsButton } from "../components/SettingsButton";
@@ -16,6 +16,7 @@ export function DashboardCanvas() {
     { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
     { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
   ]);
+  const [originalLayout, setOriginalLayout] = useState([]);
 
   useEffect(() => {
     setLayout(prevLayout => 
@@ -35,15 +36,32 @@ export function DashboardCanvas() {
       x: (prev.length * 3) % 12,
       y: Infinity, 
       w: 3, 
-      h: 3
+      h: 3,
     }
     ]);
     setNewCounter(prev => prev + 1);
   };
 
   const onEditWidgets = () => {
-    console.log("widgets are now editable")
-    setIsEditable(true);
+    console.log("widgets are now editable");
+    setOriginalLayout(layout); // Backup layout before editing
+    setIsEditable(true); // Enable edit mode
+  }
+
+  const onSave = () => {
+    setOriginalLayout([]) // Clear backup layout
+    setIsEditable(false);
+  }
+
+  const onCancel = () => {
+    if (originalLayout.length) { 
+      setLayout(originalLayout.map(item => ({
+        ...item, 
+        static: true
+      })));
+    };
+    setOriginalLayout([]); 
+    setIsEditable(false);
   }
 
   const onDeleteWidgets = (id) => {
@@ -87,13 +105,30 @@ export function DashboardCanvas() {
           </Tabs.Trigger>
         </Tabs.List>
 
-        <HStack >
+        {/* <HStack >
           <SearchBar />
           <SettingsButton visible={isEditable}
             onAddWidget={ onAddWidget }
             onEditWidgets={ onEditWidgets }
             onDeleteWidgets={ onDeleteWidgets }
           />
+        </HStack> */}
+        <HStack >
+          {isEditable ? (
+            <>
+              <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+              <Button onClick={onCancel} borderRadius="md">Cancel</Button>
+            </>
+          ):(
+            <>
+              <SearchBar />
+              <SettingsButton
+                onAddWidget={ onAddWidget }
+                onEditWidgets={ onEditWidgets }
+                onDeleteWidgets={ onDeleteWidgets }
+              />
+            </>
+          )}
         </HStack>
       </Flex>
 

client/src/components/layout/Canvas/views/VolcanoCanvas.jsx

@@ -14,8 +14,6 @@ export default function VolcanoCanvas() {
                 display="flex"
                 alignItems="center"
                 justifyContent="center"
-
-            
             >
                 <Text fontsize="2xl" fontWeight="bold" color="gray.700">
                     Volcano Canvas coming soon!