HJ-128 - Fix on FE columnOrder and CHANGELOG.md update

CHANGELOG.md

@@ -28,11 +28,13 @@ 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)
 - Replaced taxonomies page with new UI based on an interactive tree visualization [#5602](https://github.com/ethyca/fides/pull/5602)
 - Migrated breadcrumbs to Ant Design [#5610](https://github.com/ethyca/fides/pull/5610)
+- Updated `CustomReportConfig` to be more intuitive on its contents [#5543](https://github.com/ethyca/fides/pull/5543)
 
 ### Fixed
 - Fixing quickstart.py script [#5585](https://github.com/ethyca/fides/pull/5585)

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,

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<

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;
 };