Action center: Categories of consent cell (#5737)

Author: jpople

CHANGELOG.md

@@ -21,6 +21,9 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.54.0...main)
 
+### Added
+- Added a read-only consent category cell to Action Center aggregate system results table [#5737](https://github.com/ethyca/fides/pull/5737)
+
 ### Changed
 - Added frequency field to DataHubSchema integration config [#5716](https://github.com/ethyca/fides/pull/5716)
 - Added glossary_node field to DataHubSchema integration config [#5734](https://github.com/ethyca/fides/pull/5734)

clients/admin-ui/cypress/e2e/action-center.cy.ts

@@ -141,8 +141,7 @@ describe("Action center", () => {
       cy.getByTestId("pagination-btn").should("exist");
       cy.getByTestId("column-system_name").should("exist");
       cy.getByTestId("column-total_updates").should("exist");
-      // TODO: [HJ-356] uncomment when data use column is implemented
-      // cy.getByTestId("column-data_use").should("exist");
+      cy.getByTestId("column-data_use").should("exist");
       cy.getByTestId("column-locations").should("exist");
       cy.getByTestId("column-domains").should("exist");
       cy.getByTestId("column-actions").should("exist");
@@ -153,15 +152,14 @@ describe("Action center", () => {
       cy.getByTestId("row-3-col-system_name").within(() => {
         cy.getByTestId("change-icon").should("exist"); // new system
       });
-      // TODO: [HJ-356] uncomment when data use column is implemented
-      /* // data use column should be empty for uncategorized assets
-      cy.getByTestId("row-0-col-data_use").children().should("have.length", 0);
-      cy.getByTestId("row-1-col-system_name").within(() => {
-        cy.getByTestId("change-icon").should("not.exist"); // existing result
-        cy.contains("Google Tag Manager").should("exist");
-      }); */
-      // TODO: [HJ-356] data use column should not be empty for other assets
-      // cy.getByTestId("row-1-col-data_use").children().should("not.have.length", 0);
+      // data use column should be empty for uncategorized assets
+      cy.getByTestId("row-0-col-data_use").should("be.empty");
+      // cy.getByTestId("row-1-col-system_name").within(() => {
+      //   cy.getByTestId("change-icon").should("not.exist"); // existing result
+      //   cy.contains("Google Tag Manager").should("exist");
+      // });
+      // data use column should not be empty for other assets
+      cy.getByTestId("row-1-col-data_use").children().should("have.length", 1);
 
       // multiple locations
       cy.getByTestId("row-2-col-locations").should("contain", "2 locations");

clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-aggregate-results.json

@@ -46,6 +46,7 @@
       "vendor_id": "fds.1046",
       "total_updates": 10,
       "locations": ["USA"],
+      "data_uses": ["essential", "collect"],
       "domains": [
         "td.doubleclick.net",
         "www.google.com",

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useDiscoveredSystemAggregateColumns.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 
 import { DefaultCell } from "~/features/common/table/v2";
+import DiscoveredSystemDataUseCell from "~/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredSystemDataUseCell";
 
 import { DiscoveredSystemActionsCell } from "../tables/cells/DiscoveredSystemAggregateActionsCell";
 import { DiscoveredSystemStatusCell } from "../tables/cells/DiscoveredSystemAggregateStatusCell";
@@ -26,15 +27,17 @@ export const useDiscoveredSystemAggregateColumns = (monitorId: string) => {
       header: "Assets",
       size: 80,
     }),
-    /*
-    // TODO: [HJ-356] uncomment when monitor supports categories of consent
     columnHelper.display({
       id: "data_use",
+      cell: (props) => (
+        <DiscoveredSystemDataUseCell system={props.row.original} />
+      ),
       header: "Categories of consent",
       meta: {
         width: "auto",
+        disableRowClick: true,
       },
-    }), */
+    }),
     columnHelper.accessor((row) => row.locations, {
       id: "locations",
       cell: (props) => (

clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredSystemDataUseCell.tsx

@@ -0,0 +1,29 @@
+import useTaxonomies from "~/features/common/hooks/useTaxonomies";
+import { BadgeCellExpandable } from "~/features/common/table/v2/cells";
+import { MonitorSystemAggregate } from "~/features/data-discovery-and-detection/action-center/types";
+import isConsentCategory from "~/features/data-discovery-and-detection/action-center/utils/isConsentCategory";
+
+const DiscoveredSystemDataUseCell = ({
+  system,
+}: {
+  system: MonitorSystemAggregate;
+}) => {
+  const { getDataUseDisplayName } = useTaxonomies();
+  const consentCategories =
+    system.data_uses?.filter((use) => isConsentCategory(use)) ?? [];
+  const cellValues = consentCategories.map((use) => ({
+    label: getDataUseDisplayName(use),
+    key: use,
+  }));
+
+  return (
+    <BadgeCellExpandable
+      values={cellValues}
+      bgColor="white"
+      borderWidth="1px"
+      borderColor="gray.200"
+    />
+  );
+};
+
+export default DiscoveredSystemDataUseCell;

clients/admin-ui/src/features/data-discovery-and-detection/action-center/types.d.ts

@@ -20,6 +20,7 @@ export interface MonitorSystemAggregate {
   system_key: string | null; // null when the system is not a known system
   vendor_id: string;
   total_updates: 0;
+  data_uses: string[];
   locations: string[];
   domains: string[];
 }

clients/admin-ui/src/features/data-discovery-and-detection/action-center/utils/isConsentCategory.ts

@@ -0,0 +1,14 @@
+export const CONSENT_CATEGORIES = [
+  "essential",
+  "functional.service.improve",
+  "personalize",
+  "analytics",
+  "marketing.advertising.first_party.targeted",
+  "marketing.advertising.third_party.targeted",
+];
+
+const isConsentCategory = (category: string): boolean => {
+  return CONSENT_CATEGORIES.includes(category);
+};
+
+export default isConsentCategory;