From a06a79218c15b314180f34324ecd06d4217feae2 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Tue, 29 Jul 2025 11:51:33 -0700
Subject: [PATCH] Add tab navigation prevention while in Editable mode

---
 client/src/components/layout/Canvas/Canvas.jsx     |  2 +-
 .../layout/Canvas/views/DashboardCanvas.jsx        | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index 9280c4b..d94300e 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/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 }
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 1b5a3a0..70386aa 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/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"