From 4b8bd2e33597359bee1ac7a6f02738527be03aad Mon Sep 17 00:00:00 2001
From: palash-signoz <palash@signoz.io>
Date: Fri, 20 May 2022 11:43:23 +0530
Subject: [PATCH] feat: tags are added in the sidebar (#1153)

* feat: tags are added in the sidebar

* chore: styles is updated
---
 frontend/src/container/SideNav/index.tsx    | 15 ++++++++++++---
 frontend/src/container/SideNav/menuItems.ts |  2 ++
 frontend/src/container/SideNav/styles.ts    | 10 +++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index a9fe78ce07..a398f4c537 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -1,5 +1,5 @@
 import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons';
-import { Menu, Typography } from 'antd';
+import { Menu, Space, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
 import ROUTES from 'constants/routes';
@@ -19,6 +19,7 @@ import {
 	Sider,
 	SlackButton,
 	SlackMenuItemContainer,
+	Tags,
 	VersionContainer,
 } from './styles';
 
@@ -96,13 +97,21 @@ function SideNav(): JSX.Element {
 				selectedKeys={[pathname]}
 				mode="inline"
 			>
-				{menus.map(({ to, Icon, name }) => (
+				{menus.map(({ to, Icon, name, tags }) => (
 					<Menu.Item
 						key={to}
 						icon={<Icon />}
 						onClick={(): void => onClickHandler(to)}
 					>
-						<Typography>{name}</Typography>
+						<Space style={{ position: 'relative' }}>
+							<Typography>{name}</Typography>
+							{tags &&
+								tags.map((e) => (
+									<Tags color="#177DDC" key={e}>
+										<Typography.Text strong>{e}</Typography.Text>
+									</Tags>
+								))}
+						</Space>
 					</Menu.Item>
 				))}
 				{sidebar.map((props, index) => (
diff --git a/frontend/src/container/SideNav/menuItems.ts b/frontend/src/container/SideNav/menuItems.ts
index 3b6a186b8d..921cef71d5 100644
--- a/frontend/src/container/SideNav/menuItems.ts
+++ b/frontend/src/container/SideNav/menuItems.ts
@@ -41,6 +41,7 @@ const menus: SidebarMenu[] = [
 		to: ROUTES.SERVICE_MAP,
 		name: 'Service Map',
 		Icon: DeploymentUnitOutlined,
+		tags: ['Beta'],
 	},
 	{
 		Icon: LineChartOutlined,
@@ -63,6 +64,7 @@ interface SidebarMenu {
 	to: string;
 	name: string;
 	Icon: typeof ApiOutlined;
+	tags?: string[];
 }
 
 export default menus;
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 3d72951c99..ae0ed0898b 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -1,4 +1,4 @@
-import { Layout, Typography } from 'antd';
+import { Layout, Tag, Typography } from 'antd';
 import { StyledCSS } from 'container/GantChart/Trace/styles';
 import styled, { css } from 'styled-components';
 
@@ -75,3 +75,11 @@ export const VersionContainer = styled.div`
 		display: flex;
 	}
 `;
+
+export const Tags = styled(Tag)`
+	&&& {
+		position: absolute;
+		top: 0;
+		border-radius: 0.5rem;
+	}
+`;