Extend datamap table with custom fields (#4579)

Co-authored-by: Adrian Galvan <[email protected]>

CHANGELOG.md

@@ -23,6 +23,7 @@ The types of changes are:
 
 - View more modal to regulations page [#4574](https://github.com/ethyca/fides/pull/4574)
 - Columns in data map reporting, adding multiple systems, and consent configuration tables can be resized. In the data map reporting table, fields with multiple values can show all or collapse all [#4569](https://github.com/ethyca/fides/pull/4569)
+- Show custom fields in the data map report table [#4579](https://github.com/ethyca/fides/pull/4579)
 
 ### Changed
 

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

@@ -0,0 +1,77 @@
+import {
+  stubPlus,
+  stubSystemCrud,
+  stubTaxonomyEntities,
+} from "cypress/support/stubs";
+
+import { REPORTING_DATAMAP_ROUTE } from "~/features/common/nav/v2/routes";
+import {
+  AllowedTypes,
+  CustomFieldDefinition,
+  ResourceTypes,
+} from "~/types/api";
+
+const mockCustomField = (overrides?: Partial<CustomFieldDefinition>) => {
+  const base = {
+    name: "Prime number",
+    description: null,
+    field_type: "string",
+    allow_list_id: "id-allow-list-prime-numbers",
+    resource_type: "system",
+    field_definition: null,
+    active: true,
+    id: "id-custom-field-definition-prime-number",
+  };
+  if (overrides) {
+    return { ...base, ...overrides };
+  }
+  return base;
+};
+
+describe("Datamap table and spatial view", () => {
+  beforeEach(() => {
+    cy.login();
+    stubPlus(true);
+    stubSystemCrud();
+    stubTaxonomyEntities();
+    cy.intercept("GET", "/api/v1/plus/datamap/minimal*", {
+      fixture: "datamap/minimal.json",
+    }).as("getDatamapMinimal");
+    cy.intercept(
+      "GET",
+      "/api/v1/plus/custom-metadata/custom-field-definition",
+      {
+        body: [
+          mockCustomField({ name: "Starter pokemon" }),
+          mockCustomField({
+            name: "Pokemon party",
+            // eslint-disable-next-line no-underscore-dangle
+            field_type: AllowedTypes.STRING_,
+          }),
+          mockCustomField({
+            name: "color",
+            resource_type: ResourceTypes.DATA_USE,
+          }),
+        ],
+      }
+    );
+    cy.visit(REPORTING_DATAMAP_ROUTE);
+  });
+
+  it("can render custom fields", () => {
+    // Should render the custom fields as columns
+    cy.getByTestId("column-system_starter_pokemon").contains("Starter pokemon");
+    cy.getByTestId("column-system_pokemon_party").contains("Pokemon party");
+    cy.getByTestId("column-privacy_declaration_color").contains("Color");
+
+    // Pokemon party is multi-select, so we should have a menu to allow grouping/displaying all
+    cy.getByTestId("row-0-col-system_pokemon_party").contains("3");
+    cy.getByTestId("system_pokemon_party-header-menu").click();
+    cy.getByTestId("system_pokemon_party-header-menu-list").within(() => {
+      cy.get("button").contains("Display all").click();
+    });
+    ["eevee", "pikachu", "articuno"].forEach((pokemon) => {
+      cy.getByTestId("row-0-col-system_pokemon_party").contains(pokemon);
+    });
+  });
+});