3631: add gear icon to nav

CHANGELOG.md

@@ -32,7 +32,11 @@ 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)

clients/admin-ui/src/features/common/Header.tsx

@@ -8,6 +8,7 @@ import {
   MenuItem,
   MenuList,
   QuestionIcon,
+  SettingsIcon,
   Stack,
   Text,
   UserIcon,
@@ -21,6 +22,8 @@ import { INDEX_ROUTE } from "~/constants";
 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 };
@@ -59,6 +62,11 @@ const Header: React.FC = () => {
             <QuestionIcon color="gray.700" boxSize={4} />
           </Button>
         </Link>
+        <NextLink href={USER_MANAGEMENT_ROUTE} passHref>
+          <Button size="sm" variant="ghost">
+            <SettingsIcon color="gray.700" boxSize={4} />
+          </Button>
+        </NextLink>
         {username && (
           <Menu>
             <MenuButton

clients/admin-ui/src/features/common/nav/v2/NavTopBar.tsx

@@ -21,16 +21,21 @@ export const NavTopBar = () => {
       borderColor="gray.100"
     >
       {nav.groups.map((group) => {
-        // The group links to its first child's path.
-        const { path } = group.children[0]!;
+        // "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;
+          const isActive = group.title === nav.active?.title;
 
-        return (
-          <NavTopBarLink key={group.title} href={path} isActive={isActive}>
-            {group.title}
-          </NavTopBarLink>
-        );
+          return (
+            <NavTopBarLink key={group.title} href={path} isActive={isActive}>
+              {group.title}
+            </NavTopBarLink>
+          );
+        }
+
+        return null;
       })}
     </Flex>
   );

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 },

clients/admin-ui/src/features/common/nav/v2/nav-config.ts

@@ -32,6 +32,41 @@ export const NAV_CONFIG: NavConfigGroup[] = [
       },
     ],
   },
+  {
+    title: "Data map",
+    routes: [
+      {
+        title: "View map",
+        path: routes.DATAMAP_ROUTE,
+        requiresPlus: true,
+        scopes: [ScopeRegistryEnum.DATAMAP_READ],
+      },
+      {
+        title: "View systems",
+        path: routes.SYSTEM_ROUTE,
+        scopes: [ScopeRegistryEnum.SYSTEM_READ],
+      },
+      {
+        title: "Add systems",
+        path: routes.ADD_SYSTEMS_ROUTE,
+        scopes: [ScopeRegistryEnum.SYSTEM_CREATE],
+      },
+      {
+        title: "Manage datasets",
+        path: routes.DATASET_ROUTE,
+        scopes: [
+          ScopeRegistryEnum.CTL_DATASET_CREATE,
+          ScopeRegistryEnum.CTL_DATASET_UPDATE,
+        ],
+      },
+      {
+        title: "Classify systems",
+        path: routes.CLASSIFY_SYSTEMS_ROUTE,
+        requiresPlus: true,
+        scopes: [ScopeRegistryEnum.SYSTEM_UPDATE], // temporary scope until we decide what to do here
+      },
+    ],
+  },
   {
     title: "Privacy requests",
     routes: [
@@ -79,41 +114,6 @@ export const NAV_CONFIG: NavConfigGroup[] = [
       },
     ],
   },
-  {
-    title: "Data map",
-    routes: [
-      {
-        title: "View map",
-        path: routes.DATAMAP_ROUTE,
-        requiresPlus: true,
-        scopes: [ScopeRegistryEnum.DATAMAP_READ],
-      },
-      {
-        title: "View systems",
-        path: routes.SYSTEM_ROUTE,
-        scopes: [ScopeRegistryEnum.SYSTEM_READ],
-      },
-      {
-        title: "Add systems",
-        path: routes.ADD_SYSTEMS_ROUTE,
-        scopes: [ScopeRegistryEnum.SYSTEM_CREATE],
-      },
-      {
-        title: "Manage datasets",
-        path: routes.DATASET_ROUTE,
-        scopes: [
-          ScopeRegistryEnum.CTL_DATASET_CREATE,
-          ScopeRegistryEnum.CTL_DATASET_UPDATE,
-        ],
-      },
-      {
-        title: "Classify systems",
-        path: routes.CLASSIFY_SYSTEMS_ROUTE,
-        requiresPlus: true,
-        scopes: [ScopeRegistryEnum.SYSTEM_UPDATE], // temporary scope until we decide what to do here
-      },
-    ],
-  },
   {
     title: "Management",
     routes: [