Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-17 13:46:47 +02:00
Code Issues Projects Releases Wiki Activity

chore: admin menu enterprise badge (#9656)

Browse Source
This commit is contained in:
David Leek 2025-04-01 09:13:40 +02:00 committed by GitHub
parent 98a0fba1cb
commit f7dbfe1162
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 65 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/admin/AdminHome.tsx
View File

@ -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>

1
frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx
View File

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

4
frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx
View File

@ -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,

18
frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx
View File

@ -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>

36
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
View File

@ -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 = () => (
<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;
};
import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
export const SecondaryNavigationList: FC<{
routes: INavigationMenuItem[];

15
frontend/src/component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge.tsx Normal file
View File

@ -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>
);

19
frontend/src/component/layout/components/EnterprisePlanBadge/useShowBadge.ts Normal file
View File

@ -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;
};