From 50e7642cbea740babcb18d229084138c4e4d2918 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Wed, 28 Jun 2023 10:39:20 -0400 Subject: [PATCH 1/8] WIP: gear icon for user management route in nav --- .../admin-ui/src/features/common/Header.tsx | 7 + .../src/features/common/nav/v2/nav-config.ts | 162 +++++++++--------- 2 files changed, 88 insertions(+), 81 deletions(-) diff --git a/clients/admin-ui/src/features/common/Header.tsx b/clients/admin-ui/src/features/common/Header.tsx index 2c17dbd745..622c16ce28 100644 --- a/clients/admin-ui/src/features/common/Header.tsx +++ b/clients/admin-ui/src/features/common/Header.tsx @@ -8,6 +8,7 @@ import { MenuItem, MenuList, QuestionIcon, + SettingsIcon, Stack, Text, UserIcon, @@ -18,6 +19,7 @@ import React from "react"; import logoImage from "~/../public/logo.svg"; import { useAppDispatch, useAppSelector } from "~/app/hooks"; import { INDEX_ROUTE } from "~/constants"; +import { USER_MANAGEMENT_ROUTE } from "./nav/v2/routes"; import { logout, selectUser, useLogoutMutation } from "~/features/auth"; import Image from "~/features/common/Image"; @@ -59,6 +61,11 @@ const Header: React.FC = () => { + + + {username && ( Date: Wed, 28 Jun 2023 18:04:07 -0400 Subject: [PATCH 2/8] fix user-management-route not working --- .../src/features/common/nav/v2/NavTopBar.tsx | 23 +++-- .../src/features/common/nav/v2/nav-config.ts | 94 +++++++++---------- 2 files changed, 60 insertions(+), 57 deletions(-) diff --git a/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx b/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx index 7dc04bde9a..2ae7f6094c 100644 --- a/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx +++ b/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx @@ -21,16 +21,19 @@ export const NavTopBar = () => { borderColor="gray.100" > {nav.groups.map((group) => { - // The group links to its first child's path. - const { path } = group.children[0]!; - - const isActive = group.title === nav.active?.title; - - return ( - - {group.title} - - ); + // "Management" is navigated to via the gear icon, so don't display it in the nav + if (group.title !== "Management") { + // The group links to its first child's path. + const { path } = group.children[0]!; + + const isActive = group.title === nav.active?.title; + + return ( + + {group.title} + + ); + } })} ); diff --git a/clients/admin-ui/src/features/common/nav/v2/nav-config.ts b/clients/admin-ui/src/features/common/nav/v2/nav-config.ts index bc3ab481e2..ff8e1730ba 100644 --- a/clients/admin-ui/src/features/common/nav/v2/nav-config.ts +++ b/clients/admin-ui/src/features/common/nav/v2/nav-config.ts @@ -114,53 +114,53 @@ export const NAV_CONFIG: NavConfigGroup[] = [ }, ], }, - // { - // title: "Management", - // routes: [ - // { - // title: "Users", - // path: routes.USER_MANAGEMENT_ROUTE, - // scopes: [ - // ScopeRegistryEnum.USER_UPDATE, - // ScopeRegistryEnum.USER_CREATE, - // ScopeRegistryEnum.USER_PERMISSION_UPDATE, - // ScopeRegistryEnum.USER_READ, - // ], - // }, - // { - // title: "Organization", - // path: routes.ORGANIZATION_MANAGEMENT_ROUTE, - // requiresFlag: "organizationManagement", - // scopes: [ - // ScopeRegistryEnum.ORGANIZATION_READ, - // ScopeRegistryEnum.ORGANIZATION_UPDATE, - // ], - // }, - // { - // title: "Taxonomy", - // path: routes.TAXONOMY_ROUTE, - // scopes: [ - // ScopeRegistryEnum.DATA_CATEGORY_CREATE, - // ScopeRegistryEnum.DATA_CATEGORY_UPDATE, - // ScopeRegistryEnum.DATA_USE_CREATE, - // ScopeRegistryEnum.DATA_USE_UPDATE, - // ScopeRegistryEnum.DATA_SUBJECT_CREATE, - // ScopeRegistryEnum.DATA_SUBJECT_UPDATE, - // ], - // }, - // { - // title: "Custom fields", - // path: routes.CUSTOM_FIELDS_ROUTE, - // scopes: [ScopeRegistryEnum.CUSTOM_FIELD_READ], - // requiresPlus: true, - // }, - // { - // title: "About Fides", - // path: routes.ABOUT_ROUTE, - // scopes: [ScopeRegistryEnum.USER_READ], // temporary scope while we don't have a scope for beta features - // }, - // ], - // }, + { + title: "Management", + routes: [ + { + title: "Users", + path: routes.USER_MANAGEMENT_ROUTE, + scopes: [ + ScopeRegistryEnum.USER_UPDATE, + ScopeRegistryEnum.USER_CREATE, + ScopeRegistryEnum.USER_PERMISSION_UPDATE, + ScopeRegistryEnum.USER_READ, + ], + }, + { + title: "Organization", + path: routes.ORGANIZATION_MANAGEMENT_ROUTE, + requiresFlag: "organizationManagement", + scopes: [ + ScopeRegistryEnum.ORGANIZATION_READ, + ScopeRegistryEnum.ORGANIZATION_UPDATE, + ], + }, + { + title: "Taxonomy", + path: routes.TAXONOMY_ROUTE, + scopes: [ + ScopeRegistryEnum.DATA_CATEGORY_CREATE, + ScopeRegistryEnum.DATA_CATEGORY_UPDATE, + ScopeRegistryEnum.DATA_USE_CREATE, + ScopeRegistryEnum.DATA_USE_UPDATE, + ScopeRegistryEnum.DATA_SUBJECT_CREATE, + ScopeRegistryEnum.DATA_SUBJECT_UPDATE, + ], + }, + { + title: "Custom fields", + path: routes.CUSTOM_FIELDS_ROUTE, + scopes: [ScopeRegistryEnum.CUSTOM_FIELD_READ], + requiresPlus: true, + }, + { + title: "About Fides", + path: routes.ABOUT_ROUTE, + scopes: [ScopeRegistryEnum.USER_READ], // temporary scope while we don't have a scope for beta features + }, + ], + }, ]; export type NavGroupChild = { From 55d418c7cb480fae36177d7bd0510880df6820a8 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Wed, 28 Jun 2023 18:15:13 -0400 Subject: [PATCH 3/8] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5e4b25967..70294aa4d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ The types of changes are: ### Changed - Moved GPC preferences slightly earlier in Fides.js lifecycle [#3561](https://github.com/ethyca/fides/pull/3561) +- Moved "management" tab from nav into settings icon in top right [#3701](https://github.com/ethyca/fides/pull/3701) ## [2.15.0](https://github.com/ethyca/fides/compare/2.14.1...2.15.0) From 770e44f3a445181745aade928f4888b1cd8d4a44 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Wed, 28 Jun 2023 18:24:51 -0400 Subject: [PATCH 4/8] prepare for merge --- clients/admin-ui/src/features/common/Header.tsx | 3 ++- clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/clients/admin-ui/src/features/common/Header.tsx b/clients/admin-ui/src/features/common/Header.tsx index 622c16ce28..ed0a475cf0 100644 --- a/clients/admin-ui/src/features/common/Header.tsx +++ b/clients/admin-ui/src/features/common/Header.tsx @@ -19,10 +19,11 @@ import React from "react"; import logoImage from "~/../public/logo.svg"; import { useAppDispatch, useAppSelector } from "~/app/hooks"; import { INDEX_ROUTE } from "~/constants"; -import { USER_MANAGEMENT_ROUTE } from "./nav/v2/routes"; import { logout, selectUser, useLogoutMutation } from "~/features/auth"; import Image from "~/features/common/Image"; +import { USER_MANAGEMENT_ROUTE } from "./nav/v2/routes"; + const useHeader = () => { const { username } = useAppSelector(selectUser) ?? { username: "" }; return { username }; diff --git a/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx b/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx index 2ae7f6094c..a6df5c3016 100644 --- a/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx +++ b/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx @@ -25,15 +25,17 @@ export const NavTopBar = () => { if (group.title !== "Management") { // The group links to its first child's path. const { path } = group.children[0]!; - + const isActive = group.title === nav.active?.title; - + return ( {group.title} ); } + + return null; })} ); From 0f8c32e61114354802898f69708eb2201f568585 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Thu, 29 Jun 2023 10:44:27 -0400 Subject: [PATCH 5/8] update tests for new requirements --- .../features/common/nav/v2/nav-config.test.ts | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts b/clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts index fb04f77367..4af3cf0713 100644 --- a/clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts +++ b/clients/admin-ui/src/features/common/nav/v2/nav-config.test.ts @@ -35,19 +35,8 @@ describe("configureNavGroups", () => { children: [{ title: "Home", path: "/" }], }); - expect(navGroups[1]).toMatchObject({ - title: "Privacy requests", - children: [ - { title: "Request manager", path: routes.PRIVACY_REQUESTS_ROUTE }, - { - title: "Connection manager", - path: routes.DATASTORE_CONNECTION_ROUTE, - }, - ], - }); - // NOTE: the data map should _not_ include the Plus routes (/plus/datamap, /classify-systems, etc.) - expect(navGroups[2]).toMatchObject({ + expect(navGroups[1]).toMatchObject({ title: "Data map", children: [ { title: "View systems", path: routes.SYSTEM_ROUTE }, @@ -56,12 +45,14 @@ describe("configureNavGroups", () => { ], }); - expect(navGroups[3]).toMatchObject({ - title: "Management", + expect(navGroups[2]).toMatchObject({ + title: "Privacy requests", children: [ - { title: "Users", path: routes.USER_MANAGEMENT_ROUTE }, - { title: "Taxonomy", path: routes.TAXONOMY_ROUTE }, - { title: "About Fides", path: routes.ABOUT_ROUTE }, + { title: "Request manager", path: routes.PRIVACY_REQUESTS_ROUTE }, + { + title: "Connection manager", + path: routes.DATASTORE_CONNECTION_ROUTE, + }, ], }); }); @@ -79,7 +70,7 @@ describe("configureNavGroups", () => { }); // The data map _should_ include the actual "/plus/datamap". - expect(navGroups[2]).toMatchObject({ + expect(navGroups[1]).toMatchObject({ title: "Data map", children: [ { title: "View map", path: routes.DATAMAP_ROUTE }, @@ -147,7 +138,7 @@ describe("configureNavGroups", () => { }); // The data map should _not_ include the actual "/plus/datamap". - expect(navGroups[2]).toMatchObject({ + expect(navGroups[1]).toMatchObject({ title: "Data map", children: [ { title: "View systems", path: routes.SYSTEM_ROUTE }, From fe76cd58f7998e42271296100a12f46f7104a8ce Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Thu, 29 Jun 2023 15:34:50 -0400 Subject: [PATCH 6/8] update Cypress tests, formatting cleanup --- CHANGELOG.md | 3 --- clients/admin-ui/cypress/e2e/nav-bar.cy.ts | 11 ++++----- .../admin-ui/src/features/common/Header.tsx | 10 +++++--- .../src/features/common/nav/v2/NavTopBar.tsx | 23 +++++++++---------- 4 files changed, 23 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8969443424..50a623b496 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,11 +32,8 @@ The types of changes are: ### Changed - Moved GPC preferences slightly earlier in Fides.js lifecycle [#3561](https://github.com/ethyca/fides/pull/3561) -<<<<<<< HEAD - Moved "management" tab from nav into settings icon in top right [#3701](https://github.com/ethyca/fides/pull/3701) -======= - Update EU PrivacyNoticeRegion codes and allow experience filtering to drop back to country filtering if region not found [#3630](https://github.com/ethyca/fides/pull/3630) ->>>>>>> main ## [2.15.0](https://github.com/ethyca/fides/compare/2.14.1...2.15.0) diff --git a/clients/admin-ui/cypress/e2e/nav-bar.cy.ts b/clients/admin-ui/cypress/e2e/nav-bar.cy.ts index b9ec2ae7ec..890983ccfb 100644 --- a/clients/admin-ui/cypress/e2e/nav-bar.cy.ts +++ b/clients/admin-ui/cypress/e2e/nav-bar.cy.ts @@ -6,11 +6,10 @@ describe("Nav Bar", () => { it("renders all navigation links", () => { cy.visit("/"); - cy.get("nav a").should("have.length", 4); + cy.get("nav a").should("have.length", 3); cy.contains("nav a", "Home"); - cy.contains("nav a", "Privacy requests"); cy.contains("nav a", "Data map"); - cy.contains("nav a", "Management"); + cy.contains("nav a", "Privacy requests"); }); it("styles the active navigation link based on the current route", () => { @@ -22,18 +21,18 @@ describe("Nav Bar", () => { cy.contains("nav a", "Home") .should("have.css", "background-color") .should("eql", ACTIVE_COLOR); - cy.contains("nav a", "Management") + cy.contains("nav a", "Data map") .should("have.css", "background-color") .should("not.eql", ACTIVE_COLOR); // Navigate by clicking a nav link. - cy.contains("nav a", "Management").click(); + cy.contains("nav a", "Data map").click(); // The nav should update which page is active. cy.contains("nav a", "Home") .should("have.css", "background-color") .should("not.eql", ACTIVE_COLOR); - cy.contains("nav a", "Management") + cy.contains("nav a", "Data map") .should("have.css", "background-color") .should("eql", ACTIVE_COLOR); }); diff --git a/clients/admin-ui/src/features/common/Header.tsx b/clients/admin-ui/src/features/common/Header.tsx index ed0a475cf0..5aa3873aa5 100644 --- a/clients/admin-ui/src/features/common/Header.tsx +++ b/clients/admin-ui/src/features/common/Header.tsx @@ -1,6 +1,7 @@ import { Button, Flex, + IconButton, Link, Menu, MenuButton, @@ -63,9 +64,12 @@ const Header: React.FC = () => { - + } + /> {username && ( diff --git a/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx b/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx index a6df5c3016..493e5ce0a3 100644 --- a/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx +++ b/clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx @@ -22,20 +22,19 @@ export const NavTopBar = () => { > {nav.groups.map((group) => { // "Management" is navigated to via the gear icon, so don't display it in the nav - if (group.title !== "Management") { - // The group links to its first child's path. - const { path } = group.children[0]!; - - const isActive = group.title === nav.active?.title; - - return ( - - {group.title} - - ); + if (group.title === "Management") { + return null; } + // The group links to its first child's path. + const { path } = group.children[0]!; + + const isActive = group.title === nav.active?.title; - return null; + return ( + + {group.title} + + ); })} ); From 4a14a0bb0131194f068add436c38a2d99d366c02 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Thu, 29 Jun 2023 16:12:09 -0400 Subject: [PATCH 7/8] fix formatting (again) --- clients/admin-ui/src/features/common/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clients/admin-ui/src/features/common/Header.tsx b/clients/admin-ui/src/features/common/Header.tsx index 5aa3873aa5..c69497cb8f 100644 --- a/clients/admin-ui/src/features/common/Header.tsx +++ b/clients/admin-ui/src/features/common/Header.tsx @@ -68,7 +68,7 @@ const Header: React.FC = () => { aria-label="Management" size="sm" variant="ghost" - icon={} + icon={} /> {username && ( From d499e123a747b021acf036f546e277522e404c05 Mon Sep 17 00:00:00 2001 From: Jeremy Pople Date: Thu, 29 Jun 2023 16:51:46 -0400 Subject: [PATCH 8/8] update remaining Cypress tests --- clients/admin-ui/cypress/e2e/organization.cy.ts | 2 +- clients/admin-ui/cypress/e2e/taxonomy.cy.ts | 2 +- clients/admin-ui/src/features/common/Header.tsx | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/clients/admin-ui/cypress/e2e/organization.cy.ts b/clients/admin-ui/cypress/e2e/organization.cy.ts index 4cbfa0492e..2f38247c07 100644 --- a/clients/admin-ui/cypress/e2e/organization.cy.ts +++ b/clients/admin-ui/cypress/e2e/organization.cy.ts @@ -10,7 +10,7 @@ describe("Organization page", () => { it("can navigate to the Organization page", () => { cy.visit("/"); - cy.contains("nav a", "Management").click(); + cy.getByTestId("management-btn").click(); cy.contains("nav a", "Organization").click(); cy.getByTestId("organization-management"); }); diff --git a/clients/admin-ui/cypress/e2e/taxonomy.cy.ts b/clients/admin-ui/cypress/e2e/taxonomy.cy.ts index 70921c53f1..5861fd56f7 100644 --- a/clients/admin-ui/cypress/e2e/taxonomy.cy.ts +++ b/clients/admin-ui/cypress/e2e/taxonomy.cy.ts @@ -8,7 +8,7 @@ describe("Taxonomy management page", () => { it("Can navigate to the taxonomy page", () => { cy.visit("/"); - cy.contains("nav a", "Management").click(); + cy.getByTestId("management-btn").click(); cy.contains("nav a", "Taxonomy").click(); cy.getByTestId("taxonomy-tabs"); cy.getByTestId("tab-Data Categories"); diff --git a/clients/admin-ui/src/features/common/Header.tsx b/clients/admin-ui/src/features/common/Header.tsx index c69497cb8f..75b06810ff 100644 --- a/clients/admin-ui/src/features/common/Header.tsx +++ b/clients/admin-ui/src/features/common/Header.tsx @@ -69,6 +69,7 @@ const Header: React.FC = () => { size="sm" variant="ghost" icon={} + data-testid="management-btn" /> {username && (