[#noissue] Fix menu display based on configuration

pinpoint-apm · Jun 4, 2024 · 343dca3 · 343dca3
1 parent d677f44
commit 343dca3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 36 deletions.
diff --git a/web-frontend/src/main/v3/apps/web/src/components/Layout/LayoutWithSideNavigation.tsx b/web-frontend/src/main/v3/apps/web/src/components/Layout/LayoutWithSideNavigation.tsx
@@ -32,7 +32,6 @@ export const LayoutWithSideNavigation = ({ ...props }: LayoutWithSideNavigationP
       name: 'Servermap',
       path: APP_PATH.SERVER_MAP,
       href: getServerMapPath(application, searchParameters),
-      show: true,
     },
     {
       icon: <FaChartLine />,
@@ -45,21 +44,21 @@ export const LayoutWithSideNavigation = ({ ...props }: LayoutWithSideNavigationP
       name: 'URL Statistic',
       path: APP_PATH.URL_STATISTIC,
       href: getUrlStatPath(application, searchParameters),
-      show: true,
+      hide: !configuration?.showUrlStat,
     },
     {
       icon: <FaServer />,
       name: 'Infrastructure',
       path: APP_PATH.SYSTEM_METRIC,
       href: getSystemMetricPath(),
-      show: true,
+      hide: !configuration?.showSystemMetric,
     },
     {
       icon: <FaBug />,
       name: 'Error Analysis',
       path: APP_PATH.ERROR_ANALYSIS,
       href: getErrorAnalysisPath(application, searchParameters),
-      show: configuration?.showExceptionTrace,
+      hide: !configuration?.showExceptionTrace,
     },
   ];
 
@@ -69,21 +68,18 @@ export const LayoutWithSideNavigation = ({ ...props }: LayoutWithSideNavigationP
       name: CONFIG_MENU_MAP.ADMINISTRATION.title,
       path: APP_PATH.CONFIG_USERS,
       childItems: CONFIG_MENU_MAP.ADMINISTRATION.menus,
-      show: true,
     },
     {
       icon: <FaCog />,
       name: CONFIG_MENU_MAP.CONFIGURATION.title,
       path: APP_PATH.CONFIG_USER_GROUP,
       childItems: CONFIG_MENU_MAP.CONFIGURATION.menus,
-      show: true,
     },
     {
       icon: <LuUserCircle2 />,
       name: 'User',
       path: APP_PATH.CONFIG_GENERAL,
       childItems: CONFIG_MENU_MAP.PERSONAL_SETTINGS.menus,
-      show: true,
     },
     {
       children: (collapsed) => (
@@ -98,7 +94,6 @@ export const LayoutWithSideNavigation = ({ ...props }: LayoutWithSideNavigationP
       name: 'Go to Pinpoint v2',
       path: 'gotoV2',
       aHref: '/v2',
-      show: true,
     },
   ];
 

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Layout/LayoutWithSideNavigation.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Layout/LayoutWithSideNavigation.tsx
@@ -17,7 +17,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '..';
 import { useDebounce, useHover } from 'usehooks-ts';
 
 export type SideNavigationMenuItem = {
-  show?: boolean;
+  hide?: boolean;
   path: string | string[];
   name?: string;
   href?: string;
@@ -72,40 +72,36 @@ export const LayoutWithSideNavigation = ({
     }, [collapsed]);
 
     return (
-      item.show && (
-        <SubMenu
-          ref={hoverRef}
-          label={item.name}
-          icon={item.icon}
-          active={isActive}
-          defaultOpen={isActive}
-          onClick={(e) => {
-            if (collapsed) {
-              e.stopPropagation();
-              e.preventDefault();
-              return;
-            }
-          }}
-        >
-          {collapsed && (
-            <MenuItemComponent
-              className="bg-[var(--blue-800)] pointer-events-none"
-              active={isActive}
-            >
-              {item.name}
-            </MenuItemComponent>
-          )}
-          {item.childItems?.map((childItem) => MenuItem({ item: childItem, className: 'text-sm' }))}
-        </SubMenu>
-      )
+      <SubMenu
+        className={`${item.hide && 'hidden'}`}
+        ref={hoverRef}
+        label={item.name}
+        icon={item.icon}
+        active={isActive}
+        defaultOpen={isActive}
+        onClick={(e) => {
+          if (collapsed) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+          }
+        }}
+      >
+        {collapsed && (
+          <MenuItemComponent className="bg-[var(--blue-800)] pointer-events-none" active={isActive}>
+            {item.name}
+          </MenuItemComponent>
+        )}
+        {item.childItems?.map((childItem) => MenuItem({ item: childItem, className: 'text-sm' }))}
+      </SubMenu>
     );
   };
 
   const MenuItem = ({ item, className }: MenuItemProps) => {
     return (
       <MenuItemComponent
         component={item.aHref ? <a href={item.aHref} /> : <Link to={`${item.href}`} />}
-        className={cn({ 'hidden!': !item.show }, className)}
+        className={cn({ '!hidden': item.hide }, className)}
         active={
           Array.isArray(item.path) ? item.path.includes(pathname) : pathname.startsWith(item.path)
         }