From af64ee95ed66395289b7b4c1c9b79113d7e8a181 Mon Sep 17 00:00:00 2001 From: Jason Gill Date: Thu, 16 Jan 2025 15:11:40 -0700 Subject: [PATCH] Action Center: Webmonitor Assets View (#5676) --- .../admin-ui/cypress/e2e/action-center.cy.ts | 153 ++++++- .../system-aggregate-results.json | 4 +- .../activity-center/system-asset-results.json | 400 ++++++++++++++++++ clients/admin-ui/cypress/support/stubs.ts | 14 +- .../features/common/dropdown/SystemSelect.tsx | 57 +++ .../src/features/common/hooks/useAlert.tsx | 9 +- .../src/features/common/nav/v2/routes.ts | 2 + .../features/common/table/v2/FidesCell.tsx | 4 +- .../features/common/table/v2/FidesTable.tsx | 7 +- .../src/features/common/table/v2/util.ts | 4 +- .../ClassificationCategoryBadge.tsx | 2 +- .../action-center/action-center.slice.ts | 48 +++ .../hooks/useDiscoveredAssetsColumns.tsx | 113 +++++ .../useDiscoveredSystemAggregateColumns.tsx | 14 +- .../tables/DiscoveredAssetsTable.tsx | 238 +++++++++++ .../tables/DiscoveredSystemAggregateTable.tsx | 26 +- .../cells/DiscoveredAssetActionsCell.tsx | 76 ++++ .../tables/cells/DiscoveryStatusBadgeCell.tsx | 42 ++ .../action-center/tables/cells/SystemCell.tsx | 83 ++++ .../action-center/{types.ts => types.d.ts} | 1 + .../discovery-detection.slice.ts | 6 +- .../[monitorId]/[systemId]/index.tsx | 35 ++ .../action-center/[monitorId]/index.tsx | 2 +- .../api/models/StagedResourceAPIResponse.ts | 4 + clients/fidesui/src/hoc/CustomSelect.tsx | 4 +- 25 files changed, 1307 insertions(+), 41 deletions(-) create mode 100644 clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-asset-results.json create mode 100644 clients/admin-ui/src/features/common/dropdown/SystemSelect.tsx create mode 100644 clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useDiscoveredAssetsColumns.tsx create mode 100644 clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredAssetsTable.tsx create mode 100644 clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredAssetActionsCell.tsx create mode 100644 clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveryStatusBadgeCell.tsx create mode 100644 clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/SystemCell.tsx rename clients/admin-ui/src/features/data-discovery-and-detection/action-center/{types.ts => types.d.ts} (98%) create mode 100644 clients/admin-ui/src/pages/data-discovery/action-center/[monitorId]/[systemId]/index.tsx diff --git a/clients/admin-ui/cypress/e2e/action-center.cy.ts b/clients/admin-ui/cypress/e2e/action-center.cy.ts index 1f816ae3b3..3cc201c343 100644 --- a/clients/admin-ui/cypress/e2e/action-center.cy.ts +++ b/clients/admin-ui/cypress/e2e/action-center.cy.ts @@ -51,10 +51,10 @@ describe("Action center", () => { const integrationMonitorKey = "My_New_BQ_Monitor"; beforeEach(() => { cy.visit(ACTION_CENTER_ROUTE); + cy.wait("@getMonitorResults"); }); it("should render the current monitor results", () => { cy.get("[data-testid='Action center']").should("exist"); - cy.wait("@getMonitorResults"); cy.get("[data-testid*='monitor-result-']").should("have.length", 3); cy.get("[data-testid^='monitor-result-']").each((result) => { const monitorKey = result @@ -83,7 +83,6 @@ describe("Action center", () => { ); }); it("should have appropriate actions for web monitors", () => { - cy.wait("@getMonitorResults"); // Add button // TODO: [HJ-337] uncomment when Add button is implemented // cy.getByTestId(`add-button-${webMonitorKey}`).should("exist"); @@ -95,7 +94,6 @@ describe("Action center", () => { ); }); it.skip("Should have appropriate actions for Integrations monitors", () => { - cy.wait("@getMonitorResults"); // Classify button cy.getByTestId(`review-button-${integrationMonitorKey}`).should( "have.attr", @@ -106,7 +104,6 @@ describe("Action center", () => { cy.getByTestId(`ignore-button-${integrationMonitorKey}`).should("exist"); }); it.skip("Should have appropriate actions for SSO monitors", () => { - cy.wait("@getMonitorResults"); // Add button cy.getByTestId(`add-button-${webMonitorKey}`).should("exist"); // Ignore button @@ -121,6 +118,7 @@ describe("Action center", () => { const webMonitorKey = "my_web_monitor_1"; beforeEach(() => { cy.visit(`${ACTION_CENTER_ROUTE}/${webMonitorKey}`); + cy.wait("@getSystemAggregateResults"); }); it("should display a breadcrumb", () => { cy.getByTestId("page-breadcrumb").within(() => { @@ -131,26 +129,28 @@ describe("Action center", () => { }); }); it("should render the aggregated system results in a table", () => { - cy.wait("@getSystemAggregateResults"); + cy.getByTestId("search-bar").should("exist"); + cy.getByTestId("pagination-btn").should("exist"); cy.getByTestId("column-system_name").should("exist"); cy.getByTestId("column-total_updates").should("exist"); - cy.getByTestId("column-data_use").should("exist"); + // TODO: [HJ-356] uncomment when data use column is implemented + // cy.getByTestId("column-data_use").should("exist"); cy.getByTestId("column-locations").should("exist"); cy.getByTestId("column-domains").should("exist"); - cy.getByTestId("column-actions").should("exist"); - cy.getByTestId("search-bar").should("exist"); - cy.getByTestId("pagination-btn").should("exist"); + // TODO: [HJ-343] uncomment when actions column is implemented + // cy.getByTestId("column-actions").should("exist"); cy.getByTestId("row-0-col-system_name").within(() => { cy.getByTestId("change-icon").should("exist"); // new result cy.contains("Uncategorized assets").should("exist"); }); - // data use column should be empty for uncategorized assets + // TODO: [HJ-356] uncomment when data use column is implemented + /* // data use column should be empty for uncategorized assets cy.getByTestId("row-0-col-data_use").children().should("have.length", 0); cy.getByTestId("row-1-col-system_name").within(() => { cy.getByTestId("change-icon").should("not.exist"); // existing result cy.contains("Google Tag Manager").should("exist"); - }); - // TODO: data use column should not be empty for other assets + }); */ + // TODO: [HJ-356] data use column should not be empty for other assets // cy.getByTestId("row-1-col-data_use").children().should("not.have.length", 0); // multiple locations @@ -166,10 +166,129 @@ describe("Action center", () => { "analytics.google.com", ); }); - // it("should navigate to table view on row click", () => { - // cy.getByTestId("row-1").click(); - // cy.url().should("contain", "fds.1046"); - // cy.getByTestId("page-breadcrumb").should("contain", "fds.1046"); - // }); + it("should navigate to table view on row click", () => { + cy.getByTestId("row-1").click(); + cy.url().should( + "contain", + "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + ); + cy.getByTestId("page-breadcrumb").should( + "contain", + "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + ); + }); + }); + + describe("Action center system assets results", () => { + const webMonitorKey = "my_web_monitor_1"; + const systemId = "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88"; + beforeEach(() => { + cy.visit(`${ACTION_CENTER_ROUTE}/${webMonitorKey}/${systemId}`); + cy.wait("@getSystemAssetResults"); + }); + it("should render asset results view", () => { + cy.getByTestId("page-breadcrumb").should("contain", systemId); + cy.getByTestId("search-bar").should("exist"); + cy.getByTestId("pagination-btn").should("exist"); + cy.getByTestId("bulk-actions-menu").should("be.disabled"); + + // table columns + cy.getByTestId("column-select").should("exist"); + cy.getByTestId("column-name").should("exist"); + cy.getByTestId("column-resource_type").should("exist"); + cy.getByTestId("column-system").should("exist"); + // TODO: [HJ-369] uncomment when data use column is implemented + // cy.getByTestId("column-data_use").should("exist"); + cy.getByTestId("column-locations").should("exist"); + cy.getByTestId("column-domain").should("exist"); + // TODO: [HJ-344] uncomment when Discovery column is implemented + /* cy.getByTestId("column-with_consent").should("exist"); + cy.getByTestId("row-4-col-with_consent") + .contains("Without consent") + .realHover(); + cy.get(".ant-tooltip-inner").should("contain", "January"); */ + cy.getByTestId("column-actions").should("exist"); + cy.getByTestId("row-0-col-actions").within(() => { + cy.getByTestId("add-btn").should("exist"); + cy.getByTestId("ignore-btn").should("exist"); + }); + }); + it.skip("should allow adding a system on uncategorized assets", () => { + // TODO: uncategorized assets are not yet available for testing + }); + it("should allow editing a system on categorized assets", () => { + cy.getByTestId("page-breadcrumb").should("contain", systemId); // little hack to make sure the systemId is available before proceeding + cy.getByTestId("row-3-col-system").within(() => { + cy.getByTestId("system-badge").click(); + }); + cy.wait("@getSystemsPaginated"); + cy.getByTestId("system-select").antSelect("Fidesctl System"); + cy.wait("@setAssetSystem"); + cy.getByTestId("system-select").should("not.exist"); + + // Wait for previous UI animations to reset or Cypress chokes on the next part + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(100); + + // Now test with search + cy.getByTestId("row-2-col-system").within(() => { + cy.getByTestId("system-badge").click(); + cy.getByTestId("system-select").find("input").type("demo m"); + cy.wait("@getSystemsWithSearch").then((interception) => { + expect(interception.request.query.search).to.eq("demo m"); + }); + }); + cy.wait("@getSystemsPaginated"); + cy.getByTestId("system-select").antSelect("Demo Marketing System"); + cy.wait("@setAssetSystem"); + cy.getByTestId("success-alert").should("exist"); + cy.getByTestId("system-select").should("not.exist"); + }); + it("should add individual assets", () => { + cy.getByTestId("row-0-col-actions").within(() => { + cy.getByTestId("add-btn").click({ force: true }); + }); + cy.wait("@addAssets"); + cy.getByTestId("success-alert").should("exist"); + }); + it("should ignore individual assets", () => { + cy.getByTestId("row-0-col-actions").within(() => { + cy.getByTestId("ignore-btn").click({ force: true }); + }); + cy.wait("@ignoreAssets"); + cy.getByTestId("success-alert").should("exist"); + }); + it("should bulk add assets", () => { + cy.getByTestId("bulk-actions-menu").should("be.disabled"); + cy.getByTestId("row-0-col-select").find("label").click(); + cy.getByTestId("row-2-col-select").find("label").click(); + cy.getByTestId("row-3-col-select").find("label").click(); + cy.getByTestId("selected-count").should("contain", "3 selected"); + cy.getByTestId("bulk-actions-menu").should("not.be.disabled"); + cy.getByTestId("bulk-actions-menu").click(); + cy.getByTestId("bulk-add").click(); + cy.wait("@addAssets"); + cy.getByTestId("success-alert").should("exist"); + }); + it("should bulk ignore assets", () => { + cy.getByTestId("bulk-actions-menu").should("be.disabled"); + cy.getByTestId("row-0-col-select").find("label").click(); + cy.getByTestId("row-2-col-select").find("label").click(); + cy.getByTestId("row-3-col-select").find("label").click(); + cy.getByTestId("selected-count").should("contain", "3 selected"); + cy.getByTestId("bulk-actions-menu").should("not.be.disabled"); + cy.getByTestId("bulk-actions-menu").click(); + cy.getByTestId("bulk-ignore").click(); + cy.wait("@ignoreAssets"); + cy.getByTestId("success-alert").should("exist"); + }); + it.skip("should add all assets", () => { + // TODO: [HJ-343] unskip when add all is implemented + cy.getByTestId("add-all").click(); + cy.getByTestId("add-all").should("have.class", "ant-btn-loading"); + cy.wait("@addAssets"); + cy.url().should("not.contain", systemId); + cy.getByTestId("success-alert").should("exist"); + }); }); }); diff --git a/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-aggregate-results.json b/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-aggregate-results.json index 3bcc4b2328..566880f701 100644 --- a/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-aggregate-results.json +++ b/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-aggregate-results.json @@ -40,9 +40,9 @@ ] }, { - "id": "system_key-72649f03-7a30-4758-9772-e74fca3b6788", + "id": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", "name": "Google Tag Manager", - "system_key": "system_key-72649f03-7a30-4758-9772-e74fca3b6788", + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", "vendor_id": "fds.1046", "total_updates": 10, "locations": ["USA"], diff --git a/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-asset-results.json b/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-asset-results.json new file mode 100644 index 0000000000..e0bbb4d241 --- /dev/null +++ b/clients/admin-ui/cypress/fixtures/detection-discovery/activity-center/system-asset-results.json @@ -0,0 +1,400 @@ +{ + "items": [ + { + "urn": "my_web_monitor_1.GET.td.doubleclick.net.https://td.doubleclick.net/td/rul/11020051272", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "11020051272", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.504650Z", + "diff_status": "addition", + "domain": "td.doubleclick.net", + "parent": "https://www.googletagmanager.com/gtag/js?id=AW-11020051272&l=dataLayer&cx=c>m=45je51d0v9134906606za200", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA", "Canada"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://td.doubleclick.net/td/rul/11020051272", + "mime_type": "text/html", + "method": "GET" + }, + { + "urn": "my_web_monitor_1.GET.td.doubleclick.net.https://td.doubleclick.net/td/rul/697301175", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "697301175", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.499796Z", + "diff_status": "addition", + "domain": "td.doubleclick.net", + "parent": "https://www.googletagmanager.com/gtag/js?id=AW-697301175&l=dataLayer&cx=c>m=45je51d0v9134906606za200", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA", "Canada"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://td.doubleclick.net/td/rul/697301175", + "mime_type": "text/html", + "method": "GET" + }, + { + "urn": "my_web_monitor_1.POST.www.google.com.https://www.google.com/ccm/collect", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "collect", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.423885Z", + "diff_status": "addition", + "domain": "www.google.com", + "parent": "https://www.googletagmanager.com/gtm.js?id=GTM-PZHT655", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA", "Canada"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.google.com/ccm/collect", + "size": 0, + "method": "POST" + }, + { + "urn": "my_web_monitor_1.GET.www.googletagmanager.com.https://www.googletagmanager.com/gtag/destination", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "destination", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.427163Z", + "diff_status": "addition", + "domain": "www.googletagmanager.com", + "parent": "https://www.googletagmanager.com/gtm.js?id=GTM-PZHT655", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.googletagmanager.com/gtag/destination", + "mime_type": "application/javascript", + "size": 103688, + "method": "GET" + }, + { + "urn": "my_web_monitor_1.GET.www.googletagmanager.com.https://www.googletagmanager.com/gtm.js", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "gtm.js", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.403801Z", + "diff_status": "addition", + "domain": "www.googletagmanager.com", + "parent": null, + "parent_domain": null, + "locations": ["USA"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.googletagmanager.com/gtm.js", + "mime_type": "application/javascript", + "size": 110055, + "method": "GET" + }, + { + "urn": "my_web_monitor_1.GET.www.google.com.https://www.google.com/pagead/1p-user-list/11020051272/", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "https://www.google.com/pagead/1p-user-list/11020051272/", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.513011Z", + "diff_status": "addition", + "domain": "www.google.com", + "parent": "https://googleads.g.doubleclick.net/pagead/viewthroughconversion/11020051272/?random=1737048446598&cv=11&fst=1737048446598&bg=ffffff&guid=ON&async=1>m=45be51d0v897313980za200zb9134906606&gcd=13l3l3l3l1l1&dma=0&tag_exp=101925629~102067555~102067808~102081485~102123608~102198178&u_w=1536&u_h=864&url=https%3A%2F%2Fethyca.com%2F&hn=www.googleadservices.com&frm=0&tiba=Ethyca%20%7C%20Home&did=dZTQ1Zm&gdid=dZTQ1Zm&npa=0&pscdl=noapi&auid=1657606680.1737048443&uaa=x86&uab=64&uafvl=Google%2520Chrome%3B131.0.6778.109%7CChromium%3B131.0.6778.109%7CNot_A%2520Brand%3B24.0.0.0&uamb=0&uam=&uap=Windows&uapv=10.0.0&uaw=0&fledge=1&data=event%3Dgtag.config&rfmt=3&fmt=4", + "parent_domain": "googleads.g.doubleclick.net", + "locations": ["USA", "Canada"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.google.com/pagead/1p-user-list/11020051272/", + "mime_type": "image/gif", + "size": 108, + "method": "GET" + }, + { + "urn": "my_web_monitor_1.GET.www.google.com.https://www.google.com/pagead/1p-user-list/697301175/", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "https://www.google.com/pagead/1p-user-list/697301175/", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.509468Z", + "diff_status": "addition", + "domain": "www.google.com", + "parent": "https://googleads.g.doubleclick.net/pagead/viewthroughconversion/697301175/?random=1737048446477&cv=11&fst=1737048446477&bg=ffffff&guid=ON&async=1>m=45be51d0v895464401za200zb9134906606&gcd=13l3l3l3l1l1&dma=0&tag_exp=101925629~102067555~102067808~102081485~102123607~102198178&u_w=1536&u_h=864&url=https%3A%2F%2Fethyca.com%2F&hn=www.googleadservices.com&frm=0&tiba=Ethyca%20%7C%20Home&did=dZTQ1Zm&gdid=dZTQ1Zm&npa=0&pscdl=noapi&auid=1657606680.1737048443&uaa=x86&uab=64&uafvl=Google%2520Chrome%3B131.0.6778.109%7CChromium%3B131.0.6778.109%7CNot_A%2520Brand%3B24.0.0.0&uamb=0&uam=&uap=Windows&uapv=10.0.0&uaw=0&fledge=1&data=event%3Dgtag.config&rfmt=3&fmt=4", + "parent_domain": "googleads.g.doubleclick.net", + "locations": ["USA"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.google.com/pagead/1p-user-list/697301175/", + "mime_type": "image/gif", + "size": 455, + "method": "GET" + }, + { + "urn": "my_web_monitor_1..doubleclick.net.IDE", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "IDE", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.256532Z", + "diff_status": "addition", + "domain": ".doubleclick.net", + "parent": "https://www.googletagmanager.com/gtag/destination?id=AW-11020051272&l=dataLayer&cx=c>m=45He51d0v810253976za200", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Cookie", + "system": "Google Tag Manager", + "value": "AHWqTUkbgHZ9_6gV1ZYVnfFx8h3-wbUSqy-qmOM6ay-n72yyvwky-VDu7PeobUgP", + "path": "/" + }, + { + "urn": "my_web_monitor_1.GET.www.googletagmanager.com.https://www.googletagmanager.com/gtag/js", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "js", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.493601Z", + "diff_status": "addition", + "domain": "www.googletagmanager.com", + "parent": "https://www.googletagmanager.com/gtag/js?id=G-B356CF15GS", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.googletagmanager.com/gtag/js", + "mime_type": "application/javascript", + "size": 103387, + "method": "GET" + }, + { + "urn": "my_web_monitor_1.GET.td.doubleclick.net.https://td.doubleclick.net/td/ga/rul", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "rul", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.420514Z", + "diff_status": "addition", + "domain": "td.doubleclick.net", + "parent": "https://www.googletagmanager.com/gtag/js?id=G-B356CF15GS", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA", "Canada"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://td.doubleclick.net/td/ga/rul", + "cookies": [ + "test_cookie=CheckForPermission; expires=Thu, 16-Jan-2025 17:42:23 GMT; path=/; domain=.doubleclick.net; Secure; SameSite=none" + ], + "mime_type": "text/html", + "method": "GET" + }, + { + "urn": "my_web_monitor_1.GET.www.googletagmanager.com.https://www.googletagmanager.com/static/service_worker/51g0/sw_iframe.html", + "user_assigned_data_categories": [], + "system_key": "system_key-8fe42cdb-af2e-4b9e-9b38-f75673180b88", + "name": "sw_iframe.html", + "description": null, + "monitor_config_id": "my_web_monitor_1", + "updated_at": "2025-01-16T17:27:31.437802Z", + "diff_status": "addition", + "domain": "www.googletagmanager.com", + "parent": "https://www.googletagmanager.com/gtm.js?id=GTM-PZHT655", + "parent_domain": "www.googletagmanager.com", + "locations": ["USA", "Canada"], + "with_consent": false, + "data_uses": [], + "vendor_id": "fds.1046", + "system_id": "ctl_e0ac4744-0f2e-4feb-b281-5877f9e464d1", + "source_modified": null, + "classifications": [], + "child_diff_statuses": {}, + "database_name": null, + "schema_name": null, + "parent_table_urn": null, + "table_name": null, + "data_type": null, + "fields": [], + "num_rows": null, + "tables": [], + "schemas": [], + "resource_type": "Browser Request", + "system": "Google Tag Manager", + "base_url": "https://www.googletagmanager.com/static/service_worker/51g0/sw_iframe.html", + "mime_type": "text/html", + "method": "GET" + } + ], + "total": 11, + "page": 1, + "size": 25, + "pages": 1 +} diff --git a/clients/admin-ui/cypress/support/stubs.ts b/clients/admin-ui/cypress/support/stubs.ts index 6c3109f1e9..df518408db 100644 --- a/clients/admin-ui/cypress/support/stubs.ts +++ b/clients/admin-ui/cypress/support/stubs.ts @@ -516,9 +516,21 @@ export const stubActionCenter = () => { }).as("getMonitorResults"); cy.intercept( "GET", - "/api/v1//plus/discovery-monitor/system-aggregate-results*", + "/api/v1/plus/discovery-monitor/system-aggregate-results*", { fixture: "detection-discovery/activity-center/system-aggregate-results", }, ).as("getSystemAggregateResults"); + cy.intercept("GET", "/api/v1/plus/discovery-monitor/*/results*", { + fixture: "detection-discovery/activity-center/system-asset-results", + }).as("getSystemAssetResults"); + cy.intercept("POST", "/api/v1/plus/discovery-monitor/mute*", { + response: 200, + }).as("ignoreAssets"); + cy.intercept("POST", "/api/v1/plus/discovery-monitor/promote*", { + response: 200, + }).as("addAssets"); + cy.intercept("PATCH", "/api/v1/plus/discovery-monitor/*/results", { + response: 200, + }).as("setAssetSystem"); }; diff --git a/clients/admin-ui/src/features/common/dropdown/SystemSelect.tsx b/clients/admin-ui/src/features/common/dropdown/SystemSelect.tsx new file mode 100644 index 0000000000..34501790e3 --- /dev/null +++ b/clients/admin-ui/src/features/common/dropdown/SystemSelect.tsx @@ -0,0 +1,57 @@ +import { AntSelect as Select, AntSelectProps as SelectProps } from "fidesui"; +import { useCallback, useMemo, useState } from "react"; + +import { useGetSystemsQuery } from "~/features/system/system.slice"; + +import { debounce } from "../utils"; + +const OPTIONS_LIMIT = 25; + +interface SystemSelectProps + extends Omit< + SelectProps, + "options" | "showSearch" | "filterOption" | "onSearch" + > {} + +export const SystemSelect = ({ ...props }: SystemSelectProps) => { + const [searchValue, setSearchValue] = useState(); + const { data, isFetching } = useGetSystemsQuery({ + page: 1, + size: OPTIONS_LIMIT, + search: searchValue || undefined, + }); + + const options = data?.items?.map((system) => ({ + value: system.fides_key, + label: system.name, + })); + + const handleSearch = useCallback( + (search: string) => { + if (search?.length > 1) { + setSearchValue(search); + } + if (search?.length === 0) { + setSearchValue(undefined); + } + }, + [setSearchValue], + ); + + const onSearch = useMemo(() => debounce(handleSearch, 300), [handleSearch]); + + return ( +