HJ-128 - Updates frontend for datamap custom reports

ethyca · Dec 13, 2024 · 84bd2af · 84bd2af
1 parent 3781230
commit 84bd2af
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 54 deletions.
diff --git a/clients/admin-ui/cypress/e2e/datamap-report.cy.ts b/clients/admin-ui/cypress/e2e/datamap-report.cy.ts
@@ -276,36 +276,36 @@ describe("Data map report table", () => {
       it("should cancel renaming columns", () => {
         cy.getByTestId("more-menu").click();
         cy.getByTestId("rename-columns-btn").click();
-        cy.getByTestId("column-data_use-input")
+        cy.getByTestId("column-data_uses-input")
           .clear()
           .then(() => {
-            cy.getByTestId("column-data_use-input").type("Custom Title");
+            cy.getByTestId("column-data_uses-input").type("Custom Title");
           });
         cy.getByTestId("rename-columns-cancel-btn").click({ force: true });
         cy.getByTestId("rename-columns-reset-btn").should("not.exist");
         cy.getByTestId("rename-columns-cancel-btn").should("not.exist");
         cy.getByTestId("rename-columns-apply-btn").should("not.exist");
-        cy.getByTestId("column-data_use").should("contain.text", "Data use");
+        cy.getByTestId("column-data_uses").should("contain.text", "Data use");
       });
       it("should reset columns", () => {
         cy.getByTestId("more-menu").click();
         cy.getByTestId("rename-columns-btn").click();
-        cy.getByTestId("column-data_use-input")
+        cy.getByTestId("column-data_uses-input")
           .clear()
           .then(() => {
-            cy.getByTestId("column-data_use-input").type("Custom Title");
+            cy.getByTestId("column-data_uses-input").type("Custom Title");
           });
         cy.getByTestId("rename-columns-apply-btn").click({ force: true });
         cy.getByTestId("more-menu").click();
         cy.getByTestId("rename-columns-btn").click();
         cy.getByTestId("rename-columns-reset-btn").click({ force: true });
-        cy.getByTestId("column-data_use").should("contain.text", "Data use");
+        cy.getByTestId("column-data_uses").should("contain.text", "Data use");
       });
       it("should support pressing the Enter key to apply renamed columns", () => {
         cy.getByTestId("more-menu").click();
         cy.getByTestId("rename-columns-btn").click();
-        cy.getByTestId("column-data_use-input").type("Custom Title{enter}");
-        cy.getByTestId("column-data_use").should(
+        cy.getByTestId("column-data_uses-input").type("Custom Title{enter}");
+        cy.getByTestId("column-data_uses").should(
           "contain.text",
           "Custom Title",
         );

diff --git a/clients/admin-ui/cypress/fixtures/custom-reports/custom-report.json b/clients/admin-ui/cypress/fixtures/custom-reports/custom-report.json
@@ -62,7 +62,8 @@
     },
     "column_map": {
       "data_categories": {
-        "label": "My Data Category Map"
+        "label": "My Data Category Map",
+        "enabled": true
       },
       "data_subjects": {
         "enabled": false

diff --git a/clients/admin-ui/src/features/common/custom-reports/CustomReportCreationModal.tsx b/clients/admin-ui/src/features/common/custom-reports/CustomReportCreationModal.tsx
@@ -63,22 +63,12 @@ export const CustomReportCreationModal = ({
   );
 
   const handleCreateReport = async (reportName: string) => {
-    const columnMap: Record<string, any> = {};
-    const columnVisibility: Record<string, boolean> =
-      tableStateToSave?.columnVisibility || {};
-    Object.keys(columnMapToSave).forEach((key) => {
-      columnMap[key] = {
-        label: columnMapToSave[key],
-        enabled: columnVisibility[key],
-      };
-    });
-
     try {
       const newReportTemplate = {
         name: reportName.trim(),
         type: ReportType.DATAMAP,
         config: {
-          column_map: columnMap,
+          column_map: columnMapToSave,
           table_state: tableStateToSave,
         },
       };

diff --git a/clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx b/clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx
@@ -237,14 +237,6 @@ export const DatamapReportTable = () => {
   } = useDisclosure();
 
   const onExport = (downloadType: ExportFormat) => {
-    const columnMap: Record<string, Record<string, any>> = {};
-    Object.keys(columnNameMapOverrides).forEach((key) => {
-      columnMap[key] = {
-        label: columnNameMapOverrides[key],
-        enabled: columnVisibility[key],
-      };
-    });
-
     exportMinimalDatamapReport({
       ...reportQuery,
       format: downloadType,
@@ -253,7 +245,7 @@ export const DatamapReportTable = () => {
         name: "temporary report",
         type: "datamap",
         config: {
-          column_map: columnMap,
+          column_map: columnNameMapOverrides,
           table_state: {
             groupBy,
             filters: selectedFilters,
@@ -382,17 +374,10 @@ export const DatamapReportTable = () => {
     return <TableSkeletonLoader rowHeight={36} numRows={15} />;
   }
 
-  const x: Record<string, string> = {};
-  Object.keys(columnNameMapOverrides).forEach((key) => {
-    if (columnNameMapOverrides[key].label) {
-      x[key] = columnNameMapOverrides[key].label;
-    }
-  });
-
   return (
     <Flex flex={1} direction="column" overflow="auto">
       <DatamapReportFilterModal
-        columnNameMap={{ ...DEFAULT_COLUMN_NAMES, ...x }}
+        columnNameMap={{ ...DEFAULT_COLUMN_NAMES, ...columnNameMapOverrides }}
         selectedFilters={selectedFilters}
         isOpen={isFilterModalOpen}
         onClose={onFilterModalClose}
@@ -405,7 +390,7 @@ export const DatamapReportTable = () => {
         isOpen={isColumnSettingsOpen}
         onClose={onColumnSettingsClose}
         headerText="Data map settings"
-        columnNameMap={{ ...DEFAULT_COLUMN_NAMES, ...x }}
+        columnNameMap={{ ...DEFAULT_COLUMN_NAMES, ...columnNameMapOverrides }}
         prefixColumns={getPrefixColumns(groupBy)}
         tableInstance={tableInstance}
         savedCustomReportId={savedCustomReportId}

diff --git a/clients/admin-ui/src/features/datamap/reporting/DatamapReportTableColumns.tsx b/clients/admin-ui/src/features/datamap/reporting/DatamapReportTableColumns.tsx
@@ -20,29 +20,38 @@ const CUSTOM_FIELD_SYSTEM_PREFIX = "system_";
 const CUSTOM_FIELD_DATA_USE_PREFIX = "privacy_declaration_";
 
 export const getDefaultColumn: (
-  columnNameMap: Record<string, string>,
+  columnNameMap: Record<string, any>,
   isRenamingColumns: boolean,
 ) => Partial<ColumnDef<DatamapReport>> = (
   columnNameMap,
   isRenamingColumns,
 ) => ({
   cell: (props) => <DefaultCell value={props.getValue() as string} />,
-  header: (props) => (
-    <EditableHeaderCell
-      value={getColumnHeaderText({
-        columnId: props.column.id,
-        columnNameMap,
-      })}
-      defaultValue={
-        DEFAULT_COLUMN_NAMES[props.column.id as COLUMN_IDS] ||
-        getColumnHeaderText({
-          columnId: props.column.id,
-        })
+  header: (props) => {
+    const newColumnNameMap: Record<string, string> = {};
+    Object.keys(columnNameMap).forEach((key) => {
+      newColumnNameMap[key] = columnNameMap[key];
+      if (columnNameMap[key].label) {
+        newColumnNameMap[key] = columnNameMap[key].label;
       }
-      isEditing={isRenamingColumns}
-      {...props}
-    />
-  ),
+    });
+    return (
+      <EditableHeaderCell
+        value={getColumnHeaderText({
+          columnId: props.column.id,
+          columnNameMap: newColumnNameMap,
+        })}
+        defaultValue={
+          DEFAULT_COLUMN_NAMES[props.column.id as COLUMN_IDS] ||
+          getColumnHeaderText({
+            columnId: props.column.id,
+          })
+        }
+        isEditing={isRenamingColumns}
+        {...props}
+      />
+    );
+  },
 });
 
 const getCustomFieldColumns = (