Add tab navigation prevention while in Editable mode

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

@@ -16,7 +16,7 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
 
     return (
         <Box height="100%" width="100%">
-            {/* {view === "widget" &&  */}
+            {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
                     view={ view }

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

@@ -86,8 +86,20 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       // defaultValue="widget"
       value={ view }
       // onValueChange={ setView }
-      onValueChange={(e) => setView(e.value)}  
       // onValueChange={(value) => setView(value)}
+      // onValueChange={(e) => setView(e.value)}  
+      onValueChange={(e) => {
+        const nextView = e.value;
+
+        if (view === "widget" && isEditable && nextView !== "widget") {
+          const confirmed = window.confirm(
+            "You have unsaved changes. Do you wish to discard them and continue?"
+          );
+          if (!confirmed) return;
+          onCancel();
+        }
+        setView(nextView);
+      }}
     >
       <Flex 
         as="header"