From fa9c4889cc14838d1dfc9b5a7d92f24cd35bb2c8 Mon Sep 17 00:00:00 2001
From: Arjun Patel <arjun453@gmail.com>
Date: Thu, 14 Sep 2023 15:41:02 -0400
Subject: [PATCH] CR

---
 cypress/integration/nav_bar.ts              |  2 ++
 src/analytics/navbar/useNavbarAnalytics.ts  |  1 +
 src/components/Header/NavDropdown/index.tsx |  2 +-
 src/components/Header/Navbar.tsx            |  9 ++-------
 src/components/Header/UserDropdown.tsx      | 16 ++++++++++++----
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/cypress/integration/nav_bar.ts b/cypress/integration/nav_bar.ts
index 32e29941e3..9a7139dfc4 100644
--- a/cypress/integration/nav_bar.ts
+++ b/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);
diff --git a/src/analytics/navbar/useNavbarAnalytics.ts b/src/analytics/navbar/useNavbarAnalytics.ts
index 46db8bdc8a..71c5c25841 100644
--- a/src/analytics/navbar/useNavbarAnalytics.ts
+++ b/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" }
diff --git a/src/components/Header/NavDropdown/index.tsx b/src/components/Header/NavDropdown/index.tsx
index b9fe0156ec..9c38ff02ee 100644
--- a/src/components/Header/NavDropdown/index.tsx
+++ b/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;
diff --git a/src/components/Header/Navbar.tsx b/src/components/Header/Navbar.tsx
index 8a4949e96a..1ce994c084 100644
--- a/src/components/Header/Navbar.tsx
+++ b/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>
diff --git a/src/components/Header/UserDropdown.tsx b/src/components/Header/UserDropdown.tsx
index eec1b6cd99..aac144d773 100644
--- a/src/components/Header/UserDropdown.tsx
+++ b/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"