From d784a5c8143db22e8482b88f1eec3f82fc3d5602 Mon Sep 17 00:00:00 2001
From: jpople <jeremy@ethyca.com>
Date: Thu, 14 Dec 2023 11:03:05 -0500
Subject: [PATCH] Fix Compass button states (#4508)

---
 CHANGELOG.md                                  |  3 +
 .../src/features/system/VendorSelector.tsx    | 64 ++++++++++++-------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0686ec3d4d..f952cce50d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,9 @@ The types of changes are:
 ### Added
 - Tooltip and styling for disabled rows in add multiple vendor view [#4498](https://github.com/ethyca/fides/pull/4498)
 
+### Fixed
+- Fixed incorrect Compass button behavior in system form [#4508](https://github.com/ethyca/fides/pull/4508)
+
 ## [2.26.0](https://github.com/ethyca/fides/compare/2.25.0...main)
 
 ### Added
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index 744d65f149..55a8724ec3 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -3,6 +3,10 @@ import {
   FormControl,
   HStack,
   IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   Spacer,
   Text,
   VStack,
@@ -35,20 +39,37 @@ const CompassButton = ({
   active: boolean;
   disabled: boolean;
   onRefreshSuggestions: () => void;
-}) => (
-  <VStack>
-    <Spacer minHeight="18px" />
-    <IconButton
-      size="sm"
-      isDisabled={disabled}
-      onClick={() => onRefreshSuggestions()}
-      aria-label="Update information from Compass"
-      bg={active ? "complimentary.500" : "gray.100"}
-      icon={<CompassIcon color={active ? "white" : "gray.700"} boxSize={4} />}
-      data-testid="refresh-suggestions-btn"
-    />
-  </VStack>
-);
+}) => {
+  const bgColor = { bg: active ? "complimentary.500" : "gray.100" };
+  return (
+    <VStack>
+      <Spacer minHeight="18px" />
+      <Menu>
+        <MenuButton
+          as={IconButton}
+          size="sm"
+          isDisabled={disabled}
+          icon={
+            <CompassIcon color={active ? "white" : "gray.700"} boxSize={4} />
+          }
+          aria-label="Update information from Compass"
+          data-testid="refresh-suggestions-btn"
+          _hover={{
+            _disabled: bgColor,
+          }}
+          {...bgColor}
+        />
+        <MenuList>
+          <MenuItem onClick={onRefreshSuggestions}>
+            <Text fontSize="xs" lineHeight={4}>
+              Reset to Compass defaults
+            </Text>
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </VStack>
+  );
+};
 
 interface Props {
   fieldsSeparated: boolean;
@@ -88,7 +109,7 @@ const VendorSelector = ({
   options,
   onVendorSelected,
 }: Props) => {
-  const isShowingSuggestions = useAppSelector(selectSuggestions);
+  const dictSuggestionsState = useAppSelector(selectSuggestions);
   const [initialField, meta, { setValue }] = useField({
     name: fieldsSeparated ? "vendor_id" : "name",
   });
@@ -109,6 +130,8 @@ const VendorSelector = ({
     opt.label.toLowerCase().startsWith(searchParam.toLowerCase())
   );
 
+  const hasVendorSuggestions = !!searchParam && suggestions.length > 0;
+
   const handleTabPressed = () => {
     if (suggestions.length > 0 && searchParam !== suggestions[0].label) {
       setSearchParam(suggestions[0].label);
@@ -208,10 +231,7 @@ const VendorSelector = ({
                   }),
                   menu: (provided) => ({
                     ...provided,
-                    visibility:
-                      searchParam && suggestions.length > 0
-                        ? "visible"
-                        : "hidden",
+                    visibility: hasVendorSuggestions ? "visible" : "hidden",
                   }),
                   dropdownIndicator: (provided) => ({
                     ...provided,
@@ -238,7 +258,7 @@ const VendorSelector = ({
                 }}
               >
                 <span style={{ color: "transparent" }}>{searchParam}</span>
-                {searchParam && suggestions.length > 0 ? (
+                {hasVendorSuggestions ? (
                   <span style={{ color: "#824EF2" }}>
                     {suggestions[0].label.substring(searchParam.length)}
                   </span>
@@ -253,8 +273,8 @@ const VendorSelector = ({
           </VStack>
         </FormControl>
         <CompassButton
-          active={!!values.vendor_id}
-          disabled={!values.vendor_id || isShowingSuggestions === "showing"}
+          active={!!values.vendor_id || hasVendorSuggestions}
+          disabled={!values.vendor_id || dictSuggestionsState === "showing"}
           onRefreshSuggestions={() => onVendorSelected(values.vendor_id)}
         />
       </HStack>