Action center: add consent category editing (#5739)

Author: jpople

CHANGELOG.md

@@ -22,6 +22,7 @@ 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 editing support for categories of consent on discovered assets [#5739](https://github.com/ethyca/fides/pull/5739)
 - Added a read-only consent category cell to Action Center aggregate system results table [#5737](https://github.com/ethyca/fides/pull/5737)
 - Added detail trays to items in data catalog view [#5729](https://github.com/ethyca/fides/pull/5729)
 

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

@@ -2,6 +2,7 @@ import {
   stubActionCenter,
   stubPlus,
   stubSystemVendors,
+  stubTaxonomyEntities,
   stubVendorList,
 } from "cypress/support/stubs";
 
@@ -275,8 +276,7 @@ describe("Action center", () => {
       cy.getByTestId("column-name").should("exist");
       cy.getByTestId("column-resource_type").should("exist");
       cy.getByTestId("column-system").should("exist");
-      // TODO: [HJ-369] 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-domain").should("exist");
       // TODO: [HJ-344] uncomment when Discovery column is implemented
@@ -297,7 +297,7 @@ describe("Action center", () => {
       });
       cy.wait("@getSystemsPaginated");
       cy.getByTestId("system-select").antSelect("Fidesctl System");
-      cy.wait("@setAssetSystem");
+      cy.wait("@patchAssets");
       cy.getByTestId("system-select").should("not.exist");
       cy.getByTestId("success-alert").should(
         "contain",
@@ -326,8 +326,7 @@ describe("Action center", () => {
       cy.getByTestId("column-name").should("exist");
       cy.getByTestId("column-resource_type").should("exist");
       cy.getByTestId("column-system").should("exist");
-      // TODO: [HJ-369] 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-domain").should("exist");
       // TODO: [HJ-344] uncomment when Discovery column is implemented
@@ -348,7 +347,7 @@ describe("Action center", () => {
       });
       cy.wait("@getSystemsPaginated");
       cy.getByTestId("system-select").antSelect("Fidesctl System");
-      cy.wait("@setAssetSystem");
+      cy.wait("@patchAssets");
       cy.getByTestId("system-select").should("not.exist");
       cy.getByTestId("success-alert").should(
         "contain",
@@ -369,7 +368,7 @@ describe("Action center", () => {
       });
       cy.wait("@getSystemsPaginated");
       cy.getByTestId("system-select").antSelect("Demo Marketing System");
-      cy.wait("@setAssetSystem");
+      cy.wait("@patchAssets");
       cy.getByTestId("success-alert").should("exist");
       cy.getByTestId("system-select").should("not.exist");
       cy.getByTestId("success-alert").should(
@@ -391,7 +390,7 @@ describe("Action center", () => {
       // adds new system
       cy.wait("@postSystemVendors");
       // assigns asset to new system
-      cy.wait("@setAssetSystem");
+      cy.wait("@patchAssets");
       cy.getByTestId("success-alert").should(
         "contain",
         'Test System has been added to your system inventory and the Browser Request "gtm.js" has been assigned to that system.',
@@ -466,6 +465,7 @@ describe("Action center", () => {
         "11 assets from Google Tag Manager have been added to the system inventory.",
       );
     });
+
     it("should bulk assign assets to a system", () => {
       cy.getByTestId("bulk-actions-menu").should("be.disabled");
       cy.getByTestId("row-0-col-select").find("label").click();
@@ -478,11 +478,30 @@ describe("Action center", () => {
       cy.getByTestId("add-modal-content").should("be.visible");
       cy.getByTestId("system-select").antSelect("Fidesctl System");
       cy.getByTestId("save-btn").click();
-      cy.wait("@setAssetSystem");
+      cy.wait("@patchAssets");
       cy.getByTestId("success-alert").should(
         "contain",
         "3 assets have been assigned to Fidesctl System.",
       );
     });
+
+    it("should bulk add data uses to assets", () => {
+      stubTaxonomyEntities();
+      cy.getByTestId("bulk-actions-menu").should("be.disabled");
+      cy.getByTestId("row-0-col-select").find("label").click();
+      cy.getByTestId("row-2-col-select").find("label").click();
+      cy.getByTestId("row-3-col-select").find("label").click();
+      cy.getByTestId("selected-count").should("contain", "3 selected");
+      cy.getByTestId("bulk-actions-menu").should("not.be.disabled");
+      cy.getByTestId("bulk-actions-menu").click();
+      cy.getByTestId("bulk-add-data-use").click();
+      cy.getByTestId("taxonomy-select").antSelect("essential");
+      cy.getByTestId("save-btn").click({ force: true });
+      cy.wait("@patchAssets");
+      cy.getByTestId("success-alert").should(
+        "contain",
+        "Consent categories added to 3 assets from Google Tag Manager.",
+      );
+    });
   });
 });

clients/admin-ui/cypress/support/stubs.ts

@@ -556,7 +556,7 @@ export const stubActionCenter = () => {
   }).as("addMonitorResultSystem");
   cy.intercept("PATCH", "/api/v1/plus/discovery-monitor/*/results", {
     response: 200,
-  }).as("setAssetSystem");
+  }).as("patchAssets");
 };
 
 export const stubDataCatalog = () => {

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

@@ -0,0 +1,68 @@
+import {
+  AntButton as Button,
+  AntFlex as Flex,
+  AntTypography as Typography,
+  ModalProps,
+} from "fidesui";
+import { useState } from "react";
+
+import FormModal from "~/features/common/modals/FormModal";
+import ConsentCategorySelect from "~/features/data-discovery-and-detection/action-center/ConsentCategorySelect";
+
+const { Text } = Typography;
+
+interface AddDataUsesModalProps extends Omit<ModalProps, "children"> {
+  onSave: (dataUses: string[]) => void;
+  isSaving?: boolean;
+}
+
+const AddDataUsesModal = ({
+  onSave,
+  isSaving,
+  onClose,
+  ...props
+}: AddDataUsesModalProps) => {
+  const [selectedDataUses, setSelectedDataUses] = useState<string[]>([]);
+
+  const handleReset = () => {
+    setSelectedDataUses([]);
+    onClose();
+  };
+
+  return (
+    <FormModal title="Add consent category" {...props} onClose={handleReset}>
+      <Flex vertical gap={20} className="pb-6 pt-4">
+        <Text>
+          Assign consent categories to selected assets. This configures the
+          system for consent management. Consent categories apply to both
+          individual assets and the system.
+        </Text>
+        <ConsentCategorySelect
+          mode="tags"
+          selectedTaxonomies={selectedDataUses}
+          onSelect={(_, option) =>
+            setSelectedDataUses([...selectedDataUses, option.value])
+          }
+          variant="outlined"
+        />
+      </Flex>
+      <Flex justify="space-between">
+        <Button htmlType="reset" onClick={handleReset} data-testid="cancel-btn">
+          Cancel
+        </Button>
+        <Button
+          htmlType="submit"
+          type="primary"
+          disabled={!selectedDataUses.length}
+          loading={isSaving}
+          onClick={() => onSave(selectedDataUses)}
+          data-testid="save-btn"
+        >
+          Save
+        </Button>
+      </Flex>
+    </FormModal>
+  );
+};
+
+export default AddDataUsesModal;

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

@@ -0,0 +1,34 @@
+import {
+  TaxonomySelect,
+  TaxonomySelectOption,
+  TaxonomySelectProps,
+} from "~/features/common/dropdown/TaxonomySelect";
+import useTaxonomies from "~/features/common/hooks/useTaxonomies";
+import { CONSENT_CATEGORIES } from "~/features/data-discovery-and-detection/action-center/utils/isConsentCategory";
+
+const ConsentCategorySelect = ({
+  selectedTaxonomies,
+  ...props
+}: TaxonomySelectProps) => {
+  const { getDataUseDisplayNameProps, getDataUses } = useTaxonomies();
+  const consentCategories = getDataUses().filter(
+    (use) => use.active && CONSENT_CATEGORIES.includes(use.fides_key),
+  );
+
+  const options: TaxonomySelectOption[] = consentCategories
+    .filter((c) => !selectedTaxonomies.includes(c.fides_key))
+    .map((consentCategory) => {
+      const { name, primaryName } = getDataUseDisplayNameProps(
+        consentCategory.fides_key,
+      );
+      return {
+        value: consentCategory.fides_key,
+        name,
+        primaryName,
+        description: consentCategory.description || "",
+      };
+    });
+  return <TaxonomySelect options={options} {...props} />;
+};
+
+export default ConsentCategorySelect;

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

@@ -1,9 +1,10 @@
 import { baseApi } from "~/features/common/api.slice";
 import { getQueryParamsFromArray } from "~/features/common/utils";
-import { Page_StagedResourceAPIResponse_ } from "~/types/api";
 import { PaginationQueryParams } from "~/types/common/PaginationQueryParams";
 
 import {
+  DiscoveredAssetPaginatedResponse,
+  DiscoveredAssetResponse,
   MonitorSummaryPaginatedResponse,
   MonitorSystemAggregatePaginatedResponse,
 } from "./types";
@@ -47,7 +48,7 @@ const actionCenterApi = baseApi.injectEndpoints({
       providesTags: ["Discovery Monitor Results"],
     }),
     getDiscoveredAssets: build.query<
-      Page_StagedResourceAPIResponse_,
+      DiscoveredAssetPaginatedResponse,
       { key: string; system: string; search: string } & PaginationQueryParams
     >({
       query: ({ key, system, page = 1, size = 20, search }) => ({
@@ -138,6 +139,35 @@ const actionCenterApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: ["Discovery Monitor Results"],
     }),
+    updateAssetsDataUse: build.mutation<
+      any,
+      { monitorId: string; urnList: string[]; dataUses: string[] }
+    >({
+      query: (params) => ({
+        method: "PATCH",
+        url: `/plus/discovery-monitor/${params.monitorId}/results`,
+        body: params.urnList.map((urn) => ({
+          urn,
+          data_uses: params.dataUses,
+        })),
+      }),
+      invalidatesTags: ["Discovery Monitor Results"],
+    }),
+    // generic update assets mutation, necessary for non-destructive bulk data use updates
+    updateAssets: build.mutation<
+      any,
+      {
+        monitorId: string;
+        assets: DiscoveredAssetResponse[];
+      }
+    >({
+      query: (params) => ({
+        method: "PATCH",
+        url: `/plus/discovery-monitor/${params.monitorId}/results`,
+        body: params.assets,
+      }),
+      invalidatesTags: ["Discovery Monitor Results"],
+    }),
   }),
 });
 
@@ -150,4 +180,6 @@ export const {
   useAddMonitorResultAssetsMutation,
   useIgnoreMonitorResultAssetsMutation,
   useUpdateAssetsSystemMutation,
+  useUpdateAssetsDataUseMutation,
+  useUpdateAssetsMutation,
 } = actionCenterApi;

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

@@ -4,15 +4,16 @@ import {
   DefaultCell,
   IndeterminateCheckboxCell,
 } from "~/features/common/table/v2";
-import { StagedResourceAPIResponse } from "~/types/api";
+import DiscoveredAssetDataUseCell from "~/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredAssetDataUseCell";
+import { DiscoveredAssetResponse } from "~/features/data-discovery-and-detection/action-center/types";
 
 import { DiscoveredAssetActionsCell } from "../tables/cells/DiscoveredAssetActionsCell";
 import { SystemCell } from "../tables/cells/SystemCell";
 
 export const useDiscoveredAssetsColumns = () => {
-  const columnHelper = createColumnHelper<StagedResourceAPIResponse>();
+  const columnHelper = createColumnHelper<DiscoveredAssetResponse>();
 
-  const columns: ColumnDef<StagedResourceAPIResponse, any>[] = [
+  const columns: ColumnDef<DiscoveredAssetResponse, any>[] = [
     columnHelper.display({
       id: "select",
       cell: ({ row }) => (
@@ -57,15 +58,17 @@ export const useDiscoveredAssetsColumns = () => {
         width: "auto",
       },
     }),
-    /*
-    // TODO: [HJ-369] uncomment when monitor supports categories of consent
     columnHelper.display({
       id: "data_use",
+      cell: (props) => (
+        <DiscoveredAssetDataUseCell asset={props.row.original} />
+      ),
       header: "Categories of consent",
       meta: {
         width: "auto",
+        disableRowClick: true,
       },
-    }), */
+    }),
     columnHelper.accessor((row) => row.locations, {
       id: "locations",
       cell: (props) => (