fix: menu antd deprecation warning (#2416)

* fix: menu antd deprecation warning

* chore: some of the refactoring is updated

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: palashgdev <palashgdev@gmail.com>

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -0,0 +1,8 @@
+import { Typography } from 'antd';
+import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
+import React from 'react';
+
+export const menuItems = timeItems.map((item) => ({
+	key: item.enum,
+	label: <Typography>{item.name}</Typography>,
+}));

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,10 +1,11 @@
-import { Button, Dropdown, Menu, Typography } from 'antd';
+import { Button, Dropdown, Menu } from 'antd';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
 } from 'container/NewWidget/RightContainer/timeItems';
 import React, { useCallback } from 'react';
 
+import { menuItems } from './config';
 import { TextContainer } from './styles';
 
 function TimePreference({
@@ -24,15 +25,7 @@ function TimePreference({
 	return (
 		<TextContainer noButtonMargin>
 			<Dropdown
-				overlay={
+				overlay={<Menu onClick={timeMenuItemOnChangeHandler} items={menuItems} />}
-					<Menu>
-						{TimeItems.map((item) => (
-							<Menu.Item onClick={timeMenuItemOnChangeHandler} key={item.enum}>
-								<Typography>{item.name}</Typography>
-							</Menu.Item>
-						))}
-					</Menu>
-				}
 			>
 				<Button>{selectedTime.name}</Button>
 			</Dropdown>

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -6,7 +6,6 @@ import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
 
 import ErrorLink from './ErrorLink';
 import LinkContainer from './Link';
-import { MenuItem } from './styles';
 
 function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
 	const sortedConfig = useMemo(
@@ -16,31 +15,29 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
 
 	const isDarkMode = useIsDarkMode();
 
-	return (
+	const items = sortedConfig.map((item) => {
-		<Menu>
+		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-			{sortedConfig.map((item) => {
+		const Component = React.lazy(
-				const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
+			() => import(`@ant-design/icons/es/icons/${iconName}.js`),
+		);
+		return {
+			key: item.text + item.href,
+			label: (
+				<ErrorLink key={item.text + item.href}>
+					<Suspense fallback={<Spinner height="5vh" />}>
+						<LinkContainer href={item.href}>
+							<Space size="small" align="start">
+								<Component />
+								{item.text}
+							</Space>
+						</LinkContainer>
+					</Suspense>
+				</ErrorLink>
+			),
+		};
+	});
 
-				const Component = React.lazy(
+	return <Menu items={items} />;
-					() => import(`@ant-design/icons/es/icons/${iconName}.js`),
-				);
-				return (
-					<ErrorLink key={item.text + item.href}>
-						<Suspense fallback={<Spinner height="5vh" />}>
-							<MenuItem>
-								<LinkContainer href={item.href}>
-									<Space size="small" align="start">
-										<Component />
-										{item.text}
-									</Space>
-								</LinkContainer>
-							</MenuItem>
-						</Suspense>
-					</ErrorLink>
-				);
-			})}
-		</Menu>
-	);
 }
 
 interface HelpToolTipProps {

frontend/src/container/ConfigDropdown/Config/styles.ts

@@ -1,10 +1,17 @@
 import { Menu } from 'antd';
 import styled from 'styled-components';
 
-export const MenuItem = styled(Menu.Item)`
+export const MenuDropdown = styled(Menu)`
 	&&& {
-		height: 1.75rem;
+		.ant-dropdown,
-		display: flex;
+		.ant-dropdown-menu,
-		align-items: center;
+		.ant-dropdown-menu-item {
+			padding: 0px;
+		}
+		.ant-menu-item {
+			height: 1.75rem;
+			display: flex;
+			align-items: center;
+		}
 	}
 `;

frontend/src/container/ConfigDropdown/index.tsx

@@ -4,14 +4,16 @@ import {
 	QuestionCircleFilled,
 	QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { Dropdown, Menu, Space } from 'antd';
+import { Dropdown, Space } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
+import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
 import AppReducer from 'types/reducer/app';
 
 import HelpToolTip from './Config';
+import { MenuDropdown } from './Config/styles';
 
 function DynamicConfigDropdown({
 	frontendId,
@@ -32,6 +34,16 @@ function DynamicConfigDropdown({
 		setIsHelpDropDownOpen(!isHelpDropDownOpen);
 	};
 
+	const menuItems = useMemo(
+		() => [
+			{
+				key: '1',
+				label: <HelpToolTip config={config as ConfigProps} />,
+			},
+		],
+		[config],
+	);
+
 	if (!config) {
 		return <div />;
 	}
@@ -43,11 +55,7 @@ function DynamicConfigDropdown({
 		<Dropdown
 			onVisibleChange={onToggleHandler}
 			trigger={['click']}
-			overlay={
+			overlay={<MenuDropdown items={menuItems} />}
-				<Menu>
-					<HelpToolTip config={config} />
-				</Menu>
-			}
 			visible={isHelpDropDownOpen}
 		>
 			<Space align="center">

frontend/src/container/ListOfDashboard/index.tsx

@@ -1,5 +1,6 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Card, Dropdown, Menu, Row, TableColumnProps, Typography } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
 import { ResizeTable } from 'components/ResizeTable';
@@ -188,34 +189,33 @@ function ListOfAllDashboard(): JSX.Element {
 		setUploadedGrafana(uploadedGrafana);
 	};
 
-	const menu = useMemo(
+	const getMenuItems = useCallback(() => {
-		() => (
+		const menuItems: ItemType[] = [];
-			<Menu>
+		if (createNewDashboard) {
-				{createNewDashboard && (
+			menuItems.push({
-					<Menu.Item
+				key: t('create_dashboard').toString(),
-						onClick={onNewDashboardHandler}
+				label: t('create_dashboard'),
-						disabled={loading}
+				disabled: loading,
-						key={t('create_dashboard').toString()}
+				onClick: onNewDashboardHandler,
-					>
+			});
-						{t('create_dashboard')}
+		}
-					</Menu.Item>
+
-				)}
+		menuItems.push({
-				<Menu.Item
+			key: t('import_json').toString(),
-					onClick={(): void => onModalHandler(false)}
+			label: t('import_json'),
-					key={t('import_json').toString()}
+			onClick: (): void => onModalHandler(false),
-				>
+		});
-					{t('import_json')}
+
-				</Menu.Item>
+		menuItems.push({
-				<Menu.Item
+			key: t('import_grafana_json').toString(),
-					onClick={(): void => onModalHandler(true)}
+			label: t('import_grafana_json'),
-					key={t('import_grafana_json').toString()}
+			onClick: (): void => onModalHandler(true),
-				>
+		});
-					{t('import_grafana_json')}
+
-				</Menu.Item>
+		return menuItems;
-			</Menu>
+	}, [createNewDashboard, loading, onNewDashboardHandler, t]);
-		),
+
-		[createNewDashboard, loading, onNewDashboardHandler, t],
+	const menuItems = getMenuItems();
-	);
 
 	const GetHeader = useMemo(
 		() => (
@@ -230,7 +230,7 @@ function ListOfAllDashboard(): JSX.Element {
 						}}
 					/>
 					{newDashboard && (
-						<Dropdown trigger={['click']} overlay={menu}>
+						<Dropdown trigger={['click']} overlay={<Menu items={menuItems} />}>
 							<NewDashboardButton
 								icon={<PlusOutlined />}
 								type="primary"
@@ -246,10 +246,10 @@ function ListOfAllDashboard(): JSX.Element {
 		),
 		[
 			getText,
-			menu,
 			newDashboard,
 			newDashboardState.error,
 			newDashboardState.loading,
+			menuItems,
 		],
 	);
 

frontend/src/container/SideNav/index.tsx

@@ -64,14 +64,16 @@ function SideNav(): JSX.Element {
 
 	const isNotCurrentVersion = currentVersion !== latestVersion;
 
-	const sidebar = [
+	const sidebar: SidebarItem[] = [
 		{
 			onClick: onClickSlackHandler,
 			icon: <Slack />,
 			text: <SlackButton>Support</SlackButton>,
+			key: 'slack',
 		},
 		{
 			onClick: onClickVersionHandler,
+			key: 'version',
 			icon: isNotCurrentVersion ? (
 				<WarningOutlined style={{ color: '#E87040' }} />
 			) : (
@@ -95,6 +97,32 @@ function SideNav(): JSX.Element {
 		[pathname],
 	);
 
+	const items = [
+		...menus.map(({ to, Icon, name, tags }) => ({
+			key: to,
+			icon: <Icon />,
+			onClick: (): void => onClickHandler(to),
+			label: (
+				<Space>
+					<div>{name}</div>
+					{tags &&
+						tags.map((e) => (
+							<Tags key={e}>
+								<Typography.Text>{e}</Typography.Text>
+							</Tags>
+						))}
+				</Space>
+			),
+		})),
+	];
+
+	const sidebarItems = (props: SidebarItem, index: number): SidebarItem => ({
+		key: `${index}`,
+		icon: props.icon,
+		onClick: props.onClick,
+		label: props.text,
+	});
+
 	return (
 		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
 			<Menu
@@ -103,42 +131,34 @@ function SideNav(): JSX.Element {
 				selectedKeys={currentMenu ? [currentMenu?.to] : []}
 				mode="inline"
 				style={styles}
-			>
+				items={items}
-				{menus.map(({ to, Icon, name, tags }) => (
+			/>
-					<Menu.Item
+			{sidebar.map((props, index) => (
-						key={to}
+				<SlackMenuItemContainer
-						icon={<Icon />}
+					index={index + 1}
-						onClick={(): void => onClickHandler(to)}
+					key={`${index + 1}`}
-					>
+					collapsed={collapsed}
-						<Space>
+				>
-							<div>{name}</div>
+					<Menu
-							{tags &&
+						theme="dark"
-								tags.map((e) => (
+						defaultSelectedKeys={[ROUTES.APPLICATION]}
-									<Tags style={{ lineHeight: '1rem' }} color="#177DDC" key={e}>
+						selectedKeys={currentMenu ? [currentMenu?.to] : []}
-										<Typography.Text style={{ fontWeight: '300' }}>{e}</Typography.Text>
+						mode="inline"
-									</Tags>
+						style={styles}
-								))}
+						items={[sidebarItems(props, index)]}
-						</Space>
+					/>
-					</Menu.Item>
+				</SlackMenuItemContainer>
-				))}
+			))}
-				{sidebar.map((props, index) => (
-					<SlackMenuItemContainer
-						index={index + 1}
-						key={`${index + 1}`}
-						collapsed={collapsed}
-					>
-						<Menu.Item
-							eventKey={index.toString()}
-							onClick={props.onClick}
-							icon={props.icon}
-						>
-							{props.text}
-						</Menu.Item>
-					</SlackMenuItemContainer>
-				))}
-			</Menu>
 		</Sider>
 	);
 }
 
+interface SidebarItem {
+	onClick: VoidFunction;
+	icon?: React.ReactNode;
+	text?: React.ReactNode;
+	key: string;
+	label?: React.ReactNode;
+}
+
 export default SideNav;