-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add UI for configuring integrations for data detection/discovery (#4922)
Co-authored-by: Lucano Vera <[email protected]> Co-authored-by: Andrés Torres Marroquín <[email protected]>
- Loading branch information
3 people
authored
May 30, 2024
1 parent
cd772b2
commit 8309e83
Showing
47 changed files
with
1,457 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 149 additions & 0 deletions
149
clients/admin-ui/cypress/e2e/integration-management.cy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import { stubPlus, stubSystemCrud } from "cypress/support/stubs"; | ||
|
|
||
| import { INTEGRATION_MANAGEMENT_ROUTE } from "~/features/common/nav/v2/routes"; | ||
|
|
||
| describe("Integration management for data detection & discovery", () => { | ||
| beforeEach(() => { | ||
| cy.login(); | ||
| }); | ||
|
|
||
| describe("accessing the page", () => { | ||
| it("can access the integration management page", () => { | ||
| stubPlus(true); | ||
| cy.visit(INTEGRATION_MANAGEMENT_ROUTE); | ||
| cy.getByTestId("integration-tabs").should("exist"); | ||
| }); | ||
|
|
||
| it("can't access without Plus", () => { | ||
| stubPlus(false); | ||
| cy.visit(INTEGRATION_MANAGEMENT_ROUTE); | ||
| cy.getByTestId("home-content").should("exist"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("main page", () => { | ||
| beforeEach(() => { | ||
| stubPlus(true); | ||
| }); | ||
|
|
||
| it("should show an empty state when there are no integrations available", () => { | ||
| cy.intercept("GET", "/api/v1/connection*", { | ||
| fixture: "connectors/empty_list.json", | ||
| }).as("getConnections"); | ||
| cy.visit(INTEGRATION_MANAGEMENT_ROUTE); | ||
| cy.wait("@getConnections"); | ||
| cy.getByTestId("empty-state").should("exist"); | ||
| }); | ||
|
|
||
| describe("list view", () => { | ||
| beforeEach(() => { | ||
| cy.intercept("GET", "/api/v1/connection*", { | ||
| fixture: "connectors/bigquery_connection_list.json", | ||
| }).as("getConnections"); | ||
| cy.visit(INTEGRATION_MANAGEMENT_ROUTE); | ||
| cy.wait("@getConnections"); | ||
| }); | ||
|
|
||
| it("should show a list of integrations", () => { | ||
| cy.getByTestId("integration-info-bq_integration").should("exist"); | ||
| cy.getByTestId("empty-state").should("not.exist"); | ||
| }); | ||
|
|
||
| it("should navigate to management page when 'manage' button is clicked", () => { | ||
| cy.getByTestId("integration-info-bq_integration").within(() => { | ||
| cy.getByTestId("configure-btn").click(); | ||
| cy.url().should("contain", "/bq_integration"); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe("adding an integration", () => { | ||
| beforeEach(() => { | ||
| cy.intercept("GET", "/api/v1/connection*", { | ||
| fixture: "connectors/bigquery_connection_list.json", | ||
| }).as("getConnections"); | ||
| cy.visit(INTEGRATION_MANAGEMENT_ROUTE); | ||
| cy.wait("@getConnections"); | ||
| }); | ||
|
|
||
| it("should open modal", () => { | ||
| cy.getByTestId("add-integration-btn").click(); | ||
| cy.getByTestId("add-modal-content") | ||
| .should("be.visible") | ||
| .within(() => { | ||
| cy.getByTestId("integration-info-bq_placeholder").should("exist"); | ||
| }); | ||
| }); | ||
|
|
||
| it("should be able to add a new BigQuery integration", () => { | ||
| cy.intercept("PATCH", "/api/v1/connection").as("patchConnection"); | ||
| cy.getByTestId("add-integration-btn").click(); | ||
| cy.getByTestId("add-modal-content").within(() => { | ||
| cy.getByTestId("configure-btn").click(); | ||
| }); | ||
| cy.getByTestId("input-name").type("test name"); | ||
| cy.getByTestId("input-description").type("test description"); | ||
| cy.getByTestId("save-btn").click(); | ||
| cy.wait("@patchConnection"); | ||
| }); | ||
|
|
||
| it("should be able to add a new integration with secrets", () => { | ||
| cy.intercept("PATCH", "/api/v1/connection").as("patchConnection"); | ||
| cy.intercept("PUT", "/api/v1/connection/*/secret*").as( | ||
| "putConnectionSecrets" | ||
| ); | ||
| cy.getByTestId("add-integration-btn").click(); | ||
| cy.getByTestId("add-modal-content").within(() => { | ||
| cy.getByTestId("configure-btn").click(); | ||
| }); | ||
| cy.getByTestId("input-name").type("test name"); | ||
| cy.getByTestId("input-keyfile_creds").type(`{"credentials": "test"}`, { | ||
| parseSpecialCharSequences: false, | ||
| }); | ||
| cy.getByTestId("save-btn").click(); | ||
| cy.wait("@patchConnection"); | ||
| cy.wait("@putConnectionSecrets"); | ||
| }); | ||
|
|
||
| it("should be able to add a new integration associated with a system", () => { | ||
| stubSystemCrud(); | ||
| cy.intercept("PATCH", "/api/v1/system/*/connection").as( | ||
| "patchSystemConnection" | ||
| ); | ||
| cy.intercept("GET", "/api/v1/system", { | ||
| fixture: "systems/systems.json", | ||
| }).as("getSystems"); | ||
| cy.getByTestId("add-integration-btn").click(); | ||
| cy.getByTestId("add-modal-content").within(() => { | ||
| cy.getByTestId("configure-btn").click(); | ||
| }); | ||
| cy.getByTestId("input-name").type("test name"); | ||
| cy.selectOption("input-system_fides_key", "Fidesctl System"); | ||
| cy.getByTestId("save-btn").click(); | ||
| cy.wait("@patchSystemConnection"); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe("detail view", () => { | ||
| beforeEach(() => { | ||
| stubPlus(true); | ||
| cy.intercept("GET", "/api/v1/connection/*", { | ||
| fixture: "connectors/bigquery_connection.json", | ||
| }).as("getConnection"); | ||
| cy.visit("/integrations/bq_integration"); | ||
| }); | ||
|
|
||
| it("can edit integration with the modal", () => { | ||
| cy.intercept("PATCH", "/api/v1/connection").as("patchConnection"); | ||
| cy.getByTestId("manage-btn").click(); | ||
| cy.getByTestId("input-system_fides_key").should("not.exist"); | ||
| cy.getByTestId("input-name") | ||
| .should("have.value", "BQ Integration") | ||
| .clear() | ||
| .type("A different name"); | ||
| cy.getByTestId("save-btn").click(); | ||
| cy.wait("@patchConnection"); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -109,7 +109,7 @@ describe("System management with Plus features", () => { | |
| cy.wait("@getDictSystem"); | ||
| cy.getByTestId("input-dpo").should("have.value", "[email protected]"); | ||
| cy.getByTestId("tab-Data uses").click(); | ||
| cy.getByTestId("tab-System information").click(); | ||
| cy.getByTestId("tab-Information").click(); | ||
| cy.getByTestId("tab-Data uses").click(); | ||
| cy.getByTestId("confirmation-modal").should("not.exist"); | ||
| }); | ||
|
|
@@ -232,10 +232,12 @@ describe("System management with Plus features", () => { | |
| cy.intercept("POST", `/api/v1/plus/custom-metadata/custom-field/bulk`, { | ||
| body: {}, | ||
| }).as("bulkUpdateCustomField"); | ||
| stubVendorList(); | ||
| }); | ||
|
|
||
| it("can populate initial custom metadata", () => { | ||
| cy.visit(`${SYSTEM_ROUTE}/configure/demo_analytics_system`); | ||
| cy.wait(["@getSystem", "@getDictionaryEntries"]); | ||
|
|
||
| // Should not be able to save while form is untouched | ||
| cy.getByTestId("save-btn").should("be.disabled"); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
clients/admin-ui/cypress/fixtures/connectors/bigquery_connection.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
| "name": "BQ Integration", | ||
| "key": "bq_integration", | ||
| "description": "Description", | ||
| "connection_type": "bigquery", | ||
| "access": "read", | ||
| "created_at": "2024-05-24T13:35:57.509826+00:00", | ||
| "updated_at": "2024-05-24T13:35:57.509826+00:00", | ||
| "disabled": false, | ||
| "last_test_timestamp": null, | ||
| "last_test_succeeded": null, | ||
| "saas_config": null, | ||
| "secrets": null, | ||
| "authorized": false, | ||
| "enabled_actions": null | ||
| } |
24 changes: 24 additions & 0 deletions
24
clients/admin-ui/cypress/fixtures/connectors/bigquery_connection_list.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| { | ||
| "items": [ | ||
| { | ||
| "name": "BQ Integration", | ||
| "key": "bq_integration", | ||
| "description": "Description", | ||
| "connection_type": "bigquery", | ||
| "access": "read", | ||
| "created_at": "2024-05-24T13:35:57.509826+00:00", | ||
| "updated_at": "2024-05-24T13:35:57.509826+00:00", | ||
| "disabled": false, | ||
| "last_test_timestamp": null, | ||
| "last_test_succeeded": null, | ||
| "saas_config": null, | ||
| "secrets": null, | ||
| "authorized": false, | ||
| "enabled_actions": null | ||
| } | ||
| ], | ||
| "total": 1, | ||
| "page": 1, | ||
| "size": 50, | ||
| "pages": 1 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "items": [], | ||
| "total": 0, | ||
| "pages": 1, | ||
| "size": 5 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "fidesui"; | ||
| import Link from "next/link"; | ||
|
|
||
| export interface BreadcrumbsProps { | ||
| breadcrumbs: { | ||
| title: string; | ||
| link?: string; | ||
| onClick?: () => void; | ||
| isOpaque?: boolean; | ||
| }[]; | ||
| } | ||
|
|
||
| /** | ||
| * Breadcrumbs component that shows the path to the current page with links to the previous pages. | ||
| * By default, the last breadcrumb is black, and the rest are gray. | ||
| * @param breadcrumbs - array of breadcrumbs | ||
| * @param breadcrumbs.title - title of the breadcrumb | ||
| * @param breadcrumbs.link - (optional) link to the page | ||
| * @param breadcrumbs.onClick - (optional) function to call when the breadcrumb is clicked | ||
| * @param breadcrumbs.isOpaque - (optional) if true, the breadcrumb will be black, otherwise gray | ||
| */ | ||
| const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ breadcrumbs }) => ( | ||
| <Breadcrumb | ||
| separator="->" | ||
| fontSize="2xl" | ||
| fontWeight="semibold" | ||
| data-testid="breadcrumbs" | ||
| > | ||
| {breadcrumbs.map((breadcumbItem, index) => { | ||
| const isLast = index + 1 === breadcrumbs.length; | ||
| const hasLink = !!breadcumbItem.link || !!breadcumbItem.onClick; | ||
| return ( | ||
| <BreadcrumbItem | ||
| color={isLast || breadcumbItem.isOpaque ? "black" : "gray.500"} | ||
| key={breadcumbItem.title} | ||
| > | ||
| {hasLink ? ( | ||
| <BreadcrumbLink | ||
| as={Link} | ||
| href={breadcumbItem.link} | ||
| isCurrentPage={isLast} | ||
| > | ||
| {breadcumbItem.title} | ||
| </BreadcrumbLink> | ||
| ) : ( | ||
| <BreadcrumbLink | ||
| _hover={{ textDecoration: "none", cursor: "default" }} | ||
| isCurrentPage={isLast} | ||
| > | ||
| {breadcumbItem.title} | ||
| </BreadcrumbLink> | ||
| )} | ||
| </BreadcrumbItem> | ||
| ); | ||
| })} | ||
| </Breadcrumb> | ||
| ); | ||
| export default Breadcrumbs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.