Updated system routes (#2892)

ethyca · Mar 23, 2023 · dfabd1d · dfabd1d
1 parent ca1b7db
commit dfabd1d
Show file tree

Hide file tree

Showing 20 changed files with 191 additions and 94 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,10 @@ The types of changes are:
 
 ### Changed
 * Improved standard layout for large width screens and polished misc. pages [#2869](https://github.com/ethyca/fides/pull/2869)
+* 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)
 * Deprecated adding scopes to users directly; you can only add roles. [#2848](https://github.com/ethyca/fides/pull/2848/files)
 * Changed About Fides page to say "Fides Core Version:" over "Version". [#2899](https://github.com/ethyca/fides/pull/2899)
 * Polish Admin UI header & navigation [#2897](https://github.com/ethyca/fides/pull/2897)

diff --git a/clients/admin-ui/cypress/e2e/auth.cy.ts b/clients/admin-ui/cypress/e2e/auth.cy.ts
@@ -1,3 +1,5 @@
+import { SYSTEM_ROUTE } from "~/constants";
+
 describe("User Authentication", () => {
   describe("when the user not logged in", () => {
     it("redirects them to the login page", () => {
@@ -7,7 +9,7 @@ describe("User Authentication", () => {
       cy.visit("/user-management");
       cy.location("pathname").should("eq", "/login");
 
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
       cy.location("pathname").should("eq", "/login");
 
       cy.getByTestId("Login");
@@ -44,12 +46,12 @@ describe("User Authentication", () => {
       cy.visit("/user-management");
       cy.getByTestId("User Management");
 
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
       cy.getByTestId("Systems");
     });
 
     it("lets them log out", () => {
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
       cy.getByTestId("Systems");
 
       cy.intercept("POST", "/api/v1/logout", {

diff --git a/clients/admin-ui/cypress/e2e/config-wizard-plus.cy.ts b/clients/admin-ui/cypress/e2e/config-wizard-plus.cy.ts
@@ -1,5 +1,6 @@
 import { stubPlus } from "cypress/support/stubs";
 
+import { ADD_SYSTEMS_ROUTE } from "~/constants";
 import { ClusterHealth } from "~/types/api";
 
 /**
@@ -8,7 +9,7 @@ import { ClusterHealth } from "~/types/api";
  */
 const goToDataFlowScanner = () => {
   // Go through the initial config wizard steps
-  cy.visit("/add-systems");
+  cy.visit(ADD_SYSTEMS_ROUTE);
 
   // Select Runtime scanner to move to scan step.
   cy.getByTestId("add-systems");
@@ -42,7 +43,7 @@ describe("Config wizard with plus settings", () => {
           cluster_error: null,
         },
       });
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       cy.getByTestId("add-systems");
 
       cy.wait("@getPlusHealth");
@@ -61,7 +62,7 @@ describe("Config wizard with plus settings", () => {
           cluster_error: null,
         },
       });
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       cy.getByTestId("add-systems");
 
       cy.wait("@getPlusHealth");
@@ -74,7 +75,7 @@ describe("Config wizard with plus settings", () => {
 
     it("Can show the scanner as enabled and healthy", () => {
       stubPlus(true);
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       cy.getByTestId("add-systems");
 
       cy.wait("@getPlusHealth");
@@ -238,7 +239,7 @@ describe("Config wizard with plus settings", () => {
       cy.wait("@putScanResults");
       cy.getByTestId("scan-results");
       cy.getByTestId("register-btn").click();
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       cy.getByTestId("add-systems");
     });
 

diff --git a/clients/admin-ui/cypress/e2e/config-wizard.cy.ts b/clients/admin-ui/cypress/e2e/config-wizard.cy.ts
@@ -1,5 +1,7 @@
 import { stubSystemCrud, stubTaxonomyEntities } from "cypress/support/stubs";
 
+import { ADD_SYSTEMS_ROUTE } from "~/constants";
+
 describe("Config Wizard", () => {
   beforeEach(() => {
     cy.login();
@@ -13,7 +15,7 @@ describe("Config Wizard", () => {
       stubSystemCrud();
       stubTaxonomyEntities();
 
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       // Select AWS to move to form step.
       cy.getByTestId("add-systems");
       cy.getByTestId("aws-btn").click();
@@ -105,7 +107,7 @@ describe("Config Wizard", () => {
       stubSystemCrud();
       stubTaxonomyEntities();
 
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       // Select Okta to move to form step.
       cy.getByTestId("add-systems");
       cy.getByTestId("okta-btn").click();

diff --git a/clients/admin-ui/cypress/e2e/routes.cy.ts b/clients/admin-ui/cypress/e2e/routes.cy.ts
@@ -1,5 +1,6 @@
 import { stubPlus } from "cypress/support/stubs";
 
+import { ADD_SYSTEMS_ROUTE } from "~/constants";
 import { RoleRegistryEnum } from "~/types/api";
 
 describe("Routes", () => {
@@ -22,7 +23,7 @@ describe("Routes", () => {
     it("admins can access many routes", () => {
       cy.assumeRole(RoleRegistryEnum.OWNER);
       cy.visit("/");
-      cy.visit("/add-systems");
+      cy.visit(ADD_SYSTEMS_ROUTE);
       cy.wait("@getSystems");
       cy.getByTestId("add-systems");
       cy.visit("/privacy-requests");
@@ -50,7 +51,7 @@ describe("Routes", () => {
       ].forEach((role) => {
         cy.assumeRole(role);
         // cannot access /add-systems
-        cy.visit("/add-systems");
+        cy.visit(ADD_SYSTEMS_ROUTE);
         cy.getByTestId("add-systems").should("not.exist");
         cy.getByTestId("home-content");
         // cannot access /datastore-connection

diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
@@ -4,6 +4,8 @@ import {
   stubTaxonomyEntities,
 } from "cypress/support/stubs";
 
+import { SYSTEM_ROUTE } from "~/constants";
+
 describe("System management with Plus features", () => {
   beforeEach(() => {
     cy.login();
@@ -13,7 +15,6 @@ describe("System management with Plus features", () => {
     cy.intercept("GET", "/api/v1/system", {
       fixture: "systems/systems.json",
     }).as("getSystems");
-    cy.visit("/system");
   });
 
   describe("custom metadata", () => {
@@ -51,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");
@@ -74,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
@@ -1,5 +1,11 @@
 import { stubSystemCrud, stubTaxonomyEntities } from "cypress/support/stubs";
 
+import {
+  ADD_SYSTEMS_MANUAL_ROUTE,
+  ADD_SYSTEMS_ROUTE,
+  SYSTEM_ROUTE,
+} from "~/constants";
+
 describe("System management page", () => {
   beforeEach(() => {
     cy.login();
@@ -18,7 +24,7 @@ describe("System management page", () => {
 
   describe("Can view data", () => {
     beforeEach(() => {
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
     });
 
     it("Can render system cards", () => {
@@ -65,9 +71,9 @@ describe("System management page", () => {
       });
 
       it("shows available system types and lets the user choose one", () => {
-        cy.visit("/add-systems");
+        cy.visit(ADD_SYSTEMS_ROUTE);
         cy.getByTestId("manual-btn").click();
-        cy.url().should("contain", "/add-systems/new");
+        cy.url().should("contain", ADD_SYSTEMS_MANUAL_ROUTE);
         cy.wait("@getConnectionTypes");
         cy.getByTestId("header").contains("Choose a type of system");
         cy.getByTestId("bigquery-item");
@@ -83,7 +89,7 @@ describe("System management page", () => {
       });
 
       it("should allow searching", () => {
-        cy.visit("/add-systems/new");
+        cy.visit(ADD_SYSTEMS_MANUAL_ROUTE);
         cy.wait("@getConnectionTypes");
         cy.getByTestId("bigquery-item");
         cy.getByTestId("system-catalog-search").type("db");
@@ -102,9 +108,9 @@ describe("System management page", () => {
       it("Can step through the flow", () => {
         cy.fixture("systems/system.json").then((system) => {
           // Fill in the describe form based on fixture data
-          cy.visit("/add-systems");
+          cy.visit(ADD_SYSTEMS_ROUTE);
           cy.getByTestId("manual-btn").click();
-          cy.url().should("contain", "/add-systems/new");
+          cy.url().should("contain", ADD_SYSTEMS_MANUAL_ROUTE);
           cy.wait("@getSystems");
           cy.wait("@getConnectionTypes");
           cy.getByTestId("create-system-btn").click();
@@ -172,7 +178,7 @@ describe("System management page", () => {
       });
 
       it("can render a warning when there is unsaved data", () => {
-        cy.visit("/add-systems/new");
+        cy.visit(ADD_SYSTEMS_MANUAL_ROUTE);
         cy.wait("@getSystems");
         cy.wait("@getConnectionTypes");
         cy.getByTestId("create-system-btn").click();
@@ -208,7 +214,7 @@ describe("System management page", () => {
     });
 
     it("Can delete a system from its card", () => {
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
       cy.getByTestId("system-fidesctl_system").within(() => {
         cy.getByTestId("more-btn").click();
         cy.getByTestId("delete-btn").click();
@@ -233,7 +239,7 @@ describe("System management page", () => {
           },
         },
       }).as("deleteSystemError");
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
       cy.getByTestId("system-fidesctl_system").within(() => {
         cy.getByTestId("more-btn").click();
         cy.getByTestId("delete-btn").click();
@@ -249,15 +255,35 @@ describe("System management page", () => {
     beforeEach(() => {
       stubSystemCrud();
       stubTaxonomyEntities();
-      cy.visit("/system");
+      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", "/system/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");
@@ -408,10 +434,15 @@ 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", () => {
-      cy.visit("/system");
+      cy.visit(SYSTEM_ROUTE);
       cy.getByTestId("system-fidesctl_system").within(() => {
         cy.getByTestId("more-btn").click();
         cy.getByTestId("edit-btn").click();
@@ -437,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");
-      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();
@@ -464,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");
-        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/constants.ts b/clients/admin-ui/src/constants.ts
@@ -139,10 +139,11 @@ export const CONNECTION_ROUTE = "/connection";
 export const CONNECTION_TYPE_ROUTE = "/connection_type";
 
 // UI ROUTES
-export const CONFIG_WIZARD_ROUTE = "/add-systems";
+export const ADD_SYSTEMS_ROUTE = "/add-systems";
+export const ADD_SYSTEMS_MANUAL_ROUTE = "/add-systems/manual";
 export const DATAMAP_ROUTE = "/datamap";
 export const DATASTORE_CONNECTION_ROUTE = "/datastore-connection";
 export const PRIVACY_REQUESTS_ROUTE = "/privacy-requests";
 export const PRIVACY_REQUESTS_CONFIGURATION_ROUTE =
   "/privacy-requests/configure";
-export const SYSTEM_ROUTE = "/system";
+export const SYSTEM_ROUTE = "/systems";
diff --git a/clients/admin-ui/src/features/common/hooks/useInterzoneNav.ts b/clients/admin-ui/src/features/common/hooks/useInterzoneNav.ts
@@ -1,3 +1,4 @@
+import { SYSTEM_ROUTE } from "~/constants";
 import { useFeatures } from "~/features/common/features";
 import { resolveLink } from "~/features/common/nav/zone-config";
 
@@ -13,7 +14,7 @@ export const useInterzoneNav = () => {
    * Often we need to either go to the systems page or the datamap page
    * depending on if this is an open source or plus instance
    */
-  const systemOrDatamapRoute = features.plus ? datamapRoute.href : "/system";
+  const systemOrDatamapRoute = features.plus ? datamapRoute.href : SYSTEM_ROUTE;
 
   return { systemOrDatamapRoute };
 };