HJ-128 - Fix on FE columnOrder and CHANGELOG.md update (#5623)

ethyca · Dec 19, 2024 · 918f233 · 918f233
1 parent 2d75060
commit 918f233
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ The types of changes are:
 - Added new `has_next` parameter for the `link` pagination strategy [#5596](https://github.com/ethyca/fides/pull/5596)
 - Added a `DBCache` model for database-backed caching [#5613](https://github.com/ethyca/fides/pull/5613)
 - Adds "reclassify" button to discovery result tables [#5574](https://github.com/ethyca/fides/pull/5574)
+- Added support for exporting datamaps with column renaming, reordering and visibility options [#5543](https://github.com/ethyca/fides/pull/5543)
 
 ### Changed
 - Adjusted Ant's Select component colors and icon [#5594](https://github.com/ethyca/fides/pull/5594)

diff --git a/clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx b/clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx
@@ -65,7 +65,7 @@ import {
   getDatamapReportColumns,
   getDefaultColumn,
 } from "./DatamapReportTableColumns";
-import { getGrouping, getPrefixColumns } from "./utils";
+import { getColumnOrder, getGrouping, getPrefixColumns } from "./utils";
 
 const emptyMinimalDatamapReportResponse: Page_DatamapReport_ = {
   items: [],
@@ -223,6 +223,14 @@ export const DatamapReportTable = () => {
     ],
   );
 
+  useEffect(() => {
+    if (datamapReport) {
+      const columnIDs = Object.keys(datamapReport.items[0]);
+      setColumnOrder(getColumnOrder(groupBy, columnIDs));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupBy, datamapReport]);
+
   const {
     isOpen: isColumnSettingsOpen,
     onOpen: onColumnSettingsOpen,

diff --git a/clients/admin-ui/src/features/datamap/reporting/datamap-report-context.tsx b/clients/admin-ui/src/features/datamap/reporting/datamap-report-context.tsx
@@ -11,7 +11,6 @@ import { DATAMAP_GROUPING } from "~/types/api";
 
 import { DatamapReportFilterSelections } from "../types";
 import { COLUMN_IDS, DATAMAP_LOCAL_STORAGE_KEYS } from "./constants";
-import { getColumnOrder } from "./utils";
 
 interface DatamapReportContextProps {
   savedCustomReportId: string;
@@ -61,7 +60,7 @@ export const DatamapReportProvider = ({
 
   const [columnOrder, setColumnOrder] = useLocalStorage<string[]>(
     DATAMAP_LOCAL_STORAGE_KEYS.COLUMN_ORDER,
-    getColumnOrder(groupBy),
+    [],
   );
 
   const [columnVisibility, setColumnVisibility] = useLocalStorage<

diff --git a/clients/admin-ui/src/features/datamap/reporting/utils.ts b/clients/admin-ui/src/features/datamap/reporting/utils.ts
@@ -12,24 +12,23 @@ export const getGrouping = (groupBy?: DATAMAP_GROUPING) => {
   }
 };
 
-export const getColumnOrder = (groupBy: DATAMAP_GROUPING) => {
+export const getColumnOrder = (
+  groupBy: DATAMAP_GROUPING,
+  columnIDs: string[],
+) => {
   let columnOrder: string[] = [];
   if (DATAMAP_GROUPING.SYSTEM_DATA_USE === groupBy) {
-    columnOrder = [
-      COLUMN_IDS.SYSTEM_NAME,
-      COLUMN_IDS.DATA_USE,
-      COLUMN_IDS.DATA_CATEGORY,
-      COLUMN_IDS.DATA_SUBJECT,
-    ];
+    columnOrder = [COLUMN_IDS.SYSTEM_NAME, COLUMN_IDS.DATA_USE];
   }
   if (DATAMAP_GROUPING.DATA_USE_SYSTEM === groupBy) {
-    columnOrder = [
-      COLUMN_IDS.DATA_USE,
-      COLUMN_IDS.SYSTEM_NAME,
-      COLUMN_IDS.DATA_CATEGORY,
-      COLUMN_IDS.DATA_SUBJECT,
-    ];
+    columnOrder = [COLUMN_IDS.DATA_USE, COLUMN_IDS.SYSTEM_NAME];
   }
+  columnOrder = columnOrder.concat(
+    columnIDs.filter(
+      (columnID) =>
+        columnID !== COLUMN_IDS.SYSTEM_NAME && columnID !== COLUMN_IDS.DATA_USE,
+    ),
+  );
   return columnOrder;
 };