CR

cypress/integration/nav_bar.ts

@@ -122,11 +122,13 @@ describe("Nav Bar", () => {
       };
       cy.overwriteGQL("User", userData);
       cy.visit(SPRUCE_URLS.version);
+      cy.dataCy("user-dropdown-link").click();
       cy.dataCy("admin-link").should("not.exist");
     });
 
     it("Should show Admin button to admins", () => {
       cy.visit(SPRUCE_URLS.version);
+      cy.dataCy("user-dropdown-link").click();
       cy.dataCy("admin-link")
         .should("be.visible")
         .should("have.attr", "href", LEGACY_URLS.admin);

src/analytics/navbar/useNavbarAnalytics.ts

@@ -1,6 +1,7 @@
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
 
 type Action =
+  | { name: "Click Admin Link" }
   | { name: "Click Legacy UI Link" }
   | { name: "Click Logo Link" }
   | { name: "Click Waterfall Link" }

src/components/Header/NavDropdown/index.tsx

@@ -12,7 +12,7 @@ const NavDropdownMenuIcon: React.FC<{ open: boolean }> = ({ open }) => (
   <Icon glyph={open ? "CaretUp" : "CaretDown"} role="presentation" />
 );
 
-interface MenuItemType {
+export interface MenuItemType {
   "data-cy"?: string;
   text: string;
   href?: string;

src/components/Header/Navbar.tsx

@@ -8,7 +8,7 @@ import { Link, useParams } from "react-router-dom";
 import { useNavbarAnalytics } from "analytics";
 import Icon from "components/Icon";
 import { CURRENT_PROJECT } from "constants/cookies";
-import { adminSettingsURL, wikiUrl } from "constants/externalResources";
+import { wikiUrl } from "constants/externalResources";
 import { getCommitsRoute, getUserPatchesRoute, routes } from "constants/routes";
 import { size } from "constants/tokens";
 import { useAuthStateContext } from "context/auth";
@@ -27,7 +27,7 @@ export const Navbar: React.FC = () => {
 
   const { data: userData } = useQuery<UserQuery>(GET_USER);
   const { user } = userData || {};
-  const { permissions, userId } = user || {};
+  const { userId } = user || {};
 
   const { projectIdentifier: projectFromUrl } = useParams<{
     projectIdentifier: string;
@@ -82,11 +82,6 @@ export const Navbar: React.FC = () => {
         >
           My Hosts
         </PrimaryLink>
-        {permissions?.canEditAdminSettings && (
-          <PrimaryLink data-cy="admin-link" to={adminSettingsURL}>
-            Admin
-          </PrimaryLink>
-        )}
         <AuxiliaryDropdown projectIdentifier={projectIdentifier} />
       </NavActionContainer>
       <NavActionContainer>

src/components/Header/UserDropdown.tsx

@@ -1,20 +1,21 @@
 import { useQuery } from "@apollo/client";
 import { useNavbarAnalytics } from "analytics";
+import { adminSettingsURL } from "constants/externalResources";
 import { PreferencesTabRoutes, getPreferencesRoute } from "constants/routes";
 import { useAuthDispatchContext } from "context/auth";
 import { UserQuery } from "gql/generated/types";
 import { GET_USER } from "gql/queries";
-import { NavDropdown } from "./NavDropdown";
+import { MenuItemType, NavDropdown } from "./NavDropdown";
 
 export const UserDropdown = () => {
   const { data } = useQuery<UserQuery>(GET_USER);
   const { user } = data || {};
-  const { displayName } = user || {};
+  const { displayName, permissions } = user || {};
 
   const { logoutAndRedirect } = useAuthDispatchContext();
   const { sendEvent } = useNavbarAnalytics();
 
-  const menuItems = [
+  const menuItems: MenuItemType[] = [
     {
       text: "Preferences",
       to: getPreferencesRoute(PreferencesTabRoutes.Profile),
@@ -31,7 +32,14 @@ export const UserDropdown = () => {
       onClick: () => logoutAndRedirect(),
     },
   ];
-
+  if (permissions?.canEditAdminSettings) {
+    menuItems.splice(1, 0, {
+      "data-cy": "admin-link",
+      text: "Admin",
+      href: adminSettingsURL,
+      onClick: () => sendEvent({ name: "Click Admin Link" }),
+    });
+  }
   return (
     <NavDropdown
       dataCy="user-dropdown-link"