Datamap report side panel

CHANGELOG.md

@@ -27,7 +27,7 @@ The types of changes are:
 - Request overrides for opt-in and opt-out consent requests [#4920](https://github.com/ethyca/fides/pull/4920)
 - Added query_param_key to Privacy Center schema [#4939](https://github.com/ethyca/fides/pull/4939)
 - Fill custom privacy request fields with query_param_key [#4948](https://github.com/ethyca/fides/pull/4948)
-
+- Added ability to open system preview side panel from new data map table [#4944](https://github.com/ethyca/fides/pull/4944)
 
 ### Changed
 - Set default ports for local development of client projects (:3001 for privacy center and :3000 for admin-ui) [#4912](https://github.com/ethyca/fides/pull/4912)

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

@@ -88,6 +88,7 @@ describe("Minimal datamap report table", () => {
     cy.getByTestId("group-by-menu-list").within(() => {
       cy.getByTestId("group-by-data-use-system").click();
     });
+    cy.wait("@getDatamapMinimal");
     cy.getByTestId("group-by-menu").should("contain.text", "Group by data use");
 
     // should persist the grouping when navigating away
@@ -209,4 +210,24 @@ describe("Minimal datamap report table", () => {
     // ideally we should test the downloads, but it's a bit complex and time consuming so deferring for now
     it.skip("should download the export file", () => {});
   });
+
+  describe("System preview drawer", () => {
+    it("should open the system preview drawer", () => {
+      cy.getByTestId("row-0-col-system_name").click();
+      cy.getByTestId("datamap-drawer").should("be.visible");
+      cy.getByTestId("datamap-drawer-close").click({ force: true });
+      cy.getByTestId("datamap-drawer").should("not.be.visible");
+    });
+    it("should open the system preview drawer when grouped by data use", () => {
+      cy.getByTestId("group-by-menu").click();
+      cy.getByTestId("group-by-menu-list").within(() => {
+        cy.getByTestId("group-by-data-use-system").click();
+      });
+      cy.wait("@getDatamapMinimal");
+      cy.getByTestId("row-0-col-system_name").click();
+      cy.getByTestId("datamap-drawer").should("be.visible");
+      cy.getByTestId("datamap-drawer-close").click({ force: true });
+      cy.getByTestId("datamap-drawer").should("not.be.visible");
+    });
+  });
 });

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

@@ -37,6 +37,19 @@ export const FidesCell = <T,>({
     isLastRowOfGroupedRows =
       groupRow.subRows[groupRow.subRows.length - 1].id === cell.row.id;
   }
+  const hasCellClickEnabled =
+    (!isGroupedColumn || isFirstRowOfGroupedRows) &&
+    !!cell.column.columnDef.meta?.onCellClick;
+  let handleCellClick;
+  if (!cell.column.columnDef.meta?.disableRowClick && onRowClick) {
+    handleCellClick = (e: React.MouseEvent<HTMLTableCellElement>) => {
+      onRowClick(cell.row.original, e);
+    };
+  } else if (hasCellClickEnabled) {
+    handleCellClick = () => {
+      cell.column.columnDef.meta?.onCellClick?.(cell.row.original);
+    };
+  }
 
   return (
     <Td
@@ -63,6 +76,10 @@ export const FidesCell = <T,>({
         // Fancy CSS memoization magic https://tanstack.com/table/v8/docs/framework/react/examples/column-resizing-performant
         maxWidth: `calc(var(--header-${cell.column.id}-size) * 1px)`,
         minWidth: `calc(var(--header-${cell.column.id}-size) * 1px)`,
+        "&:hover": {
+          backgroundColor: hasCellClickEnabled ? "gray.50" : undefined,
+          cursor: hasCellClickEnabled ? "pointer" : undefined,
+        },
       }}
       _hover={
         onRowClick && !cell.column.columnDef.meta?.disableRowClick
@@ -81,13 +98,7 @@ export const FidesCell = <T,>({
         borderRightWidth: 0,
       }}
       height="inherit"
-      onClick={
-        !cell.column.columnDef.meta?.disableRowClick && onRowClick
-          ? (e) => {
-              onRowClick(cell.row.original, e);
-            }
-          : undefined
-      }
+      onClick={handleCellClick}
       data-testid={`row-${cell.row.id}-col-${cell.column.id}`}
     >
       {!cell.getIsPlaceholder() || isFirstRowOfGroupedRows

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

@@ -50,6 +50,7 @@ declare module "@tanstack/table-core" {
     showHeaderMenu?: boolean;
     overflow?: "auto" | "visible" | "hidden";
     disableRowClick?: boolean;
+    onCellClick?: (row: TData) => void;
   }
 }
 /* eslint-enable */

clients/admin-ui/src/features/datamap/datamap-drawer/DatamapDrawer.tsx

@@ -62,6 +62,7 @@ const DatamapDrawer = ({
           boxShadow="0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)"
           display={selectedSystemId ? "unset" : "none"}
           backgroundColor="white"
+          data-testid="datamap-drawer"
         >
           <Box
             id="drawer-header"
@@ -97,6 +98,7 @@ const DatamapDrawer = ({
                     backgroundColor: "#00000000",
                   }}
                   onClick={resetSelectedSystemId}
+                  data-testid="datamap-drawer-close"
                 />
               </Flex>
             </Flex>

clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx

@@ -46,6 +46,7 @@ import {
   useExportMinimalDatamapReportMutation,
   useGetMinimalDatamapReportQuery,
 } from "~/features/datamap/datamap.slice";
+import DatamapDrawer from "~/features/datamap/datamap-drawer/DatamapDrawer";
 import ReportExportModal from "~/features/datamap/modals/ReportExportModal";
 import {
   DatamapReportFilterModal,
@@ -225,6 +226,7 @@ export const DatamapReportTable = () => {
     useState<string>();
   const [selectedDataSubjectFilters, setSelectedDataSubjectFilters] =
     useState<string>();
+  const [selectedSystemId, setSelectedSystemId] = useState<string>();
 
   const [groupChangeStarted, setGroupChangeStarted] = useState<boolean>(false);
   const [globalFilter, setGlobalFilter] = useState<string>("");
@@ -362,6 +364,9 @@ export const DatamapReportTable = () => {
         header: (props) => <DefaultHeaderCell value="System" {...props} />,
         meta: {
           displayText: "System",
+          onCellClick: (row) => {
+            setSelectedSystemId(row.fides_key);
+          },
         },
       }),
       columnHelper.accessor((row) => row.data_uses, {
@@ -1159,6 +1164,11 @@ export const DatamapReportTable = () => {
         startRange={startRange}
         endRange={endRange}
       />
+
+      <DatamapDrawer
+        selectedSystemId={selectedSystemId}
+        resetSelectedSystemId={() => setSelectedSystemId(undefined)}
+      />
     </Flex>
   );
 };