From 0dca1237b920bbe2b5fd250b87bd0c16f374fdcd Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Mon, 12 Aug 2024 16:41:47 +0530
Subject: [PATCH] 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
---
 .../container/MySettings/__tests__/MySettings.test.tsx   | 2 +-
 frontend/src/container/MySettings/index.tsx              | 3 ++-
 frontend/src/container/SideNav/NavItem/NavItem.tsx       | 9 ++++++++-
 frontend/src/container/SideNav/menuItems.tsx             | 1 +
 frontend/src/container/SideNav/sideNav.types.ts          | 1 +
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/MySettings/__tests__/MySettings.test.tsx b/frontend/src/container/MySettings/__tests__/MySettings.test.tsx
index a3193b90a3..54ba8d4f7f 100644
--- a/frontend/src/container/MySettings/__tests__/MySettings.test.tsx
+++ b/frontend/src/container/MySettings/__tests__/MySettings.test.tsx
@@ -27,7 +27,7 @@ jest.mock('hooks/useNotifications', () => ({
 
 enum ThemeOptions {
 	Dark = 'Dark',
-	Light = 'Light',
+	Light = 'Light Beta',
 }
 
 describe('MySettings Flows', () => {
diff --git a/frontend/src/container/MySettings/index.tsx b/frontend/src/container/MySettings/index.tsx
index aa049ca7c8..234911796e 100644
--- a/frontend/src/container/MySettings/index.tsx
+++ b/frontend/src/container/MySettings/index.tsx
@@ -1,6 +1,6 @@
 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 useThemeMode, { useIsDarkMode } from 'hooks/useDarkMode';
 import { LogOut, Moon, Sun } from 'lucide-react';
@@ -26,6 +26,7 @@ function MySettings(): JSX.Element {
 			label: (
 				<div className="theme-option">
 					<Sun size={12} data-testid="light-theme-icon" /> Light{' '}
+					<Tag color="magenta">Beta</Tag>
 				</div>
 			),
 			value: 'light',
diff --git a/frontend/src/container/SideNav/NavItem/NavItem.tsx b/frontend/src/container/SideNav/NavItem/NavItem.tsx
index 9bfb1e4769..aa9b57707e 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.tsx
+++ b/frontend/src/container/SideNav/NavItem/NavItem.tsx
@@ -2,6 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './NavItem.styles.scss';
 
+import { Tag } from 'antd';
 import cx from 'classnames';
 
 import { SidebarItem } from '../sideNav.types';
@@ -15,7 +16,7 @@ export default function NavItem({
 	isActive: boolean;
 	onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }): JSX.Element {
-	const { label, icon } = item;
+	const { label, icon, isBeta } = item;
 
 	return (
 		<div
@@ -27,6 +28,12 @@ export default function NavItem({
 				<div className="nav-item-icon">{icon}</div>
 
 				<div className="nav-item-label">{label}</div>
+
+				{isBeta && (
+					<div className="nav-item-beta">
+						<Tag color="magenta">Beta</Tag>
+					</div>
+				)}
 			</div>
 		</div>
 	);
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index 31bd96333e..2039e4df8e 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -105,6 +105,7 @@ const menuItems: SidebarItem[] = [
 		key: ROUTES.SERVICE_MAP,
 		label: 'Service Map',
 		icon: <Route size={16} />,
+		isBeta: true,
 	},
 	{
 		key: ROUTES.USAGE_EXPLORER,
diff --git a/frontend/src/container/SideNav/sideNav.types.ts b/frontend/src/container/SideNav/sideNav.types.ts
index 8bc7860478..ab9e991702 100644
--- a/frontend/src/container/SideNav/sideNav.types.ts
+++ b/frontend/src/container/SideNav/sideNav.types.ts
@@ -12,6 +12,7 @@ export interface SidebarItem {
 	text?: ReactNode;
 	key: string | number;
 	label?: ReactNode;
+	isBeta?: boolean;
 }
 
 export enum SecondaryMenuItemKey {