diff --git a/frontend/src/component/admin/AdminHome.tsx b/frontend/src/component/admin/AdminHome.tsx index d198499188..0a13b5cc69 100644 --- a/frontend/src/component/admin/AdminHome.tsx +++ b/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 ( Instance statistics @@ -200,10 +203,11 @@ const InstanceStatsWidget = ({ diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx index 19f1eee21e..f6615f2436 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx +++ b/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 { diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx index c20ec3a228..fd553f29c6 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx +++ b/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 = { users: PeopleOutlineRoundedIcon, '/admin/service-accounts': LaptopIcon, access: KeyRoundedIcon, - sso: CloudIcon, + sso: SingleSignOnIcon, network: HubOutlinedIcon, instance: BuildOutlinedIcon, '/admin/billing': BillingIcon, diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx index 079062f1a6..d4865198f0 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx +++ b/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: , + 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) ? ( + + ) : null + } > @@ -178,6 +191,11 @@ export const AdminNavigationItems = ({ selected={isActiveItem(item.href)} onClick={onClick} key={item.href} + badge={ + showBadge(item.menuMode) ? ( + + ) : null + } > diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx index 8cb9b5591e..514a871b3a 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx +++ b/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'; - -const StyledBadgeContainer = styled('div')(({ theme }) => ({ - paddingLeft: theme.spacing(2), - display: 'flex', -})); - -const EnterprisePlanBadge = () => ( - - - - - -); - -const useShowBadge = () => { - const { isPro } = useUiConfig(); - - const showBadge = useCallback( - (mode?: INavigationMenuItem['menu']['mode']) => { - return !!( - isPro() && - !mode?.includes('pro') && - mode?.includes('enterprise') - ); - }, - [isPro], - ); - return showBadge; -}; +import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge'; +import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge'; export const SecondaryNavigationList: FC<{ routes: INavigationMenuItem[]; diff --git a/frontend/src/component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge.tsx b/frontend/src/component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge.tsx new file mode 100644 index 0000000000..da10e6f1c2 --- /dev/null +++ b/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 = () => ( + + + + + +); diff --git a/frontend/src/component/layout/components/EnterprisePlanBadge/useShowBadge.ts b/frontend/src/component/layout/components/EnterprisePlanBadge/useShowBadge.ts new file mode 100644 index 0000000000..425b8de9c4 --- /dev/null +++ b/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; +};