feat: add beta tag for service map and light mode (#5674)

* feat: add beta tag for service map and light mode

* chore: update test case
This commit is contained in:
Yunus M 2024-08-12 16:41:47 +05:30 committed by GitHub
parent f3d73f6d44
commit 0dca1237b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 13 additions and 3 deletions

View File

@ -27,7 +27,7 @@ jest.mock('hooks/useNotifications', () => ({
enum ThemeOptions { enum ThemeOptions {
Dark = 'Dark', Dark = 'Dark',
Light = 'Light', Light = 'Light Beta',
} }
describe('MySettings Flows', () => { describe('MySettings Flows', () => {

View File

@ -1,6 +1,6 @@
import './MySettings.styles.scss'; import './MySettings.styles.scss';
import { Button, Radio, RadioChangeEvent, Space, Typography } from 'antd'; import { Button, Radio, RadioChangeEvent, Space, Tag, Typography } from 'antd';
import { Logout } from 'api/utils'; import { Logout } from 'api/utils';
import useThemeMode, { useIsDarkMode } from 'hooks/useDarkMode'; import useThemeMode, { useIsDarkMode } from 'hooks/useDarkMode';
import { LogOut, Moon, Sun } from 'lucide-react'; import { LogOut, Moon, Sun } from 'lucide-react';
@ -26,6 +26,7 @@ function MySettings(): JSX.Element {
label: ( label: (
<div className="theme-option"> <div className="theme-option">
<Sun size={12} data-testid="light-theme-icon" /> Light{' '} <Sun size={12} data-testid="light-theme-icon" /> Light{' '}
<Tag color="magenta">Beta</Tag>
</div> </div>
), ),
value: 'light', value: 'light',

View File

@ -2,6 +2,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/click-events-have-key-events */
import './NavItem.styles.scss'; import './NavItem.styles.scss';
import { Tag } from 'antd';
import cx from 'classnames'; import cx from 'classnames';
import { SidebarItem } from '../sideNav.types'; import { SidebarItem } from '../sideNav.types';
@ -15,7 +16,7 @@ export default function NavItem({
isActive: boolean; isActive: boolean;
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}): JSX.Element { }): JSX.Element {
const { label, icon } = item; const { label, icon, isBeta } = item;
return ( return (
<div <div
@ -27,6 +28,12 @@ export default function NavItem({
<div className="nav-item-icon">{icon}</div> <div className="nav-item-icon">{icon}</div>
<div className="nav-item-label">{label}</div> <div className="nav-item-label">{label}</div>
{isBeta && (
<div className="nav-item-beta">
<Tag color="magenta">Beta</Tag>
</div>
)}
</div> </div>
</div> </div>
); );

View File

@ -105,6 +105,7 @@ const menuItems: SidebarItem[] = [
key: ROUTES.SERVICE_MAP, key: ROUTES.SERVICE_MAP,
label: 'Service Map', label: 'Service Map',
icon: <Route size={16} />, icon: <Route size={16} />,
isBeta: true,
}, },
{ {
key: ROUTES.USAGE_EXPLORER, key: ROUTES.USAGE_EXPLORER,

View File

@ -12,6 +12,7 @@ export interface SidebarItem {
text?: ReactNode; text?: ReactNode;
key: string | number; key: string | number;
label?: ReactNode; label?: ReactNode;
isBeta?: boolean;
} }
export enum SecondaryMenuItemKey { export enum SecondaryMenuItemKey {