From b398e2b280aed327bddeea85316ba2b2a7eb3edb Mon Sep 17 00:00:00 2001
From: Jon Maxwell Diebold <max.diebold@erg.com>
Date: Tue, 26 Nov 2024 14:48:43 -0500
Subject: [PATCH] HMW-856 Addressed highlighting inconsistencies

---
 .../pages/Community.Tabs.Protect.tsx          | 20 ++++---------------
 .../src/components/shared/BoxContent.tsx      |  2 +-
 app/client/src/utils/hooks.ts                 |  4 ++--
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/app/client/src/components/pages/Community.Tabs.Protect.tsx b/app/client/src/components/pages/Community.Tabs.Protect.tsx
index 39b4ac4e4..71d2eccd2 100644
--- a/app/client/src/components/pages/Community.Tabs.Protect.tsx
+++ b/app/client/src/components/pages/Community.Tabs.Protect.tsx
@@ -10,6 +10,7 @@ import { ListContent } from 'components/shared/BoxContent';
 import { tabsStyles } from 'components/shared/ContentTabs';
 import LoadingSpinner from 'components/shared/LoadingSpinner';
 import { AccordionList, AccordionItem } from 'components/shared/Accordion';
+import { AccordionItem as AccordionItemHighlight } from 'components/shared/AccordionMapHighlight';
 import { errorBoxStyles, infoBoxStyles } from 'components/shared/MessageBoxes';
 import TabErrorBoundary from 'components/shared/ErrorBoundary.TabErrorBoundary';
 import Switch from 'components/shared/Switch';
@@ -390,20 +391,6 @@ function Protect() {
     updateVisibleLayers({ waterbodyLayer: !waterbodyLayerDisplayed });
   }
 
-  const [selectedFeature, setSelectedFeature] = useState(null);
-  useEffect(() => {
-    if (!mapView || !selectedFeature) return;
-
-    // set the highlight
-    // update context with the new selected graphic
-    selectedFeature.attributes['zoom'] = true;
-    selectedFeature.attributes['fieldName'] = protectedAreasIdKey;
-    setSelectedGraphic(selectedFeature);
-
-    // reset the selectedFeature
-    setSelectedFeature(null);
-  }, [mapView, selectedFeature, setSelectedGraphic]);
-
   // Initialize the visibility of several layers. This will be used
   // to reset their visibility when the user leaves this tab.
   const [initialAllWaterbodiesVisibility, setInitialAllWaterbodiesVisibility] =
@@ -1003,8 +990,9 @@ function Protect() {
                             const attributes = item.attributes;
                             const fields = protectedAreasData.fields;
                             return (
-                              <AccordionItem
+                              <AccordionItemHighlight
                                 key={`protected-area-${attributes.OBJECTID}`}
+                                idKey={protectedAreasIdKey}
                                 feature={item}
                                 title={
                                   <strong>
@@ -1064,7 +1052,7 @@ function Protect() {
                                     }}
                                   />
                                 </div>
-                              </AccordionItem>
+                              </AccordionItemHighlight>
                             );
                           })}
                         </AccordionList>
diff --git a/app/client/src/components/shared/BoxContent.tsx b/app/client/src/components/shared/BoxContent.tsx
index c5a411bc3..8eac8965c 100644
--- a/app/client/src/components/shared/BoxContent.tsx
+++ b/app/client/src/components/shared/BoxContent.tsx
@@ -12,7 +12,7 @@ import type { SerializedStyles } from '@emotion/react';
 ## Styles
 */
 const contentStyles = css`
-  background-color: inherit;
+  background-color: none;
 `;
 
 const flexRowStyles = css`
diff --git a/app/client/src/utils/hooks.ts b/app/client/src/utils/hooks.ts
index 133057cef..a5b5943ad 100644
--- a/app/client/src/utils/hooks.ts
+++ b/app/client/src/utils/hooks.ts
@@ -537,8 +537,8 @@ function useWaterbodyHighlight(findOthers: boolean = true) {
 
     // check if the graphic is the same as the currently highlighted graphic
     // remove the highlight if the graphic is different
-    let equal = graphicComparison(graphic, currentHighlight);
-    let selectionEqual = graphicComparison(selectedGraphic, currentSelection);
+    const equal = graphicComparison(graphic, currentHighlight);
+    const selectionEqual = graphicComparison(selectedGraphic, currentSelection);
     if (equal && selectionEqual) return;
 
     // set the currentSelection if it changed