From f5b694508e5830e62ef689a4c3d5446af1a413c0 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Thu, 31 Jul 2025 09:50:40 -0700
Subject: [PATCH] added delete all widgets button

---
 .../Canvas/components/DeleteAllButton.jsx     |  9 +++++++
 .../layout/Canvas/views/DashboardCanvas.jsx   | 26 +++++++++++++++----
 client/src/components/layout/Dashboard.jsx    | 11 --------
 3 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/layout/Canvas/components/DeleteAllButton.jsx

diff --git a/client/src/components/layout/Canvas/components/DeleteAllButton.jsx b/client/src/components/layout/Canvas/components/DeleteAllButton.jsx
new file mode 100644
index 0000000..016d49a
--- /dev/null
+++ b/client/src/components/layout/Canvas/components/DeleteAllButton.jsx
@@ -0,0 +1,9 @@
+import { Button } from "@chakra-ui/react";
+
+export default function DeleteAllButton ({onDeleteAll}) {
+  return (
+    <Button onClick={onDeleteAll} color="#FFFFFF" bg="#EF4444" _hover={{ bg: "bg.error", color: "#EF4444"}}>
+      Delete All
+    </Button>
+  )
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index fedcbdc..476b6da 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -1,4 +1,5 @@
-import { HStack, Flex, Tabs, Button, Box } from "@chakra-ui/react";
+import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import { useState, useEffect } from "react";
 import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
 import { SearchBar } from "../components/SearchBar";
 import { SettingsButton } from "../components/SettingsButton";
@@ -6,9 +7,9 @@ import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
 import { Gas } from "./DashboardCanvasNav/Gas";
 import { Seismic } from "./DashboardCanvasNav/Seismic";
 import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
-import { useState, useEffect, useDebugValue } from "react";
 import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
+import DeleteAllButton from "../components/DeleteAllButton";
 
 export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
@@ -79,6 +80,17 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
     setLayout(layout => layout.filter(w => w.i !== id));
   }
 
+  const DeleteAll = () => {
+    const confirm = window.confirm(
+      "Are you sure you want to delete all widgets?"
+    );
+    if (confirm) {
+      setLayout([]);
+      onSave();
+    }
+    else return;
+  }
+
   return (
     /* HEADER */
     <Tabs.Root 
@@ -129,10 +141,14 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
         </Tabs.List>
 
         <HStack >
-          {isEditable || isDelete ? (
+          {isEditable ? (
             <>
-              <SaveButton onSave={onSave} />
-              <CancelButton onCancel={onCancel} />
+              <SaveButton onSave={ onSave } />
+              <CancelButton onCancel={ onCancel } />
+              {isDelete ? (
+                <DeleteAllButton onDeleteAll={ DeleteAll } />
+              ):(null)
+              }
             </>
           ):(
             <>
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
index 245c335..ce1ff90 100644
--- a/client/src/components/layout/Dashboard.jsx
+++ b/client/src/components/layout/Dashboard.jsx
@@ -20,17 +20,6 @@ export default function Dashboard() {
 
   return (
     <>
-    {/* <Global styles={css`
-      .leaflet-tile,
-      .leaflet-control-zoom-in,
-      .leaflet-control-zoom-out,
-      .leaflet-control-attribution {
-        filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
-      }
-
-      .leaflet-container {
-        background-color: #1e1e1e;
-       */}
       <Grid css={styles}
         templateRows="1fr 11fr"
         templateColumns="1fr 20fr"