PROD-2323 Add-tabs-to-display-monitored-and-ignored-schema-in-Data-Detection

CHANGELOG.md

@@ -20,6 +20,8 @@ The types of changes are:
 ### Added
 - Added Gzip Middleware for responses [#5225](https://github.com/ethyca/fides/pull/5225)
 - Adding source and submitted_by fields to privacy requests (Fidesplus) [#5206](https://github.com/ethyca/fides/pull/5206)
+- Added Action Required / Monitored / Unmonitored tabs to Data Detection & Discovery page [#5236](https://github.com/ethyca/fides/pull/5236)
+
 
 ### Changed
 - Removed unused `username` parameter from the Delighted integration configuration [#5220](https://github.com/ethyca/fides/pull/5220)

clients/admin-ui/cypress/e2e/discovery-detection.cy.ts

@@ -165,12 +165,20 @@ describe("discovery and detection", () => {
         }).as("getFilteredDetectionTables");
         cy.intercept(
           "GET",
-          "/api/v1/plus/discovery-monitor/results?*diff_status=monitored&diff_status=muted*",
+          "/api/v1/plus/discovery-monitor/results?diff_status=monitored*",
           {
             fixture:
-              "detection-discovery/results/detection/table-list-full-schema.json",
+              "detection-discovery/results/detection/table-list-monitored-tab-filter.json",
           },
-        ).as("getAllDetectionTables");
+        ).as("getAllMonitoredTables");
+        cy.intercept(
+          "GET",
+          "/api/v1/plus/discovery-monitor/results?diff_status=muted*",
+          {
+            fixture:
+              "detection-discovery/results/detection/table-list-unmonitored-tab-filter.json",
+          },
+        ).as("getAllMutedTables");
         cy.visit(
           `${DATA_DETECTION_ROUTE}/my_bigquery_monitor.prj-bigquery-418515.test_dataset_1`,
         );
@@ -181,12 +189,12 @@ describe("discovery and detection", () => {
         cy.getByTestId("row-my_bigquery_monitor-consent-reports-20").should(
           "exist",
         );
+        cy.getByTestId("row-my_bigquery_monitor-consent-reports-19").should(
+          "exist",
+        );
         cy.getByTestId("row-my_bigquery_monitor-consent-reports-21").should(
           "not.exist",
         );
-        cy.getByTestId("full-schema-toggle").within(() => {
-          cy.get("span").should("not.have.attr", "data-checked");
-        });
       });
 
       it("should navigate to field view on row click", () => {
@@ -198,35 +206,42 @@ describe("discovery and detection", () => {
         );
       });
 
-      describe("full schema view", () => {
-        it("should be able to toggle showing full schema", () => {
-          cy.getByTestId("full-schema-toggle").click();
-          cy.wait("@getAllDetectionTables");
-          cy.getByTestId(
-            "row-my_bigquery_monitor-consent-reports-21-col-status",
-          ).should("contain", "Unmonitored");
+      describe("Tab filter views", () => {
+        it("should be able to switch to monitored tab", () => {
+          cy.getByTestId("tab-Monitored").click();
+          cy.wait("@getAllMonitoredTables");
+
           cy.getByTestId(
             "row-my_bigquery_monitor-consent-reports-22-col-status",
           ).should("contain", "Monitoring");
         });
 
-        it("should allow muted tables to be unmuted", () => {
-          cy.getByTestId("full-schema-toggle").click();
+        it("should allow monitored tables to be muted", () => {
+          cy.getByTestId("tab-Monitored").click();
           cy.getByTestId(
-            "row-my_bigquery_monitor-consent-reports-21-col-actions",
+            "row-my_bigquery_monitor-consent-reports-22-col-actions",
           ).within(() => {
-            cy.getByTestId("action-Monitor").click();
-            cy.wait("@unmuteResource");
+            cy.getByTestId("action-Ignore").click();
+            cy.wait("@ignoreResource");
           });
         });
 
-        it("should allow monitored tables to be muted", () => {
-          cy.getByTestId("full-schema-toggle").click();
+        it("should be able to switch to unmonitored tab", () => {
+          cy.getByTestId("tab-Unmonitored").click();
+          cy.wait("@getAllMutedTables");
+
           cy.getByTestId(
-            "row-my_bigquery_monitor-consent-reports-22-col-actions",
+            "row-my_bigquery_monitor-consent-reports-21-col-status",
+          ).should("contain", "Unmonitored");
+        });
+
+        it("should allow muted tables to be unmuted", () => {
+          cy.getByTestId("tab-Unmonitored").click();
+          cy.getByTestId(
+            "row-my_bigquery_monitor-consent-reports-21-col-actions",
           ).within(() => {
-            cy.getByTestId("action-Ignore").click();
-            cy.wait("@ignoreResource");
+            cy.getByTestId("action-Monitor").click();
+            cy.wait("@unmuteResource");
           });
         });
       });

clients/admin-ui/cypress/fixtures/detection-discovery/results/detection/table-list-monitored-tab-filter.json

@@ -0,0 +1,35 @@
+{
+  "items": [
+    {
+      "urn": "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20",
+      "user_assigned_data_categories": [],
+      "name": "consent-reports-22",
+      "description": null,
+      "monitor_config_id": "my_bigquery_monitor",
+      "updated_at": null,
+      "source_modified": "2024-03-27T21:47:09.915000+00:00",
+      "classifications": [],
+      "diff_status": "monitored",
+      "child_diff_statuses": {},
+      "parent_schema": "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1",
+      "schema_name": "test_dataset_1",
+      "num_rows": 19,
+      "fields": [
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Created",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Fides_user_device",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.User_geography",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Preference",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Notice_title",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Phone_number",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Request_origin",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Method",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Email"
+      ],
+      "database_name": "prj-bigquery-418515"
+    }
+  ],
+  "total": 2,
+  "page": 1,
+  "size": 25,
+  "pages": 1
+}

clients/admin-ui/cypress/fixtures/detection-discovery/results/detection/table-list-unmonitored-tab-filter.json

@@ -0,0 +1,35 @@
+{
+  "items": [
+    {
+      "urn": "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20",
+      "user_assigned_data_categories": [],
+      "name": "consent-reports-21",
+      "description": null,
+      "monitor_config_id": "my_bigquery_monitor",
+      "updated_at": null,
+      "source_modified": "2024-03-27T21:47:09.915000+00:00",
+      "classifications": [],
+      "diff_status": "muted",
+      "child_diff_statuses": {},
+      "parent_schema": "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1",
+      "schema_name": "test_dataset_1",
+      "num_rows": 19,
+      "fields": [
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Created",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Fides_user_device",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.User_geography",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Preference",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Notice_title",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Phone_number",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Request_origin",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Method",
+        "my_bigquery_monitor.prj-bigquery-418515.test_dataset_1.consent-reports-20.Email"
+      ],
+      "database_name": "prj-bigquery-418515"
+    }
+  ],
+  "total": 1,
+  "page": 1,
+  "size": 25,
+  "pages": 1
+}

clients/admin-ui/src/features/common/DataTabsHeader.tsx

@@ -5,15 +5,20 @@ import { FidesTab, TabData, TabListBorder } from "~/features/common/DataTabs";
 interface DataTabsHeaderProps {
   data: Pick<TabData, "label" | "isDisabled">[];
   border?: TabListBorder;
+  borderWidth?: TabsProps["borderWidth"];
 }
 
 const DataTabsHeader = ({
   data,
   border = "partial",
+  borderWidth = 2,
   ...other
 }: DataTabsHeaderProps & Omit<TabsProps, "children">) => (
   <Tabs colorScheme="complimentary" {...other}>
-    <TabList width={border === "partial" ? "max-content" : undefined}>
+    <TabList
+      width={border === "partial" ? "max-content" : undefined}
+      borderBottomWidth={borderWidth}
+    >
       {data.map((tab) => (
         <FidesTab
           key={tab.label}

clients/admin-ui/src/features/data-discovery-and-detection/DetectionResultFilterTabs.tsx

@@ -0,0 +1,26 @@
+import DataTabsHeader from "~/features/common/DataTabsHeader";
+
+interface DetectionResultFilterTabsProps {
+  filterTabIndex: number;
+  onChange: (index: number) => void;
+  filterTabs: { label: string }[];
+}
+
+const DetectionResultFilterTabs = ({
+  filterTabs,
+  onChange,
+  filterTabIndex,
+}: DetectionResultFilterTabsProps) => {
+  return (
+    <DataTabsHeader
+      border="full-width"
+      mb={5}
+      size="sm"
+      data={filterTabs}
+      borderWidth={1}
+      index={filterTabIndex}
+      onChange={onChange}
+    />
+  );
+};
+export default DetectionResultFilterTabs;