chore: admin menu enterprise badge (#9656)

frontend/src/component/admin/AdminHome.tsx

@@ -5,6 +5,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import { formatAssetPath } from 'utils/formatPath';
 import easyToDeploy from 'assets/img/easyToDeploy.png';
+import { useNavigate } from 'react-router-dom';
 
 const StyledContainer = styled(Grid)(({ theme }) => ({
     display: 'flex',
@@ -169,6 +170,8 @@ const InstanceStatsWidget = ({
     projects,
     environments,
 }: IInstanceStatsWidgetProps) => {
+    const navigate = useNavigate();
+
     return (
         <StyledWidget>
             <InstanceStatsHeader>Instance statistics</InstanceStatsHeader>
@@ -200,10 +203,11 @@ const InstanceStatsWidget = ({
             </StyledGridContainer>
             <StyledLinkContainer>
                 <Button
-                    href='/admin/instance'
                     rel='noreferrer'
-                    target='_blank'
                     endIcon={<ArrowOutwardIcon />}
+                    onClick={() => {
+                        navigate('/admin/instance');
+                    }}
                 >
                     View all instance statistics
                 </Button>

frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx

@@ -64,6 +64,7 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     '&:hover': {
         backgroundColor: theme.palette.action.hover,
     },
+    paddingRight: theme.spacing(1.5),
 }));
 
 interface IMenuGroupProps {

frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx

@@ -5,7 +5,7 @@ import EventNoteIcon from '@mui/icons-material/EventNote';
 import BillingIcon from '@mui/icons-material/CreditCardOutlined';
 import PeopleOutlineRoundedIcon from '@mui/icons-material/PeopleOutlineRounded';
 import KeyRoundedIcon from '@mui/icons-material/KeyRounded';
-import CloudIcon from '@mui/icons-material/Cloud';
+import SingleSignOnIcon from '@mui/icons-material/AssignmentOutlined';
 import HubOutlinedIcon from '@mui/icons-material/HubOutlined';
 import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
 import EmptyIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
@@ -16,7 +16,7 @@ const icons: Record<string, typeof SvgIcon> = {
     users: PeopleOutlineRoundedIcon,
     '/admin/service-accounts': LaptopIcon,
     access: KeyRoundedIcon,
-    sso: CloudIcon,
+    sso: SingleSignOnIcon,
     network: HubOutlinedIcon,
     instance: BuildOutlinedIcon,
     '/admin/billing': BillingIcon,

frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx

@@ -11,17 +11,22 @@ import { filterByConfig } from 'component/common/util';
 import { filterAdminRoutes } from 'component/admin/filterAdminRoutes';
 import { adminGroups, adminRoutes } from 'component/admin/adminRoutes';
 import type { ReactNode } from 'react';
+import type { INavigationMenuItem } from 'interfaces/route';
+import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
+import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
 
 interface IMenuLinkItem {
     href: string;
     text: string;
     icon: ReactNode;
+    menuMode?: INavigationMenuItem['menu']['mode'];
 }
 
 interface IMenuItem {
     href: string;
     text: string;
     items?: IMenuLinkItem[];
+    menuMode?: INavigationMenuItem['menu']['mode'];
 }
 
 const SettingsHeader = styled(Typography)(({ theme }) => ({
@@ -98,6 +103,7 @@ export const AdminNavigationItems = ({
     const isActiveItem = (item?: string) =>
         item !== undefined && location.pathname === item;
     const location = useLocation();
+    const showBadge = useShowBadge();
 
     const routes = adminRoutes
         .filter(filterByConfig(uiConfig))
@@ -123,12 +129,14 @@ export const AdminNavigationItems = ({
                     href: route.path,
                     text: route.title,
                     icon: <StopRoundedIcon />,
+                    menuMode: route?.menu?.mode,
                 });
             }
             if (!route.group) {
                 acc[route.path] = {
                     href: route.path,
                     text: route.title,
+                    menuMode: route?.menu?.mode,
                 };
             }
             return acc;
@@ -164,6 +172,11 @@ export const AdminNavigationItems = ({
                                     selected={isActiveItem(subItem.href)}
                                     onClick={onClick}
                                     key={subItem.href}
+                                    badge={
+                                        showBadge(subItem.menuMode) ? (
+                                            <EnterprisePlanBadge />
+                                        ) : null
+                                    }
                                 >
                                     <StyledStopRoundedIcon />
                                 </AdminSubListItem>
@@ -178,6 +191,11 @@ export const AdminNavigationItems = ({
                         selected={isActiveItem(item.href)}
                         onClick={onClick}
                         key={item.href}
+                        badge={
+                            showBadge(item.menuMode) ? (
+                                <EnterprisePlanBadge />
+                            ) : null
+                        }
                     >
                         <IconRenderer path={item.href} active={false} />
                     </AdminListItem>

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { type FC, useCallback } from 'react';
+import type { FC } from 'react';
 import type { INavigationMenuItem } from 'interfaces/route';
 import type { NavigationMode } from './NavigationMode';
 import { ShowAdmin } from './ShowHide';
@@ -9,10 +9,9 @@ import {
     MiniListItem,
     SignOutItem,
 } from './ListItems';
-import { Box, List, styled, Tooltip, Typography } from '@mui/material';
+import { Box, List, Typography } from '@mui/material';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { IconRenderer } from './IconRenderer';
-import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import SearchIcon from '@mui/icons-material/Search';
 import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
@@ -27,35 +26,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import SettingsIcon from '@mui/icons-material/Settings';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
-
+import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
-const StyledBadgeContainer = styled('div')(({ theme }) => ({
+import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
-    paddingLeft: theme.spacing(2),
-    display: 'flex',
-}));
-
-const EnterprisePlanBadge = () => (
-    <Tooltip title='This is an Enterprise feature'>
-        <StyledBadgeContainer>
-            <EnterpriseBadge />
-        </StyledBadgeContainer>
-    </Tooltip>
-);
-
-const useShowBadge = () => {
-    const { isPro } = useUiConfig();
-
-    const showBadge = useCallback(
-        (mode?: INavigationMenuItem['menu']['mode']) => {
-            return !!(
-                isPro() &&
-                !mode?.includes('pro') &&
-                mode?.includes('enterprise')
-            );
-        },
-        [isPro],
-    );
-    return showBadge;
-};
 
 export const SecondaryNavigationList: FC<{
     routes: INavigationMenuItem[];

frontend/src/component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge.tsx

@@ -0,0 +1,15 @@
+import { styled, Tooltip } from '@mui/material';
+import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
+
+const StyledBadgeContainer = styled('div')(({ theme }) => ({
+    paddingLeft: theme.spacing(2),
+    display: 'flex',
+}));
+
+export const EnterprisePlanBadge = () => (
+    <Tooltip title='This is an Enterprise feature'>
+        <StyledBadgeContainer>
+            <EnterpriseBadge />
+        </StyledBadgeContainer>
+    </Tooltip>
+);

frontend/src/component/layout/components/EnterprisePlanBadge/useShowBadge.ts

@@ -0,0 +1,19 @@
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import type { INavigationMenuItem } from 'interfaces/route';
+import { useCallback } from 'react';
+
+export const useShowBadge = () => {
+    const { isPro } = useUiConfig();
+
+    const showBadge = useCallback(
+        (mode?: INavigationMenuItem['menu']['mode']) => {
+            return !!(
+                isPro() &&
+                !mode?.includes('pro') &&
+                mode?.includes('enterprise')
+            );
+        },
+        [isPro],
+    );
+    return showBadge;
+};