Show a "systems displayed" count on datamap map & table reporting page (

#4752)
ethyca · Mar 28, 2024 · fa8bcfe · fa8bcfe
1 parent d0e813c
commit fa8bcfe
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,6 +35,7 @@ The types of changes are:
 - Update when GPP API reports signal status: ready [#4635](https://github.com/ethyca/fides/pull/4635)
 - Update non-dismissable TCF and notice banners to show a black overlay and prevent scrolling [#4748](https://github.com/ethyca/fidesplus/pull/4748)
 - Cleanup config vars for preview in Admin-UI [#4745](https://github.com/ethyca/fides/pull/4745)
+- Show a "systems displayed" count on datamap map & table reporting page [#4752](https://github.com/ethyca/fides/pull/4752)
 
 ### Fixed
 
@@ -45,6 +46,7 @@ The types of changes are:
 - Initialization issues with ExperienceNotices (#4723)[https://github.com/ethyca/fides/pull/4723]
 - Re-add CORS origin regex field to admin UI (#4742)[https://github.com/ethyca/fides/pull/4742]
 
+
 ### Developer Experience
 - Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744)
 - Update Cookie House to support for additional locations (Canada, Quebec, EEA) and a "property_id" override [#4750](https://github.com/ethyca/fides/pull/4750)

diff --git a/clients/admin-ui/src/features/datamap/Datamap.tsx b/clients/admin-ui/src/features/datamap/Datamap.tsx
@@ -9,11 +9,9 @@ import { DatamapGraphContext } from "~/features/datamap/datamap-graph/DatamapGra
 import { useTableInstance } from "~/features/datamap/datamap-table/hooks/";
 import SettingsBar from "~/features/datamap/SettingsBar";
 
-import { useFeatures } from "../common/features";
 import { selectIsGettingStarted, selectIsMapOpen } from "./datamap.slice";
 import DatamapTable from "./datamap-table/DatamapTable";
 import GetStarted from "./GetStarted";
-import GVLDatamapNotice from "./GVLDatamapNotice";
 
 const SpatialDatamap = dynamic(
   () => import("~/features/datamap/SpatialDatamap"),
@@ -69,7 +67,6 @@ const Datamap = () => {
     selectedSystemId,
     resetSelectedSystemId,
   } = useHome();
-  const { tcf: isTcfEnabled } = useFeatures();
   const { isLoading } = useTableInstance();
   if (isLoading) {
     return (
@@ -84,38 +81,35 @@ const Datamap = () => {
   }
 
   return (
-    <>
-      {isTcfEnabled ? <GVLDatamapNotice /> : null}
-      <Flex direction="column" height="100%">
-        <Box marginBottom={3} marginRight={10}>
-          <SettingsBar />
-        </Box>
-        <Flex
-          position="relative"
-          flex={1}
-          direction="row"
-          overflow="auto"
-          borderWidth="1px"
-          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}
-          <DatamapDrawer
-            selectedSystemId={selectedSystemId}
-            resetSelectedSystemId={resetSelectedSystemId}
-          />
-        </Flex>
+    <Flex direction="column" height="100%">
+      <Box marginBottom={3} marginRight={10}>
+        <SettingsBar />
+      </Box>
+      <Flex
+        position="relative"
+        flex={1}
+        direction="row"
+        overflow="auto"
+        borderWidth="1px"
+        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}
+        <DatamapDrawer
+          selectedSystemId={selectedSystemId}
+          resetSelectedSystemId={resetSelectedSystemId}
+        />
       </Flex>
-    </>
+    </Flex>
   );
 };
 

diff --git a/clients/admin-ui/src/features/datamap/GVLDatamapNotice.tsx b/clients/admin-ui/src/features/datamap/GVLDatamapNotice.tsx
diff --git a/clients/admin-ui/src/features/datamap/SettingsBar.tsx b/clients/admin-ui/src/features/datamap/SettingsBar.tsx
@@ -7,13 +7,16 @@ import {
   Menu,
   MenuButton,
   Tag,
+  Text,
   useDisclosure,
 } from "@fidesui/react";
 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";
@@ -77,10 +80,13 @@ const SettingsBar: React.FC = () => {
   } = useSettingsBar();
 
   const { tableInstance } = useContext(DatamapTableContext);
+  const { systemsCount: totalSystemsCount, dictionaryService: compassEnabled } =
+    useFeatures();
   if (!tableInstance) {
     return null;
   }
 
+  const filteredSystemsCount = tableInstance.rows?.length || 0;
   const totalFiltersApplied = tableInstance?.state.filters
     .map<boolean[]>((f) => Object.values(f.value))
     .flatMap((f) => f)
@@ -103,6 +109,16 @@ const SettingsBar: React.FC = () => {
           />
         </Flex>
         <Flex>
+          {totalSystemsCount > 0 ? (
+            <Flex alignItems="center" borderRadius="md" gap={1} marginRight={4}>
+              <Text fontSize="xs">
+                {filteredSystemsCount} of {totalSystemsCount} systems displayed
+              </Text>
+              {compassEnabled ? (
+                <QuestionTooltip label="Note that Global Vendor List (GVL) and Additional Consent (AC) systems are not currently included in these reports" />
+              ) : null}
+            </Flex>
+          ) : null}
           <Button
             aria-label="Open Filter Settings"
             variant="solid"

diff --git a/clients/admin-ui/src/pages/consent/configure/add-vendors.tsx b/clients/admin-ui/src/pages/consent/configure/add-vendors.tsx
@@ -15,7 +15,7 @@ const Header = () => (
 );
 
 const AddMultipleVendorsPage: NextPage = () => (
-  <Layout title="Describe your vendor">
+  <Layout title="Choose vendors">
     <BackButton backPath={CONFIGURE_CONSENT_ROUTE} />
     <Header />
     <Box w={{ base: "100%", md: "75%" }}>