Move data map reporting table out of beta (#4963)

ethyca · Jun 7, 2024 · 2853d11 · 2853d11
1 parent bcbcf52
commit 2853d11
Show file tree

Hide file tree

Showing 16 changed files with 15 additions and 1,021 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,7 @@ The types of changes are:
 - Update Privacy Center toast text for consistent capitalization [#4936](https://github.com/ethyca/fides/pull/4936)
 - Update Custom Fields table and Domain Verification table to use FidesTable V2. Remove V1 components. [#4932](https://github.com/ethyca/fides/pull/4932)
 - Updated how Fields are generated for DynamoDB, improved error handling [#4943](https://github.com/ethyca/fides/pull/4943)
+- Move new data map reporting table out of beta and remove old table from Data Lineage map. [#4963](https://github.com/ethyca/fides/pull/4963)
 
 ### Fixed
 - Fixed an issue where the test integration action failed for the Zendesk integration [#4929](https://github.com/ethyca/fides/pull/4929)

diff --git a/clients/admin-ui/cypress/e2e/datamap.cy.ts b/clients/admin-ui/cypress/e2e/datamap.cy.ts
@@ -7,33 +7,10 @@ describe("Datamap table and spatial view", () => {
     stubPlus(true);
   });
 
-  it("Can render only render one view at a time", () => {
+  it("Can render spatial view", () => {
     cy.visit("/datamap");
     cy.wait("@getDatamap");
-
-    // Only the spatial view should be visible first
-    cy.getByTestId("cytoscape-graph");
-    cy.getByTestId("datamap-table").should("not.exist");
-
-    // Now table view
-    cy.getByTestId("table-btn").click();
-    cy.getByTestId("datamap-table");
-    cy.getByTestId("cytoscape-graph").should("not.exist");
-
-    // Now only the spatial view
-    cy.getByTestId("map-btn").click();
-    cy.getByTestId("cytoscape-graph");
-    cy.getByTestId("datamap-table").should("not.exist");
-
-    // Now table view
-    cy.getByTestId("table-btn").click();
-    cy.getByTestId("datamap-table");
-    cy.getByTestId("cytoscape-graph").should("not.exist");
-
-    // Clicking on the table view again should keep the table view open
-    cy.getByTestId("table-btn").click();
-    cy.getByTestId("datamap-table");
-    cy.getByTestId("cytoscape-graph").should("not.exist");
+    cy.getByTestId("cytoscape-graph").should("exist");
   });
 
   it("Renders a modal to prompt the user to get started when there is no datamap yet", () => {

diff --git a/clients/admin-ui/package.json b/clients/admin-ui/package.json
@@ -35,7 +35,6 @@
     "@reduxjs/toolkit": "^1.9.3",
     "@tanstack/react-table": "^8.10.7",
     "chakra-react-select": "^3.3.7",
-    "csv-stringify": "^6.3.0",
     "cytoscape": "^3.23.0",
     "cytoscape-klay": "^3.1.4",
     "date-fns": "^2.29.3",
@@ -53,8 +52,8 @@
     "msw": "^1.2.1",
     "narrow-minded": "^1.2.1",
     "next": "^12.3.4",
-    "query-string": "^9.0.0",
     "next-transpile-modules": "^10.0.0",
+    "query-string": "^9.0.0",
     "react": "^17.0.2",
     "react-cytoscapejs": "^2.0.0",
     "react-dnd": "^15.0.1",
@@ -65,7 +64,6 @@
     "react-table": "^7.8.0",
     "redux-persist": "^6.0.0",
     "whatwg-fetch": "^3.6.2",
-    "xlsx": "^0.18.5",
     "yup": "^0.32.11"
   },
   "devDependencies": {

diff --git a/clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts b/clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts
@@ -66,9 +66,6 @@ describe("configureNavGroups", () => {
     const navGroups = configureNavGroups({
       config: NAV_CONFIG,
       hasPlus: true,
-      flags: {
-        datamapReportingPage: true,
-      },
       userScopes: ALL_SCOPES,
     });
 

diff --git a/clients/admin-ui/src/features/common/nav/v2/nav-config.ts b/clients/admin-ui/src/features/common/nav/v2/nav-config.ts
@@ -92,7 +92,6 @@ export const NAV_CONFIG: NavConfigGroup[] = [
         path: routes.REPORTING_DATAMAP_ROUTE,
         requiresPlus: true,
         scopes: [ScopeRegistryEnum.DATAMAP_READ],
-        requiresFlag: "datamapReportingPage",
       },
     ],
   },

diff --git a/clients/admin-ui/src/features/datamap/Datamap.tsx b/clients/admin-ui/src/features/datamap/Datamap.tsx
@@ -9,8 +9,7 @@ import { DatamapGraphContext } from "~/features/datamap/datamap-graph/DatamapGra
 import { useTableInstance } from "~/features/datamap/datamap-table/hooks/";
 import SettingsBar from "~/features/datamap/SettingsBar";
 
-import { selectIsGettingStarted, selectIsMapOpen } from "./datamap.slice";
-import DatamapTable from "./datamap-table/DatamapTable";
+import { selectIsGettingStarted } from "./datamap.slice";
 import GetStarted from "./GetStarted";
 
 const SpatialDatamap = dynamic(
@@ -19,7 +18,6 @@ const SpatialDatamap = dynamic(
 );
 
 const useHome = () => {
-  const isMapOpen = useAppSelector(selectIsMapOpen);
   const isGettingStarted = useAppSelector(selectIsGettingStarted);
   const datamapGraphRef = useContext(DatamapGraphContext);
 
@@ -51,7 +49,6 @@ const useHome = () => {
   }, [attemptAction, datamapGraphRef, selectedSystemId]);
 
   return {
-    isMapOpen,
     isGettingStarted,
     selectedSystemId,
     setSelectedSystemId,
@@ -61,7 +58,6 @@ const useHome = () => {
 
 const Datamap = () => {
   const {
-    isMapOpen,
     isGettingStarted,
     setSelectedSystemId,
     selectedSystemId,
@@ -94,16 +90,9 @@ const Datamap = () => {
         borderStyle="solid"
         borderColor="gray.200"
       >
-        {isMapOpen ? (
-          <Box flex={1} minWidth="50%" maxWidth="100%">
-            <SpatialDatamap setSelectedSystemId={setSelectedSystemId} />
-          </Box>
-        ) : null}
-        {!isMapOpen ? (
-          <Box flex={1} minWidth="50%" maxWidth="100%">
-            <DatamapTable setSelectedSystemId={setSelectedSystemId} />
-          </Box>
-        ) : null}
+        <Box flex={1} minWidth="50%" maxWidth="100%">
+          <SpatialDatamap setSelectedSystemId={setSelectedSystemId} />
+        </Box>
         <DatamapDrawer
           selectedSystemId={selectedSystemId}
           resetSelectedSystemId={resetSelectedSystemId}

diff --git a/clients/admin-ui/src/features/datamap/SettingsBar.tsx b/clients/admin-ui/src/features/datamap/SettingsBar.tsx
@@ -1,83 +1,36 @@
 import {
   Button,
-  ButtonGroup,
   FilterLightIcon,
   Flex,
-  IconButton,
-  Menu,
-  MenuButton,
   Tag,
   Text,
   useDisclosure,
 } from "fidesui";
 import React, { useContext } from "react";
-import { useDispatch } from "react-redux";
 
-import { useAppSelector } from "~/app/hooks";
 import { useFeatures } from "~/features/common/features";
-import { DownloadLightIcon, GearLightIcon } from "~/features/common/Icon";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
-import { selectIsMapOpen, setView } from "~/features/datamap/datamap.slice";
 import DatamapTableContext from "~/features/datamap/datamap-table/DatamapTableContext";
 import GlobalFilter from "~/features/datamap/datamap-table/filters/global-accordion-filter/global-accordion-filter";
-import ExportModal from "~/features/datamap/modals/ExportModal";
 import FilterModal from "~/features/datamap/modals/FilterModal";
-import SettingsModal from "~/features/datamap/modals/SettingsModal";
 
 const useSettingsBar = () => {
-  const isMapOpen = useAppSelector(selectIsMapOpen);
-
-  const {
-    isOpen: isExportModalOpen,
-    onOpen: onExportModalOpen,
-    onClose: onExportModalClose,
-  } = useDisclosure();
-
-  const {
-    isOpen: isSettingsModalOpen,
-    onOpen: onSettingsModalOpen,
-    onClose: onSettingsModalClose,
-  } = useDisclosure();
-
   const {
     isOpen: isFilterModalOpen,
     onOpen: onFilterModalOpen,
     onClose: onFilterModalClose,
   } = useDisclosure();
 
-  const onExportClick = () => {
-    onExportModalOpen();
-  };
-
   return {
-    isExportModalOpen,
-    isMapOpen,
-    isSettingsModalOpen,
     isFilterModalOpen,
-    onSettingsModalOpen,
-    onSettingsModalClose,
     onFilterModalOpen,
     onFilterModalClose,
-    onExportClick,
-    onExportModalClose,
-    onExportModalOpen,
   };
 };
 
 const SettingsBar: React.FC = () => {
-  const dispatch = useDispatch();
-  const {
-    isExportModalOpen,
-    isFilterModalOpen,
-    isSettingsModalOpen,
-    onSettingsModalOpen,
-    onSettingsModalClose,
-    onFilterModalOpen,
-    onFilterModalClose,
-    onExportClick,
-    onExportModalClose,
-    isMapOpen,
-  } = useSettingsBar();
+  const { isFilterModalOpen, onFilterModalOpen, onFilterModalClose } =
+    useSettingsBar();
 
   const { tableInstance } = useContext(DatamapTableContext);
   const { systemsCount: totalSystemsCount, dictionaryService: compassEnabled } =
@@ -125,7 +78,6 @@ const SettingsBar: React.FC = () => {
             backgroundColor="#824EF2"
             color="white"
             size="sm"
-            marginRight={4}
             onClick={onFilterModalOpen}
             _hover={{ opacity: 0.8 }}
             _active={{
@@ -145,52 +97,9 @@ const SettingsBar: React.FC = () => {
               </Tag>
             ) : null}
           </Button>
-          <ButtonGroup isAttached size="sm" marginRight={4}>
-            <Button
-              colorScheme={isMapOpen ? "primary" : undefined}
-              onClick={() => {
-                dispatch(setView("map"));
-              }}
-              data-testid="map-btn"
-            >
-              Map
-            </Button>
-            <Button
-              colorScheme={!isMapOpen ? "primary" : undefined}
-              onClick={() => {
-                dispatch(setView("table"));
-              }}
-              data-testid="table-btn"
-            >
-              Table
-            </Button>
-          </ButtonGroup>
-          <IconButton
-            aria-label="Open Column Settings"
-            variant="ghost"
-            size="sm"
-            marginRight={1}
-            onClick={onSettingsModalOpen}
-            icon={<GearLightIcon />}
-          />
-          <Menu>
-            <MenuButton
-              as={IconButton}
-              aria-label="Export data"
-              icon={<DownloadLightIcon />}
-              onClick={onExportClick}
-              size="sm"
-              variant="ghost"
-            />
-          </Menu>
         </Flex>
       </Flex>
       <FilterModal isOpen={isFilterModalOpen} onClose={onFilterModalClose} />
-      <ExportModal isOpen={isExportModalOpen} onClose={onExportModalClose} />
-      <SettingsModal
-        isOpen={isSettingsModalOpen}
-        onClose={onSettingsModalClose}
-      />
     </>
   );
 };

diff --git a/clients/admin-ui/src/features/datamap/constants.ts b/clients/admin-ui/src/features/datamap/constants.ts
@@ -15,7 +15,6 @@ export enum ExportFormat {
   xlsx = "xlsx",
 }
 
-export const SYSTEM_FIDES_KEY_COLUMN_ID = "system.fides_key";
 export const SYSTEM_NAME = "system.name";
 export const SYSTEM_PRIVACY_DECLARATION_DATA_USE_NAME =
   "system.privacy_declaration.data_use.name";

diff --git a/clients/admin-ui/src/features/datamap/datamap-table/DatamapTable.tsx b/clients/admin-ui/src/features/datamap/datamap-table/DatamapTable.tsx