Use CheckboxTree for data map filtering

CHANGELOG.md

@@ -22,6 +22,9 @@ The types of changes are:
 - Added ability to export the contents of datamap report [#1545](https://ethyca.atlassian.net/browse/PROD-1545)
 - Added state persistence across sessions to the datamap report table [#4853](https://github.com/ethyca/fides/pull/4853)
 
+### Changed
+- Changed filters on the data map report table to use checkbox collapsible tree view [#4864](https://github.com/ethyca/fides/pull/4864)
+
 ### Fixed
 - Remove the extra 'white-space: normal' CSS for FidesJS HTML descriptions [#4850](https://github.com/ethyca/fides/pull/4850)
 - Fixed data map report to display second level names from the taxonomy as primary (bold) label [#4856](https://github.com/ethyca/fides/pull/4856)

clients/admin-ui/__tests__/features/common-utils.test.ts

@@ -1,4 +1,7 @@
-import { getFileNameFromContentDisposition } from "~/features/common/utils";
+import {
+  getFileNameFromContentDisposition,
+  getQueryParamsFromArray,
+} from "~/features/common/utils";
 
 describe("common utils", () => {
   describe(getFileNameFromContentDisposition.name, () => {
@@ -13,6 +16,18 @@ describe("common utils", () => {
       );
     });
   });
+  describe(getQueryParamsFromArray.name, () => {
+    it("should return undefined when strings is empty", () => {
+      expect(getQueryParamsFromArray([], "test")).toBeUndefined();
+    });
+    it("should return query params from strings", () => {
+      const valueList = ["a", "b", "c"];
+      const queryParam = "test";
+      expect(getQueryParamsFromArray(valueList, queryParam)).toEqual(
+        "test=a&test=b&test=c"
+      );
+    });
+  });
 });
 
 export default undefined;

clients/admin-ui/cypress/e2e/datamap-report.cy.ts

@@ -165,6 +165,34 @@ describe("Minimal datamap report table", () => {
     });
   });
 
+  describe("Filtering", () => {
+    it("should filter the table by making a selection", () => {
+      cy.getByTestId("filter-multiple-systems-btn").click();
+      cy.getByTestId("datamap-report-filter-modal").should("be.visible");
+      cy.getByTestId("filter-modal-accordion-button").eq(1).click();
+      cy.getByTestId("filter-modal-checkbox-tree-categories").should(
+        "be.visible"
+      );
+      cy.getByTestId("filter-modal-checkbox-tree-categories")
+        .find("input")
+        .first()
+        .click({ force: true });
+      cy.getByTestId("datamap-report-filter-modal-continue-btn").click();
+      cy.get("@getDatamapMinimal")
+        .its("request.url")
+        .should("include", "data_categories=custom");
+      cy.getByTestId("datamap-report-filter-modal").should("not.exist");
+
+      // should clear the filters
+      cy.getByTestId("filter-multiple-systems-btn").click();
+      cy.getByTestId("datamap-report-filter-modal-cancel-btn").click();
+      cy.getByTestId("datamap-report-filter-modal").should("not.exist");
+      cy.wait("@getDatamapMinimal")
+        .its("request.url")
+        .should("not.include", "data_categories=custom");
+    });
+  });
+
   describe("Exporting", () => {
     it("should open the export modal", () => {
       cy.getByTestId("export-btn").click();

clients/admin-ui/src/features/common/CheckboxTree.tsx

@@ -8,10 +8,10 @@
  */
 
 import {
-  ArrowDownLineIcon,
-  ArrowUpLineIcon,
   Box,
+  BoxProps,
   Checkbox,
+  ChevronDownIcon,
   IconButton,
 } from "@fidesui/react";
 import { Fragment, ReactNode, useEffect, useState } from "react";
@@ -98,6 +98,7 @@ const CheckboxItem = ({
         justifyContent="space-between"
         _hover={{ backgroundColor: "gray.100", cursor: "pointer" }}
         onClick={() => onExpanded(node)}
+        minHeight={8}
       >
         <Checkbox
           colorScheme="complimentary"
@@ -115,16 +116,11 @@ const CheckboxItem = ({
           <IconButton
             data-testid={`expand-${label}`}
             aria-label={isExpanded ? "collapse" : "expand"}
-            icon={
-              isExpanded ? (
-                <ArrowUpLineIcon boxSize={5} />
-              ) : (
-                <ArrowDownLineIcon boxSize={5} />
-              )
-            }
+            icon={<ChevronDownIcon boxSize={5} />}
             variant="ghost"
             onClick={() => onExpanded(node)}
             size="sm"
+            style={{ transform: isExpanded ? "rotate(180deg)" : "" }}
           />
         ) : null}
       </Box>
@@ -133,13 +129,18 @@ const CheckboxItem = ({
   );
 };
 
-interface CheckboxTreeProps {
+interface CheckboxTreeProps extends BoxProps {
   nodes: TreeNode[];
   selected: string[];
   onSelected: (newSelected: string[]) => void;
 }
 
-const CheckboxTree = ({ nodes, selected, onSelected }: CheckboxTreeProps) => {
+const CheckboxTree = ({
+  nodes,
+  selected,
+  onSelected,
+  ...props
+}: CheckboxTreeProps) => {
   const [checked, setChecked] = useState<string[]>([]);
   const [expanded, setExpanded] = useState<string[]>([]);
 
@@ -236,7 +237,7 @@ const CheckboxTree = ({ nodes, selected, onSelected }: CheckboxTreeProps) => {
   };
 
   return (
-    <Box>
+    <Box {...props}>
       {nodes.map((child) => (
         <Box key={child.value}>{createTree(child)}</Box>
       ))}

clients/admin-ui/src/features/common/modals/FilterModal.tsx

@@ -15,6 +15,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  ModalProps,
   SimpleGrid,
   Text,
 } from "@fidesui/react";
@@ -167,19 +168,17 @@ export const FilterSection = ({ heading, children }: FilterSectionProps) => (
   </Box>
 );
 
-interface FilterModalProps {
-  isOpen: boolean;
-  onClose: () => void;
+export interface FilterModalProps extends ModalProps {
   resetFilters: () => void;
 }
-
-export const FilterModal: React.FC<FilterModalProps> = ({
+export const FilterModal = ({
+  resetFilters,
   isOpen,
   onClose,
   children,
-  resetFilters,
-}) => (
-  <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+  ...props
+}: FilterModalProps): JSX.Element => (
+  <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl" {...props}>
     <ModalOverlay />
     <ModalContent>
       <ModalHeader>Filters</ModalHeader>

clients/admin-ui/src/features/common/table/v2/filters/GlobalFilterV2.tsx

@@ -36,6 +36,7 @@ export const GlobalFilterV2 = ({
         onClear={onClear}
         search={value || ""}
         placeholder={placeholder}
+        data-testid="global-text-filter"
       />
     </Box>
   );

clients/admin-ui/src/features/common/utils.ts

@@ -47,3 +47,25 @@ export const getFileNameFromContentDisposition = (
   const match = contentDisposition.match(/filename=(.+)/);
   return match ? match[1] : defaultName;
 };
+
+/**
+ * Constructs a query string from an array of values.
+ *
+ * @param valueList - An array of string values to be included in the query string.
+ * @param queryParam - The name of the query parameter.
+ * @returns A query string where each value from the array is assigned to the query parameter.
+ * If the array is empty, the function returns undefined.
+ *
+ * @example
+ * getQueryParamsFromArray(['1', '2', '3'], 'id');
+ * // returns 'id=1&id=2&id=3'
+ */
+export const getQueryParamsFromArray = (
+  valueList: string[],
+  queryParam: string
+) => {
+  if (valueList.length > 0) {
+    return `${queryParam}=${valueList.join(`&${queryParam}=`)}`;
+  }
+  return undefined;
+};