Render 'Reclassify' button in overflow menu when applicable (#5655)

ethyca · Jan 13, 2025 · 7ea4ad5 · 7ea4ad5
1 parent 73188c5
commit 7ea4ad5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 
 ### Changed
 - Updated brand link url [#5656](https://github.com/ethyca/fides/pull/5656)
+- Changed "Reclassify" D&D button to show in an overflow menu when row actions are overcrowded [#5655](https://github.com/ethyca/fides/pull/5655)
 
 ### Fixed
 - Fixed issue where the custom report "reset" button was not working as expected [#5649](https://github.com/ethyca/fides/pull/5649)

diff --git a/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts b/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts
@@ -327,7 +327,8 @@ describe("discovery and detection", () => {
         cy.getByTestId(
           "row-my_bigquery_monitor.prj-bigquery-418515.test_dataset_1",
         ).within(() => {
-          cy.getByTestId("action-Reclassify").click();
+          cy.getByTestId("actions-overflow-btn").click();
+          cy.getByTestId("action-reclassify").click({ force: true });
           cy.wait("@confirmResource");
         });
       });

diff --git a/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx b/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx
@@ -74,7 +74,9 @@ const useDiscoveryResultColumns = ({
             <DefaultCell value="--" />
           ),
         header: "Actions",
-        size: 180,
+        meta: {
+          width: "auto",
+        },
       }),
     ];
     return { columns };
@@ -137,6 +139,9 @@ const useDiscoveryResultColumns = ({
           <DiscoveryItemActionsCell resource={props.row.original} />
         ),
         header: "Actions",
+        meta: {
+          width: "auto",
+        },
       }),
     ];
     return { columns };
@@ -194,6 +199,9 @@ const useDiscoveryResultColumns = ({
           <DiscoveryItemActionsCell resource={props.row.original} />
         ),
         header: "Actions",
+        meta: {
+          width: "auto",
+        },
       }),
     ];
     return { columns };

diff --git a/...in-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx b/...in-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx
@@ -1,4 +1,16 @@
-import { CheckIcon, HStack, RepeatIcon, ViewOffIcon } from "fidesui";
+import {
+  AntButton as Button,
+  CheckIcon,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MoreIcon,
+  RepeatIcon,
+  Spacer,
+  ViewOffIcon,
+} from "fidesui";
 
 import { useAlert } from "~/features/common/hooks";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
@@ -54,21 +66,50 @@ const DiscoveryItemActionsCell = ({ resource }: DiscoveryItemActionsProps) => {
   const showMuteAction =
     itemHasClassificationChanges || childItemsHaveClassificationChanges;
 
+  // if promote and mute are both shown, show "Reclassify" in an overflow menu
+  // to avoid having too many buttons in the cell
+  const showReclassifyInOverflow = showPromoteAction && showMuteAction;
+
+  const handlePromote = async () => {
+    await promoteResourceMutation({
+      staged_resource_urn: resource.urn,
+    });
+    successAlert(
+      `These changes have been added to a Fides dataset. To view, navigate to "Manage datasets".`,
+      `Table changes confirmed`,
+    );
+  };
+
+  const handleMute = async () => {
+    await muteResourceMutation({
+      staged_resource_urn: resource.urn,
+    });
+    successAlert(
+      `Ignored changes will not be added to a Fides dataset.`,
+      `${resource.name || "Changes"} ignored`,
+    );
+  };
+
+  const handleReclassify = async () => {
+    await confirmResourceMutation({
+      staged_resource_urn: resource.urn,
+      monitor_config_id: resource.monitor_config_id!,
+      start_classification: true,
+      classify_monitored_resources: true,
+    });
+    successAlert(
+      `Reclassification of ${getResourceName(resource) || "the resource"} has begun.  The results may take some time to appear in the “Data discovery“ tab.`,
+      `Reclassification started`,
+    );
+  };
+
   return (
-    <HStack onClick={(e) => e.stopPropagation()}>
+    <HStack onClick={(e) => e.stopPropagation()} gap={2}>
       {showPromoteAction && (
         <ActionButton
           title="Confirm"
           icon={<CheckIcon />}
-          onClick={async () => {
-            await promoteResourceMutation({
-              staged_resource_urn: resource.urn,
-            });
-            successAlert(
-              `These changes have been added to a Fides dataset. To view, navigate to "Manage datasets".`,
-              `Table changes confirmed`,
-            );
-          }}
+          onClick={handlePromote}
           disabled={anyActionIsLoading}
           loading={promoteIsLoading}
         />
@@ -77,37 +118,44 @@ const DiscoveryItemActionsCell = ({ resource }: DiscoveryItemActionsProps) => {
         <ActionButton
           title="Ignore"
           icon={<ViewOffIcon />}
-          onClick={async () => {
-            await muteResourceMutation({
-              staged_resource_urn: resource.urn,
-            });
-            successAlert(
-              `Ignored changes will not be added to a Fides dataset.`,
-              `${resource.name || "Changes"} ignored`,
-            );
-          }}
+          onClick={handleMute}
           disabled={anyActionIsLoading}
           loading={muteIsLoading}
         />
       )}
-      <ActionButton
-        title="Reclassify"
-        icon={<RepeatIcon />}
-        onClick={async () => {
-          await confirmResourceMutation({
-            staged_resource_urn: resource.urn,
-            monitor_config_id: resource.monitor_config_id!,
-            start_classification: true,
-            classify_monitored_resources: true,
-          });
-          successAlert(
-            `Reclassification of ${getResourceName(resource) || "the resource"} has begun.  The results may take some time to appear in the “Data discovery“ tab.`,
-            `Reclassification started`,
-          );
-        }}
-        disabled={anyActionIsLoading}
-        loading={confirmIsLoading}
-      />
+      {!showReclassifyInOverflow && (
+        <ActionButton
+          title="Reclassify"
+          icon={<RepeatIcon />}
+          onClick={handleReclassify}
+          disabled={anyActionIsLoading}
+          loading={confirmIsLoading}
+        />
+      )}
+      <Spacer />
+      {showReclassifyInOverflow && (
+        <Menu>
+          <MenuButton
+            as={Button}
+            size="small"
+            // TS expects Chakra's type prop (HTML type) but we want to assign the Ant type
+            // @ts-ignore
+            type="text"
+            icon={<MoreIcon transform="rotate(90deg)" />}
+            className="w-6 gap-0"
+            data-testid="actions-overflow-btn"
+          />
+          <MenuList>
+            <MenuItem
+              onClick={handleReclassify}
+              icon={<RepeatIcon />}
+              data-testid="action-reclassify"
+            >
+              Reclassify
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      )}
     </HStack>
   );
 };