From 353ddcbd82b38b0943c46d7932131172b539f371 Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 22 Mar 2023 15:47:12 -0400 Subject: [PATCH 1/3] Add system configure id --- .../src/features/system/SystemCard.tsx | 2 +- .../admin-ui/src/pages/systems/configure.tsx | 28 ------- .../src/pages/systems/configure/[id].tsx | 73 +++++++++++++++++++ 3 files changed, 74 insertions(+), 29 deletions(-) delete mode 100644 clients/admin-ui/src/pages/systems/configure.tsx create mode 100644 clients/admin-ui/src/pages/systems/configure/[id].tsx diff --git a/clients/admin-ui/src/features/system/SystemCard.tsx b/clients/admin-ui/src/features/system/SystemCard.tsx index 2537da75c6..32f96f340c 100644 --- a/clients/admin-ui/src/features/system/SystemCard.tsx +++ b/clients/admin-ui/src/features/system/SystemCard.tsx @@ -39,7 +39,7 @@ const SystemCard = ({ system }: SystemCardProps) => { const handleEdit = () => { dispatch(setActiveSystem(system)); - router.push(`${SYSTEM_ROUTE}/configure`); + router.push(`${SYSTEM_ROUTE}/configure/${system.fides_key}`); }; const handleDelete = async () => { diff --git a/clients/admin-ui/src/pages/systems/configure.tsx b/clients/admin-ui/src/pages/systems/configure.tsx deleted file mode 100644 index e9437ea4bb..0000000000 --- a/clients/admin-ui/src/pages/systems/configure.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Box, Breadcrumb, BreadcrumbItem, Heading } from "@fidesui/react"; -import type { NextPage } from "next"; -import NextLink from "next/link"; - -import { SYSTEM_ROUTE } from "~/constants"; -import Layout from "~/features/common/Layout"; -import EditSystemFlow from "~/features/system/EditSystemFlow"; - -const ConfigureSystem: NextPage = () => ( - - - Configure your system - - - - - System Connections - - - Configure your connection - - - - - -); - -export default ConfigureSystem; diff --git a/clients/admin-ui/src/pages/systems/configure/[id].tsx b/clients/admin-ui/src/pages/systems/configure/[id].tsx new file mode 100644 index 0000000000..89bd526853 --- /dev/null +++ b/clients/admin-ui/src/pages/systems/configure/[id].tsx @@ -0,0 +1,73 @@ +import { + Box, + Breadcrumb, + BreadcrumbItem, + Heading, + Spinner, + Text, +} from "@fidesui/react"; +import type { NextPage } from "next"; +import NextLink from "next/link"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; + +import { useAppDispatch } from "~/app/hooks"; +import { SYSTEM_ROUTE } from "~/constants"; +import Layout from "~/features/common/Layout"; +import { + setActiveSystem, + useGetSystemByFidesKeyQuery, +} from "~/features/system"; +import EditSystemFlow from "~/features/system/EditSystemFlow"; + +const ConfigureSystem: NextPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + let systemId = ""; + if (router.query.id) { + systemId = Array.isArray(router.query.id) + ? router.query.id[0] + : router.query.id; + } + + const { data: system, isLoading } = useGetSystemByFidesKeyQuery(systemId, { + skip: !systemId, + }); + + useEffect(() => { + dispatch(setActiveSystem(system)); + }, [system, dispatch]); + + if (isLoading) { + return ( + + + + ); + } + + return ( + + + Configure your system + + + + + System Connections + + + Configure your connection + + + + {!system ? ( + Could not find a system with id {systemId} + ) : ( + + )} + + ); +}; + +export default ConfigureSystem; From d84cc50bfc0c7ac4c69237fd18d83b85041e61e9 Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 22 Mar 2023 16:24:04 -0400 Subject: [PATCH 2/3] Update tests --- .../admin-ui/cypress/e2e/systems-plus.cy.ts | 10 ++-- clients/admin-ui/cypress/e2e/systems.cy.ts | 56 +++++++++++++------ .../src/pages/systems/configure/[id].tsx | 4 +- 3 files changed, 46 insertions(+), 24 deletions(-) diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts index 38982034be..67b4f94de0 100644 --- a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts +++ b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts @@ -15,7 +15,6 @@ describe("System management with Plus features", () => { cy.intercept("GET", "/api/v1/system", { fixture: "systems/systems.json", }).as("getSystems"); - cy.visit(SYSTEM_ROUTE); }); describe("custom metadata", () => { @@ -53,10 +52,7 @@ describe("System management with Plus features", () => { }); it("can populate initial custom metadata", () => { - cy.getByTestId("system-fidesctl_system").within(() => { - cy.getByTestId("more-btn").click(); - cy.getByTestId("edit-btn").click(); - }); + cy.visit(`${SYSTEM_ROUTE}/configure/demo_analytics_system`); // Should not be able to save while form is untouched cy.getByTestId("save-btn").should("be.disabled"); @@ -76,7 +72,9 @@ describe("System management with Plus features", () => { expect(interception.request.body.id).to.eql( "id-custom-field-pokemon-party" ); - expect(interception.request.body.resource_id).to.eql("fidesctl_system"); + expect(interception.request.body.resource_id).to.eql( + "demo_analytics_system" + ); expect(interception.request.body.value).to.eql([ "Charmander", "Eevee", diff --git a/clients/admin-ui/cypress/e2e/systems.cy.ts b/clients/admin-ui/cypress/e2e/systems.cy.ts index aafaeadf93..f50ea164f3 100644 --- a/clients/admin-ui/cypress/e2e/systems.cy.ts +++ b/clients/admin-ui/cypress/e2e/systems.cy.ts @@ -255,15 +255,35 @@ describe("System management page", () => { beforeEach(() => { stubSystemCrud(); stubTaxonomyEntities(); + cy.fixture("systems/systems.json").then((systems) => { + cy.intercept("GET", "/api/v1/system/*", { + body: systems[0], + }).as("getFidesctlSystem"); + }); cy.visit(SYSTEM_ROUTE); }); + it("Can go directly to a system's edit page", () => { + cy.visit("/systems/configure/fidesctl_system"); + cy.getByTestId("input-name").should("have.value", "Fidesctl System"); + + cy.intercept("GET", "/api/v1/system/*", { + statusCode: 404, + }).as("getNotFoundSystem"); + + // and can render a not found state + cy.visit("/systems/configure/system-that-does-not-exist"); + cy.getByTestId("system-not-found"); + }); + it("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"); + cy.url().should("contain", "/systems/configure/fidesctl_system"); + + cy.wait("@getFidesctlSystem"); // check that the form has the proper values filled in cy.getByTestId("input-name").should("have.value", "Fidesctl System"); @@ -414,6 +434,11 @@ describe("System management page", () => { beforeEach(() => { stubSystemCrud(); stubTaxonomyEntities(); + cy.fixture("systems/systems.json").then((systems) => { + cy.intercept("GET", "/api/v1/system/*", { + body: systems[0], + }).as("getFidesctlSystem"); + }); }); it("warns when a data use is being added that is already used", () => { @@ -443,15 +468,13 @@ describe("System management page", () => { }); it("warns when a data use is being edited to one that is already used", () => { - cy.intercept("GET", "/api/v1/system", { - fixture: "systems/systems_with_data_uses.json", - }).as("getSystemsWithDataUses"); - cy.visit(SYSTEM_ROUTE); - cy.wait("@getSystemsWithDataUses"); - cy.getByTestId("system-fidesctl_system").within(() => { - cy.getByTestId("more-btn").click(); - cy.getByTestId("edit-btn").click(); + cy.fixture("systems/systems_with_data_uses.json").then((systems) => { + cy.intercept("GET", "/api/v1/system/*", { + body: systems[0], + }).as("getFidesctlSystemWithDataUses"); }); + cy.visit(`${SYSTEM_ROUTE}/configure/fidesctl_system`); + cy.wait("@getFidesctlSystemWithDataUses"); cy.getByTestId("tab-Data uses").click(); cy.getByTestId("add-btn").click(); @@ -470,15 +493,14 @@ describe("System management page", () => { describe("delete privacy declaration", () => { beforeEach(() => { - cy.intercept("GET", "/api/v1/system", { - fixture: "systems/systems_with_data_uses.json", - }).as("getSystemsWithDataUses"); - cy.visit(SYSTEM_ROUTE); - cy.wait("@getSystemsWithDataUses"); - cy.getByTestId("system-fidesctl_system").within(() => { - cy.getByTestId("more-btn").click(); - cy.getByTestId("edit-btn").click(); + cy.fixture("systems/systems_with_data_uses.json").then((systems) => { + cy.intercept("GET", "/api/v1/system/*", { + body: systems[0], + }).as("getFidesctlSystemWithDataUses"); }); + cy.visit(`${SYSTEM_ROUTE}/configure/fidesctl_system`); + cy.wait("@getFidesctlSystemWithDataUses"); + cy.getByTestId("tab-Data uses").click(); }); diff --git a/clients/admin-ui/src/pages/systems/configure/[id].tsx b/clients/admin-ui/src/pages/systems/configure/[id].tsx index 89bd526853..faaf18e23a 100644 --- a/clients/admin-ui/src/pages/systems/configure/[id].tsx +++ b/clients/admin-ui/src/pages/systems/configure/[id].tsx @@ -62,7 +62,9 @@ const ConfigureSystem: NextPage = () => { {!system ? ( - Could not find a system with id {systemId} + + Could not find a system with id {systemId} + ) : ( )} From 7f4afeba4f9577b9b3dae2da727fba21ee5b39fb Mon Sep 17 00:00:00 2001 From: Allison King Date: Wed, 22 Mar 2023 16:37:36 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38a55e3d08..4887cd9fd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ The types of changes are: * Changed UI paths in the admin-ui [#2869](https://github.com/ethyca/fides/pull/2892) * `/add-systems/new` --> `/add-systems/manual` * `/system` --> `/systems` +* Added individual ID routes for systems [#2902](https://github.com/ethyca/fides/pull/2902) ## [2.9.1](https://github.com/ethyca/fides/compare/2.9.0...2.9.1)