Skip to content

Commit

Permalink
PROD-1397 Update systems page with table view (#5084)
Browse files Browse the repository at this point in the history
Co-authored-by: Lucano Vera <[email protected]>
  • Loading branch information
lucanovera and Lucano Vera authored Jul 17, 2024
1 parent dc3de5b commit f390fc9
Show file tree
Hide file tree
Showing 22 changed files with 553 additions and 236 deletions.
5 changes: 1 addition & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,15 @@ The types of changes are:
- Upgrade to React 18 and Chakra 2, including other dependencies [#5036](https://github.com/ethyca/fides/pull/5036)
- Added support for "output templates" in read SaaS requests [#5054](https://github.com/ethyca/fides/pull/5054)


### Changed
- Updated the sample dataset for the Amplitude integration [#5063](https://github.com/ethyca/fides/pull/5063)
- Updated System's page to display a table that uses a paginated endpoint [#5084](https://github.com/ethyca/fides/pull/5084)
- Messaging page now shows a notice if you have properties without any templates [#5077](https://github.com/ethyca/fides/pull/5077)
- Endpoints for listing systems (GET /system) and datasets (GET /dataset) now support optional pagination [#5071](https://github.com/ethyca/fides/pull/5071)
- Moves some endpoints for property-specific messaging from OSS -> plus [#5069](https://github.com/ethyca/fides/pull/5069)
- Messaging page will now show a notice about using global mode [#5090](https://github.com/ethyca/fides/pull/5090)
- URL for deployment instructions when the webserver is running [#5088](https://github.com/ethyca/fides/pull/5088)

### Developer Experience
- Upgrade to React 18 and Chakra 2, including other dependencies [#5036](https://github.com/ethyca/fides/pull/5036)

### Fixed
- Fixed bug with unescaped table names in mysql queries [#5072](https://github.com/ethyca/fides/pull/5072/)
- Fixed bug with unresponsive messaging ui [#5081](https://github.com/ethyca/fides/pull/5081/)
Expand Down
4 changes: 2 additions & 2 deletions clients/admin-ui/cypress/e2e/auth.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@ describe("User Authentication", () => {
cy.getByTestId("User Management");

cy.visit(SYSTEM_ROUTE);
cy.getByTestId("Systems");
cy.getByTestId("system-management");
});

it("lets them log out", () => {
cy.visit(SYSTEM_ROUTE);
cy.getByTestId("Systems");
cy.getByTestId("system-management");

cy.intercept("POST", "/api/v1/logout", {
statusCode: 204,
Expand Down
10 changes: 5 additions & 5 deletions clients/admin-ui/cypress/e2e/nav-bar.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe("Nav Bar", () => {
cy.getByTestId("Home-nav-link");
});
cy.getByTestId("Data inventory-nav-group").within(() => {
cy.getByTestId("Systems & vendors-nav-link");
cy.getByTestId("System inventory-nav-link");
cy.getByTestId("Add systems-nav-link");
cy.getByTestId("Manage datasets-nav-link");
});
Expand Down Expand Up @@ -50,18 +50,18 @@ describe("Nav Bar", () => {
cy.getByTestId("Home-nav-link")
.should("have.css", "background-color")
.should("eql", ACTIVE_COLOR);
cy.getByTestId("Systems & vendors-nav-link")
cy.getByTestId("System inventory-nav-link")
.should("have.css", "background-color")
.should("not.eql", ACTIVE_COLOR);

// Navigate by clicking a nav link.
cy.getByTestId("Systems & vendors-nav-link").click();
cy.getByTestId("System inventory-nav-link").click();

// The nav should update which page is active.
cy.getByTestId("Home-nav-link")
.should("have.css", "background-color")
.should("not.eql", ACTIVE_COLOR);
cy.getByTestId("Systems & vendors-nav-link")
cy.getByTestId("System inventory-nav-link")
.should("have.css", "background-color")
.should("eql", ACTIVE_COLOR);
});
Expand All @@ -75,7 +75,7 @@ describe("Nav Bar", () => {
cy.getByTestId("Request manager-nav-link").should("not.be.visible");

// Move to another page
cy.getByTestId("Systems & vendors-nav-link").click();
cy.getByTestId("System inventory-nav-link").click();
cy.getByTestId("Request manager-nav-link").should("not.be.visible");
});
});
7 changes: 2 additions & 5 deletions clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { SYSTEM_ROUTE } from "~/features/common/nav/v2/routes";
describe("System integrations", () => {
beforeEach(() => {
cy.login();
cy.intercept("GET", "/api/v1/system", {
fixture: "systems/systems.json",
cy.intercept("GET", "/api/v1/system*", {
fixture: "systems/systems_paginated.json",
}).as("getSystems");
cy.intercept("GET", "/api/v1/connection_type*", {
fixture: "connectors/connection_types.json",
Expand All @@ -24,7 +24,6 @@ describe("System integrations", () => {

it("should render the integration configuration panel when navigating to integrations tab", () => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.wait("@getDict");
Expand All @@ -35,7 +34,6 @@ describe("System integrations", () => {
describe("Integration search", () => {
beforeEach(() => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.getByTestId("tab-Integrations").click();
Expand All @@ -60,7 +58,6 @@ describe("System integrations", () => {
describe("Integration form contents", () => {
beforeEach(() => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.getByTestId("tab-Integrations").click();
Expand Down
8 changes: 3 additions & 5 deletions clients/admin-ui/cypress/e2e/system-integrations.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import { SYSTEM_ROUTE } from "~/features/common/nav/v2/routes";
describe("System integrations", () => {
beforeEach(() => {
cy.login();
cy.intercept("GET", "/api/v1/system", {
fixture: "systems/systems.json",
cy.intercept("GET", "/api/v1/system*", {
fixture: "systems/systems_paginated.json",
}).as("getSystems");

cy.intercept("GET", "/api/v1/connection_type*", {
fixture: "connectors/connection_types.json",
}).as("getConnectionTypes");
Expand All @@ -21,7 +22,6 @@ describe("System integrations", () => {

it("should render the integration configuration panel when navigating to integrations tab", () => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.getByTestId("tab-Integrations").click();
Expand All @@ -31,7 +31,6 @@ describe("System integrations", () => {
describe("Integration search", () => {
beforeEach(() => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.getByTestId("tab-Integrations").click();
Expand All @@ -56,7 +55,6 @@ describe("System integrations", () => {
describe("Integration form contents", () => {
beforeEach(() => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.getByTestId("tab-Integrations").click();
Expand Down
33 changes: 18 additions & 15 deletions clients/admin-ui/cypress/e2e/systems.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@ describe("System management page", () => {
cy.intercept("GET", "/api/v1/system", {
fixture: "systems/systems.json",
}).as("getSystems");

cy.intercept("GET", "/api/v1/system?*", {
fixture: "systems/systems_paginated.json",
}).as("getSystems");

cy.intercept("GET", "/api/v1/system?page=1&size=25&search=demo+m", {
fixture: "systems/systems_paginated_search.json",
}).as("getSystemsWithSearch");

stubPlus(false);
});

Expand All @@ -34,7 +43,7 @@ describe("System management page", () => {

it("Can navigate to the system management page", () => {
cy.visit("/");
cy.getByTestId("Systems & vendors-nav-link").click();
cy.getByTestId("System inventory-nav-link").click();
cy.wait("@getSystems");
cy.getByTestId("system-management");
});
Expand All @@ -44,11 +53,10 @@ describe("System management page", () => {
cy.visit(SYSTEM_ROUTE);
});

it("Can render system cards", () => {
it("Can render system rows", () => {
cy.getByTestId("system-fidesctl_system");

cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn");
cy.getByTestId("delete-btn");
});
Expand All @@ -57,7 +65,12 @@ describe("System management page", () => {
});

it("Can search and filter cards", () => {
cy.getByTestId("system-search").type("demo m");
cy.getByTestId("system-search").type("demo m{enter}");

cy.wait("@getSystemsWithSearch").then((interception) => {
expect(interception.request.query.search).to.eq("demo m");
});

cy.getByTestId("system-fidesctl_system").should("not.exist");
cy.getByTestId("system-demo_analytics_system").should("not.exist");
cy.getByTestId("system-demo_marketing_system");
Expand Down Expand Up @@ -224,7 +237,6 @@ describe("System management page", () => {
it("Can delete a system from its card", () => {
cy.visit(SYSTEM_ROUTE);
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("delete-btn").click();
});
cy.getByTestId("confirmation-modal");
Expand All @@ -240,7 +252,6 @@ describe("System management page", () => {
cy.assumeRole(RoleRegistryEnum.VIEWER);
cy.visit(SYSTEM_ROUTE);
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("delete-btn").should("not.exist");
});
});
Expand All @@ -258,7 +269,6 @@ describe("System management page", () => {
}).as("deleteSystemError");
cy.visit(SYSTEM_ROUTE);
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("delete-btn").click();
});
cy.getByTestId("confirmation-modal");
Expand Down Expand Up @@ -296,9 +306,7 @@ describe("System management page", () => {
});

it("Can go to a system's edit page by clicking its card", () => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("system-box").click();
});
cy.getByTestId("row-0").click();
cy.url().should("contain", "/systems/configure/fidesctl_system");
});

Expand Down Expand Up @@ -328,7 +336,6 @@ describe("System management page", () => {

it.skip("Can go through the edit flow", () => {
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.url().should("contain", "/systems/configure/fidesctl_system");
Expand Down Expand Up @@ -398,7 +405,6 @@ describe("System management page", () => {
administrating_department: "department",
};
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});

Expand Down Expand Up @@ -450,7 +456,6 @@ describe("System management page", () => {
it.skip("warns when a data use and processing activity is being added that is already used", () => {
cy.visit(SYSTEM_ROUTE);
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
// "functional.service.improve" and "Store system data." are already being used
Expand Down Expand Up @@ -507,7 +512,6 @@ describe("System management page", () => {
it.skip("can have multiple of the same data use if the names are different", () => {
cy.visit(SYSTEM_ROUTE);
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
// "functional.service.improve" and "Store system data." are already being used
Expand Down Expand Up @@ -671,7 +675,6 @@ describe("System management page", () => {

cy.visit(SYSTEM_ROUTE);
cy.getByTestId("system-fidesctl_system").within(() => {
cy.getByTestId("more-btn").click();
cy.getByTestId("edit-btn").click();
});
cy.getByTestId("tab-Data flow").click();
Expand Down
105 changes: 105 additions & 0 deletions clients/admin-ui/cypress/fixtures/systems/systems_paginated.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
{
"items": [
{
"fides_key": "fidesctl_system",
"organization_fides_key": "default_organization",
"tags": null,
"name": "Fidesctl System",
"description": "Software that functionally applies Fides.",
"meta": null,
"fidesctl_meta": null,
"system_type": "Service",
"privacy_declarations": [
{
"name": "Store system data.",
"data_categories": ["system.operations", "user.contact"],
"data_use": "functional.service.improve",
"data_subjects": ["anonymous_user"],
"dataset_references": ["public"],
"cookies": [{ "name": "cookie" }, { "name": "cookie2" }],
"id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
}
],
"administrating_department": "Not defined",
"ingress": [],
"egress": [],
"cookies": [
{
"name": "test_cookie",
"path": "/",
"domain": "https://www.example.com"
}
]
},
{
"fides_key": "demo_analytics_system",
"organization_fides_key": "default_organization",
"tags": null,
"name": "Demo Analytics System",
"description": "A system used for analyzing customer behaviour.",
"meta": null,
"fidesctl_meta": null,
"system_type": "Service",
"egress": null,
"ingress": [
{
"fides_key": "demo_marketing_system",
"type": "system",
"data_categories": null
}
],
"privacy_declarations": [
{
"name": "Analyze customer behaviour for improvements.",
"data_categories": ["user.contact", "user.device.cookie_id"],
"data_use": "functional.service.improve",
"data_subjects": ["customer"],
"dataset_references": ["demo_users_dataset"],
"egress": null,
"ingress": null,
"cookies": [],
"id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
}
],
"administrating_department": "Engineering",
"cookies": []
},
{
"fides_key": "demo_marketing_system",
"organization_fides_key": "default_organization",
"tags": null,
"name": "Demo Marketing System",
"description": "Collect data about our users for marketing.",
"meta": null,
"fidesctl_meta": null,
"system_type": "Service",
"egress": [
{
"fides_key": "demo_analytics_system",
"type": "system",
"data_categories": null
}
],
"ingress": null,
"privacy_declarations": [
{
"name": "Collect data for marketing",
"data_categories": ["user.device.cookie_id"],
"data_use": "marketing",
"data_subjects": ["customer"],
"dataset_references": null,
"egress": null,
"ingress": null,
"cookies": [{ "name": "_ga" }],
"id": "pri_06430a1c-1365-422e-90a7-d444ddb32181"
}
],
"administrating_department": "Marketing",
"cookies": []
}
],
"total": 3,
"page": 1,
"size": 20,
"pages": 1
}
Loading

0 comments on commit f390fc9

Please sign in to comment.