Add status field to D&D tables (#5141)

ethyca · Jul 31, 2024 · 135b030 · 135b030
1 parent 7e88b0f
commit 135b030
Show file tree

Hide file tree

Showing 15 changed files with 240 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@ The types of changes are:
 - Added support for special characters in SaaS request payloads [#5099](https://github.com/ethyca/fides/pull/5099)
 - Added support for displaying notices served in the Consent Banner [#5125](https://github.com/ethyca/fides/pull/5125)
 - Added ability to choose whether to use Opt In/Out buttons or Acknowledge button in the Consent Banner [#5125](https://github.com/ethyca/fides/pull/5125)
+- Add "status" field to detection & discovery tables [#5141](https://github.com/ethyca/fides/pull/5141)
 
 ### Changed
 - Moving Privacy Center endpoint logging behind debug flag [#5103](https://github.com/ethyca/fides/pull/5103)

diff --git a/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts b/clients/admin-ui/cypress/e2e/discovery-detection.cy.ts
@@ -32,6 +32,9 @@ describe("discovery and detection", () => {
         cy.getByTestId(
           "row-my_bigquery_monitor-test_dataset_1-col-type"
         ).should("contain", "Dataset");
+        cy.getByTestId(
+          "row-my_bigquery_monitor-test_dataset_1-col-status"
+        ).should("contain", "Pending review");
       });
 
       it("should be able to monitor or ignore", () => {
@@ -61,6 +64,9 @@ describe("discovery and detection", () => {
         cy.getByTestId(
           "row-my_bigquery_monitor-test_dataset_4-col-type"
         ).should("contain", "Dataset");
+        cy.getByTestId(
+          "row-my_bigquery_monitor-test_dataset_1-col-status"
+        ).should("contain", "Pending review");
       });
 
       it("should be able to confirm or ignore", () => {
@@ -90,6 +96,9 @@ describe("discovery and detection", () => {
         cy.getByTestId(
           "row-my_bigquery_monitor-test_dataset_3-col-type"
         ).should("contain", "Dataset");
+        cy.getByTestId(
+          "row-my_bigquery_monitor-test_dataset_1-col-status"
+        ).should("contain", "Pending review");
       });
 
       it("should only be able to ignore", () => {
@@ -119,6 +128,9 @@ describe("discovery and detection", () => {
         cy.getByTestId(
           "row-my_bigquery_monitor-test_dataset_2-col-type"
         ).should("contain", "Classification");
+        cy.getByTestId(
+          "row-my_bigquery_monitor-test_dataset_1-col-status"
+        ).should("contain", "Pending review");
       });
 
       it("should be able to confirm or ignore", () => {
@@ -209,11 +221,11 @@ describe("discovery and detection", () => {
           cy.getByTestId("full-schema-toggle").click();
           cy.wait("@getAllDetectionTables");
           cy.getByTestId(
-            "row-my_bigquery_monitor-consent-reports-21-col-type"
-          ).should("contain", "--");
+            "row-my_bigquery_monitor-consent-reports-21-col-status"
+          ).should("contain", "Unmonitored");
           cy.getByTestId(
-            "row-my_bigquery_monitor-consent-reports-22-col-type"
-          ).should("contain", "--");
+            "row-my_bigquery_monitor-consent-reports-22-col-status"
+          ).should("contain", "Monitoring");
         });
 
         it("should allow muted tables to be unmuted", () => {

diff --git a/clients/admin-ui/src/features/common/table/v2/TableActionBar.tsx b/clients/admin-ui/src/features/common/table/v2/TableActionBar.tsx
@@ -8,6 +8,7 @@ export const TableActionBar = ({ children, ...props }: StackProps) => (
     borderWidth="1px"
     borderBottomWidth="0px"
     borderColor="gray.200"
+    zIndex={11}
     {...props}
   >
     {children}

diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/IndicatorLegend.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/IndicatorLegend.tsx
@@ -0,0 +1,64 @@
+import {
+  Box,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  QuestionIcon,
+  SimpleGrid,
+} from "fidesui";
+
+import {
+  AdditionIndicator,
+  ChangeIndicator,
+  ClassificationIndicator,
+  MonitoredIndicator,
+  MutedIndicator,
+  RemovalIndicator,
+} from "~/features/data-discovery-and-detection/statusIndicators";
+
+const IconLegendTooltip = () => (
+  <Popover isLazy trigger="hover">
+    <PopoverTrigger>
+      <QuestionIcon color="gray.400" />
+    </PopoverTrigger>
+    <PopoverContent
+      bgColor="gray.800"
+      color="white"
+      fontSize="sm"
+      w="auto"
+      border="none"
+    >
+      <PopoverHeader fontWeight="semibold" border="none" pb={0}>
+        Activity legend:
+      </PopoverHeader>
+      <PopoverArrow bgColor="gray.800" />
+      <PopoverBody border="none">
+        <SimpleGrid columns={2} spacing={2}>
+          <Box>
+            <ChangeIndicator /> Change detected
+          </Box>
+          <Box>
+            <ClassificationIndicator /> Data labeled
+          </Box>
+          <Box>
+            <MonitoredIndicator /> Monitoring
+          </Box>
+          <Box>
+            <AdditionIndicator /> Addition detected
+          </Box>
+          <Box>
+            <MutedIndicator /> Unmonitored
+          </Box>
+          <Box>
+            <RemovalIndicator /> Removal detected
+          </Box>
+        </SimpleGrid>
+      </PopoverBody>
+    </PopoverContent>
+  </Popover>
+);
+
+export default IconLegendTooltip;
diff --git a/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx b/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx
@@ -3,10 +3,10 @@ import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { DefaultCell, DefaultHeaderCell } from "~/features/common/table/v2";
 import { RelativeTimestampCell } from "~/features/common/table/v2/cells";
 import DetectionItemAction from "~/features/data-discovery-and-detection/DetectionItemActions";
+import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/ResultStatusBadgeCell";
 import ResultStatusCell from "~/features/data-discovery-and-detection/tables/ResultStatusCell";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 import { StagedResourceType } from "~/features/data-discovery-and-detection/types/StagedResourceType";
-import findResourceChangeType from "~/features/data-discovery-and-detection/utils/findResourceChangeType";
 
 import findProjectFromUrn from "../utils/findProjectFromUrn";
 
@@ -37,6 +37,11 @@ const useDetectionResultColumns = ({
         ),
         header: (props) => <DefaultHeaderCell value="Project" {...props} />,
       }),
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
+      }),
       columnHelper.display({
         id: "type",
         cell: () => <DefaultCell value="Dataset" />,
@@ -68,10 +73,10 @@ const useDetectionResultColumns = ({
         cell: (props) => <ResultStatusCell result={props.row.original} />,
         header: (props) => <DefaultHeaderCell value="Table name" {...props} />,
       }),
-      columnHelper.accessor((row) => findResourceChangeType(row), {
-        id: "type",
-        cell: (props) => <DefaultCell value={props.getValue()} />,
-        header: (props) => <DefaultHeaderCell value="Type" {...props} />,
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
       }),
       columnHelper.accessor((row) => row.monitor_config_id, {
         id: "monitor",
@@ -99,10 +104,10 @@ const useDetectionResultColumns = ({
         cell: (props) => <ResultStatusCell result={props.row.original} />,
         header: (props) => <DefaultHeaderCell value="Field name" {...props} />,
       }),
-      columnHelper.accessor((row) => findResourceChangeType(row), {
-        id: "type",
-        cell: (props) => <DefaultCell value={props.getValue()} />,
-        header: (props) => <DefaultHeaderCell value="Type" {...props} />,
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
       }),
       columnHelper.accessor((row) => row.monitor_config_id, {
         id: "monitor",

diff --git a/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx b/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx
@@ -5,6 +5,7 @@ import {
   IndeterminateCheckboxCell,
   RelativeTimestampCell,
 } from "~/features/common/table/v2/cells";
+import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/ResultStatusBadgeCell";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 import { ResourceChangeType } from "~/features/data-discovery-and-detection/types/ResourceChangeType";
 import { StagedResourceType } from "~/features/data-discovery-and-detection/types/StagedResourceType";
@@ -44,6 +45,11 @@ const useDiscoveryResultColumns = ({
         ),
         header: (props) => <DefaultHeaderCell value="Project" {...props} />,
       }),
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
+      }),
       columnHelper.accessor((resource) => findActivityType(resource), {
         id: "type",
         cell: (props) => <DefaultCell value={props.getValue()} />,
@@ -99,6 +105,11 @@ const useDiscoveryResultColumns = ({
         cell: (props) => <ResultStatusCell result={props.row.original} />,
         header: (props) => <DefaultHeaderCell value="Table name" {...props} />,
       }),
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
+      }),
       columnHelper.display({
         id: "type",
         cell: () => <DefaultCell value="Table" />,
@@ -125,6 +136,11 @@ const useDiscoveryResultColumns = ({
         cell: (props) => <ResultStatusCell result={props.row.original} />,
         header: (props) => <DefaultHeaderCell value="Field name" {...props} />,
       }),
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
+      }),
       columnHelper.display({
         id: "type",
         cell: () => <DefaultCell value="Field" />,

diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/statusIndicators.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/statusIndicators.tsx
@@ -0,0 +1,57 @@
+import { CircleIcon } from "~/features/common/Icon/CircleIcon";
+import { RightDownArrowIcon } from "~/features/common/Icon/RightDownArrowIcon";
+import { RightUpArrowIcon } from "~/features/common/Icon/RightUpArrowIcon";
+import { TagIcon } from "~/features/common/Icon/TagIcon";
+import { ResourceChangeType } from "~/features/data-discovery-and-detection/types/ResourceChangeType";
+
+export const AdditionIndicator = () => (
+  <RightUpArrowIcon
+    color="green.400"
+    boxSize={2}
+    mr={2}
+    data-testid="add-icon"
+  />
+);
+
+export const RemovalIndicator = () => (
+  <RightDownArrowIcon
+    color="red.400"
+    boxSize={2}
+    mr={2}
+    data-testid="remove-icon"
+  />
+);
+
+export const ClassificationIndicator = () => (
+  <TagIcon color="orange.400" boxSize={3} mr={1} data-testid="classify-icon" />
+);
+
+export const ChangeIndicator = () => (
+  <CircleIcon color="blue.400" boxSize={2} mr={2} data-testid="change-icon" />
+);
+
+export const MonitoredIndicator = () => (
+  <CircleIcon
+    color="green.400"
+    boxSize={2}
+    mr={2}
+    data-testid="monitored-icon"
+  />
+);
+
+export const MutedIndicator = () => (
+  <CircleIcon color="red.400" boxSize={2} mr={2} data-testid="muted-icon" />
+);
+
+export const STATUS_INDICATOR_MAP: Record<
+  ResourceChangeType,
+  JSX.Element | null
+> = {
+  [ResourceChangeType.ADDITION]: <AdditionIndicator />,
+  [ResourceChangeType.REMOVAL]: <RemovalIndicator />,
+  [ResourceChangeType.CLASSIFICATION]: <ClassificationIndicator />,
+  [ResourceChangeType.CHANGE]: <ChangeIndicator />,
+  [ResourceChangeType.MONITORED]: <MonitoredIndicator />,
+  [ResourceChangeType.MUTED]: <MutedIndicator />,
+  [ResourceChangeType.NONE]: null,
+};
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx
@@ -22,6 +22,8 @@ import {
 } from "~/features/common/table/v2";
 import { RelativeTimestampCell } from "~/features/common/table/v2/cells";
 import { useGetMonitorResultsQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice";
+import IconLegendTooltip from "~/features/data-discovery-and-detection/IndicatorLegend";
+import ResultStatusBadgeCell from "~/features/data-discovery-and-detection/tables/ResultStatusBadgeCell";
 import ResultStatusCell from "~/features/data-discovery-and-detection/tables/ResultStatusCell";
 import getResourceRowName from "~/features/data-discovery-and-detection/utils/getResourceRowName";
 import { Database, DiffStatus, StagedResource } from "~/types/api";
@@ -126,6 +128,11 @@ const ActivityTable = ({
         ),
         header: (props) => <DefaultHeaderCell value="Project" {...props} />,
       }),
+      columnHelper.display({
+        id: "status",
+        cell: (props) => <ResultStatusBadgeCell result={props.row.original} />,
+        header: (props) => <DefaultHeaderCell value="Status" {...props} />,
+      }),
       columnHelper.accessor((resource) => findActivityType(resource), {
         id: "type",
         cell: (props) => <DefaultCell value={props.getValue()} />,
@@ -173,10 +180,11 @@ const ActivityTable = ({
   return (
     <>
       <TableActionBar>
-        <Flex gap={6}>
+        <Flex gap={6} align="center">
           <Box w={400} flexShrink={0}>
             <SearchInput value={searchQuery} onChange={setSearchQuery} />
           </Box>
+          <IconLegendTooltip />
         </Flex>
       </TableActionBar>
       <FidesTableV2

diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/DetectionResultTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/DetectionResultTable.tsx
@@ -21,6 +21,7 @@ import {
 import { useGetMonitorResultsQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice";
 import useDetectionResultColumns from "~/features/data-discovery-and-detection/hooks/useDetectionResultColumns";
 import useDiscoveryRoutes from "~/features/data-discovery-and-detection/hooks/useDiscoveryRoutes";
+import IconLegendTooltip from "~/features/data-discovery-and-detection/IndicatorLegend";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
 import { StagedResourceType } from "~/features/data-discovery-and-detection/types/StagedResourceType";
 import { findResourceType } from "~/features/data-discovery-and-detection/utils/findResourceType";
@@ -169,9 +170,12 @@ const DetectionResultTable = ({ resourceUrn }: MonitorResultTableProps) => {
           justifyContent="space-between"
           width="full"
         >
-          <Box w={400} flexShrink={0}>
-            <SearchInput value={searchQuery} onChange={setSearchQuery} />
-          </Box>
+          <Flex gap={6} align="center">
+            <Box w={400} flexShrink={0}>
+              <SearchInput value={searchQuery} onChange={setSearchQuery} />
+            </Box>
+            <IconLegendTooltip />
+          </Flex>
           <Flex direction="row" alignItems="center">
             <Switch
               size="sm"

diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryResultTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/DiscoveryResultTable.tsx
@@ -21,6 +21,7 @@ import {
 import { useGetMonitorResultsQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice";
 import useDiscoveryResultColumns from "~/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns";
 import useDiscoveryRoutes from "~/features/data-discovery-and-detection/hooks/useDiscoveryRoutes";
+import IconLegendTooltip from "~/features/data-discovery-and-detection/IndicatorLegend";
 import DiscoveryFieldBulkActions from "~/features/data-discovery-and-detection/tables/DiscoveryFieldBulkActions";
 import DiscoveryTableBulkActions from "~/features/data-discovery-and-detection/tables/DiscoveryTableBulkActions";
 import { DiscoveryMonitorItem } from "~/features/data-discovery-and-detection/types/DiscoveryMonitorItem";
@@ -157,10 +158,11 @@ const DiscoveryResultTable = ({ resourceUrn }: MonitorResultTableProps) => {
   return (
     <>
       <TableActionBar>
-        <Flex gap={6}>
+        <Flex gap={6} align="center">
           <Box w={400} flexShrink={0}>
             <SearchInput value={searchQuery} onChange={setSearchQuery} />
           </Box>
+          <IconLegendTooltip />
           {!!selectedUrns.length && (
             <Flex align="center">
               {resourceType === StagedResourceType.TABLE && (