From 24b061f79cf8c24e0d8b46728d8b5b0c6e0fa5c3 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Thu, 29 Aug 2024 11:07:20 -0400
Subject: [PATCH] HPCC-32542 ECL Watch v9 conditionally disable Security tab

disables the "Security" tab under operations based upon whether the
user is an admin, matches the behavior of the v5 UI's navigation

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/src-react/components/Menu.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/esp/src/src-react/components/Menu.tsx b/esp/src/src-react/components/Menu.tsx
index c83371c7ba2..ad77f8c47d3 100644
--- a/esp/src/src-react/components/Menu.tsx
+++ b/esp/src/src-react/components/Menu.tsx
@@ -6,9 +6,9 @@ import { hasLogAccess } from "src/ESPLog";
 import { containerized, bare_metal } from "src/BuildInfo";
 import { MainNav, routes } from "../routes";
 import { useFavorite, useFavorites, useHistory } from "../hooks/favorite";
-import { useUserTheme } from "../hooks/theme";
 import { useSessionStore } from "../hooks/store";
-import { usePivotItemDisable } from "../layouts/pivot";
+import { useUserTheme } from "../hooks/theme";
+import { useMyAccount } from "../hooks/user";
 import { Breadcrumbs } from "./Breadcrumbs";
 
 export interface NextPrevious {
@@ -226,7 +226,8 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
     hashPath
 }) => {
 
-    const { theme } = useUserTheme();
+    const { theme, themeV9 } = useUserTheme();
+    const { isAdmin } = useMyAccount();
 
     const [favorites] = useFavorites();
     const [favoriteCount, setFavoriteCount] = React.useState(0);
@@ -300,7 +301,12 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
             setLogsDisabled(true);
         });
     }, []);
-    const logsDisabledStyle = usePivotItemDisable(logsDisabled);
+    const linkStyle = React.useCallback((disabled) => {
+        return disabled ? {
+            background: themeV9.colorNeutralBackgroundDisabled,
+            color: themeV9.colorNeutralForegroundDisabled
+        } : {};
+    }, [themeV9]);
 
     const favoriteMenu: IContextualMenuItem[] = React.useMemo(() => {
         const retVal: IContextualMenuItem[] = [];
@@ -320,8 +326,9 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
                 <Stack horizontal>
                     <Stack.Item grow={0} className={navStyles.wrapper}>
                         {subMenuItems[mainNav]?.map((row, idx) => {
+                            const linkDisabled = (row.itemKey === "/topology/logs" && logsDisabled) || (row.itemKey.indexOf("security") > -1 && !isAdmin);
                             return <Link
-                                disabled={row.itemKey === "/topology/logs" && logsDisabled}
+                                disabled={linkDisabled}
                                 key={`MenuLink_${idx}`}
                                 href={`#${row.itemKey}`}
                                 className={[
@@ -329,7 +336,7 @@ export const SubNavigation: React.FunctionComponent<SubNavigationProps> = ({
                                     row.itemKey === subNav ? navStyles.active : "",
                                     !subNav && row.itemKey === "/topology/configuration" ? navStyles.active : ""
                                 ].join(" ")}
-                                style={row.itemKey === "/topology/logs" && logsDisabled ? logsDisabledStyle?.style : {}}
+                                style={linkStyle(linkDisabled)}
                             >
                                 {row.headerText}
                             </Link>;