From c411a0e16e47353ff81af0ad1ba2dab233822678 Mon Sep 17 00:00:00 2001
From: Evangeline Ireland <eireland@concord.org>
Date: Thu, 11 Jul 2024 08:21:59 -0700
Subject: [PATCH] Adds notifications for when graph camera menu items are
 clicked (#1339)

---
 .../graph/components/camera-menu-list.tsx     | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/v3/src/components/graph/components/camera-menu-list.tsx b/v3/src/components/graph/components/camera-menu-list.tsx
index c5f8535051..639154bed1 100644
--- a/v3/src/components/graph/components/camera-menu-list.tsx
+++ b/v3/src/components/graph/components/camera-menu-list.tsx
@@ -1,25 +1,51 @@
 import React, { useState } from "react"
-import { MenuItem, MenuList } from "@chakra-ui/react"
+import { MenuItem, MenuList, useToast } from "@chakra-ui/react"
 import { t } from "../../../utilities/translation/translate"
 
 export const CameraMenuList = () => {
   const [hasBackgroundImage, setHasBackgroundImage] = useState(false)
   const [imageLocked, setImageLocked] = useState(false)
+  const toast = useToast()
+  const handleMenuItemClick = (menuItem: string) => {
+    toast({
+      title: 'Menu item clicked',
+      description: `You clicked on ${menuItem}`,
+      status: 'success',
+      duration: 5000,
+      isClosable: true,
+    })
+  }
 
   const handleAddBackgroundImage = () => {
     setHasBackgroundImage(true)
+    handleMenuItemClick("Add Background Image clicked")
   }
 
   const handleRemoveBackgroundImage = () => {
     setHasBackgroundImage(false)
+    handleMenuItemClick("Remove Background Image clicked")
   }
 
   const handleUnlockImage = () => {
     setImageLocked(false)
+    handleMenuItemClick("Unlock Image clicked")
   }
 
   const handleLockImage = () => {
     setImageLocked(true)
+    handleMenuItemClick("Lock Image clicked")
+  }
+
+  const handleCopyImage = () => {
+    handleMenuItemClick("Copy Image clicked")
+  }
+
+  const handleExportPNG = () => {
+    handleMenuItemClick("Export PNG Image clicked")
+  }
+
+  const handleExportSVG = () => {
+    handleMenuItemClick("Export SVG Image clicked")
   }
 
   return (
@@ -42,9 +68,15 @@ export const CameraMenuList = () => {
             {t("DG.DataDisplayMenu.addBackgroundImage")}
           </MenuItem>
       }
-      <MenuItem data-testid="open-in-draw-tool">{t("DG.DataDisplayMenu.copyAsImage")}</MenuItem>
-      <MenuItem data-testid="export-png-image">{t("DG.DataDisplayMenu.exportPngImage")}</MenuItem>
-      <MenuItem data-testid="export-svg-image">{t("DG.DataDisplayMenu.exportSvgImage")}</MenuItem>
+      <MenuItem data-testid="open-in-draw-tool" onClick={handleCopyImage}>
+        {t("DG.DataDisplayMenu.copyAsImage")}
+      </MenuItem>
+      <MenuItem data-testid="export-png-image" onClick={handleExportPNG}>
+        {t("DG.DataDisplayMenu.exportPngImage")}
+      </MenuItem>
+      <MenuItem data-testid="export-svg-image" onClick={handleExportSVG}>
+        {t("DG.DataDisplayMenu.exportSvgImage")}
+      </MenuItem>
     </MenuList>
   )
 }