diff --git a/CHANGELOG.md b/CHANGELOG.md index 074f760587..76114c602c 100644 --- 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 index 08931756b8..b6831c64dd 100644 --- 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/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx index 6944f66bcd..c37b67bc72 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx @@ -74,7 +74,9 @@ const useDiscoveryResultColumns = ({ ), header: "Actions", - size: 180, + meta: { + width: "auto", + }, }), ]; return { columns }; @@ -137,6 +139,9 @@ const useDiscoveryResultColumns = ({ ), header: "Actions", + meta: { + width: "auto", + }, }), ]; return { columns }; @@ -194,6 +199,9 @@ const useDiscoveryResultColumns = ({ ), header: "Actions", + meta: { + width: "auto", + }, }), ]; return { columns }; diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx index af87194d63..7d66da1103 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/tables/cells/DiscoveryItemActionsCell.tsx +++ b/clients/admin-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 ( - e.stopPropagation()}> + e.stopPropagation()} gap={2}> {showPromoteAction && ( } - 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) => { } - 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} /> )} - } - 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 && ( + } + onClick={handleReclassify} + disabled={anyActionIsLoading} + loading={confirmIsLoading} + /> + )} + + {showReclassifyInOverflow && ( + + } + className="w-6 gap-0" + data-testid="actions-overflow-btn" + /> + + } + data-testid="action-reclassify" + > + Reclassify + + + + )} ); };