upgraded some deprecated packages (#2424)

* fix: upgrade deprecated pkg

* fix: reverted linebreak rules

* chore: some of the refactoring is done regarding the performance

---------

Co-authored-by: Chintan Sudani <46838508+techchintan@users.noreply.github.com>
Co-authored-by: palashgdev <palashgdev@gmail.com>

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,9 +1,9 @@
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown } from 'antd';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
 } from 'container/NewWidget/RightContainer/timeItems';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { menuItems } from './config';
 import { TextContainer } from './styles';
@@ -22,13 +22,18 @@ function TimePreference({
 		[setSelectedTime],
 	);
 
+	const menu = useMemo(
+		() => ({
+			items: menuItems,
+			onClick: timeMenuItemOnChangeHandler,
+		}),
+		[timeMenuItemOnChangeHandler],
+	);
+
 	return (
 		<TextContainer noButtonMargin>
-			<Dropdown
-				overlay={<Menu onClick={timeMenuItemOnChangeHandler} items={menuItems} />}
-			>
-				<Button>{selectedTime.name}</Button>
-			</Dropdown>
+			<Dropdown menu={menu} />
+			<Button>{selectedTime.name}</Button>
 		</TextContainer>
 	);
 }

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

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

frontend/src/container/ConfigDropdown/index.tsx

@@ -13,7 +13,6 @@ 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,
@@ -34,13 +33,15 @@ function DynamicConfigDropdown({
 		setIsHelpDropDownOpen(!isHelpDropDownOpen);
 	};
 
-	const menuItems = useMemo(
-		() => [
-			{
-				key: '1',
-				label: <HelpToolTip config={config as ConfigProps} />,
-			},
-		],
+	const menu = useMemo(
+		() => ({
+			items: [
+				{
+					key: '1',
+					label: <HelpToolTip config={config as ConfigProps} />,
+				},
+			],
+		}),
 		[config],
 	);
 
@@ -53,10 +54,10 @@ function DynamicConfigDropdown({
 
 	return (
 		<Dropdown
-			onVisibleChange={onToggleHandler}
+			onOpenChange={onToggleHandler}
 			trigger={['click']}
-			overlay={<MenuDropdown items={menuItems} />}
-			visible={isHelpDropDownOpen}
+			menu={menu}
+			open={isHelpDropDownOpen}
 		>
 			<Space align="center">
 				<Icon

frontend/src/container/Header/SignedIn/index.tsx

@@ -1,16 +1,21 @@
 import { Avatar, Typography } from 'antd';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
 
 import { AvatarContainer, ManageAccountLink, Wrapper } from '../styles';
 
-function SignedInAS(): JSX.Element {
+function SignedIn({ onToggle }: SignedInProps): JSX.Element {
 	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
 
+	const onManageAccountClick = useCallback(() => {
+		onToggle();
+		history.push(ROUTES.MY_SETTINGS);
+	}, [onToggle]);
+
 	if (!user) {
 		return <div />;
 	}
@@ -30,11 +35,7 @@ function SignedInAS(): JSX.Element {
 						<Typography>{email}</Typography>
 					</div>
 				</AvatarContainer>
-				<ManageAccountLink
-					onClick={(): void => {
-						history.push(ROUTES.MY_SETTINGS);
-					}}
-				>
+				<ManageAccountLink onClick={onManageAccountClick}>
 					Manage Account
 				</ManageAccountLink>
 			</Wrapper>
@@ -42,4 +43,8 @@ function SignedInAS(): JSX.Element {
 	);
 }
 
-export default SignedInAS;
+interface SignedInProps {
+	onToggle: VoidFunction;
+}
+
+export default SignedIn;

frontend/src/container/Header/index.tsx

@@ -3,12 +3,19 @@ import {
 	CaretUpFilled,
 	LogoutOutlined,
 } from '@ant-design/icons';
-import { Divider, Dropdown, Menu, Space, Typography } from 'antd';
+import type { MenuProps } from 'antd';
+import { Divider, Dropdown, Space, Typography } from 'antd';
 import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import Config from 'container/ConfigDropdown';
 import { useIsDarkMode, useThemeMode } from 'hooks/useDarkMode';
-import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import React, {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useMemo,
+	useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -16,7 +23,7 @@ import AppReducer from 'types/reducer/app';
 
 import CurrentOrganization from './CurrentOrganization';
 import ManageLicense from './ManageLicense';
-import SignedInAS from './SignedInAs';
+import SignedIn from './SignedIn';
 import {
 	AvatarWrapper,
 	Container,
@@ -43,32 +50,45 @@ function HeaderContainer(): JSX.Element {
 		[],
 	);
 
-	const menu = (
-		<Menu style={{ padding: '1rem' }}>
-			<Menu.ItemGroup>
-				<SignedInAS />
-				<Divider />
-				<CurrentOrganization onToggle={onToggleHandler(setIsUserDropDownOpen)} />
-				<Divider />
-				<ManageLicense onToggle={onToggleHandler(setIsUserDropDownOpen)} />
-				<Divider />
-				<LogoutContainer>
-					<LogoutOutlined />
-					<div
-						tabIndex={0}
-						onKeyDown={(e): void => {
-							if (e.key === 'Enter' || e.key === 'Space') {
-								Logout();
-							}
-						}}
-						role="button"
-						onClick={Logout}
-					>
-						<Typography.Link>Logout</Typography.Link>
-					</div>
-				</LogoutContainer>
-			</Menu.ItemGroup>
-		</Menu>
+	const onLogoutKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLDivElement>) => {
+			if (e.key === 'Enter' || e.key === 'Space') {
+				Logout();
+			}
+		},
+		[],
+	);
+
+	const menu: MenuProps = useMemo(
+		() => ({
+			items: [
+				{
+					key: 'main-menu',
+					label: (
+						<div>
+							<SignedIn onToggle={onToggleHandler(setIsUserDropDownOpen)} />
+							<Divider />
+							<CurrentOrganization onToggle={onToggleHandler(setIsUserDropDownOpen)} />
+							<Divider />
+							<ManageLicense onToggle={onToggleHandler(setIsUserDropDownOpen)} />
+							<Divider />
+							<LogoutContainer>
+								<LogoutOutlined />
+								<div
+									tabIndex={0}
+									onKeyDown={onLogoutKeyDown}
+									role="button"
+									onClick={Logout}
+								>
+									<Typography.Link>Logout</Typography.Link>
+								</div>
+							</LogoutContainer>
+						</div>
+					),
+				},
+			],
+		}),
+		[onToggleHandler, onLogoutKeyDown],
 	);
 
 	return (
@@ -98,10 +118,10 @@ function HeaderContainer(): JSX.Element {
 					/>
 
 					<Dropdown
-						onVisibleChange={onToggleHandler(setIsUserDropDownOpen)}
+						onOpenChange={onToggleHandler(setIsUserDropDownOpen)}
 						trigger={['click']}
-						overlay={menu}
-						visible={isUserDropDownOpen}
+						menu={menu}
+						open={isUserDropDownOpen}
 					>
 						<Space>
 							<AvatarWrapper shape="circle">{user?.name[0]}</AvatarWrapper>

frontend/src/container/ListOfDashboard/index.tsx

@@ -1,5 +1,12 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { Card, Dropdown, Menu, Row, TableColumnProps, Typography } from 'antd';
+import {
+	Card,
+	Dropdown,
+	MenuProps,
+	Row,
+	TableColumnProps,
+	Typography,
+} from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
@@ -47,10 +54,12 @@ function ListOfAllDashboard(): JSX.Element {
 	);
 
 	const { t } = useTranslation('dashboard');
+
 	const [
 		isImportJSONModalVisible,
 		setIsImportJSONModalVisible,
 	] = useState<boolean>(false);
+
 	const [uploadedGrafana, setUploadedGrafana] = useState<boolean>(false);
 
 	const [filteredDashboards, setFilteredDashboards] = useState<Dashboard[]>();
@@ -58,6 +67,7 @@ function ListOfAllDashboard(): JSX.Element {
 	useEffect(() => {
 		setFilteredDashboards(dashboards);
 	}, [dashboards]);
+
 	const [newDashboardState, setNewDashboardState] = useState({
 		loading: false,
 		error: false,
@@ -215,7 +225,12 @@ function ListOfAllDashboard(): JSX.Element {
 		return menuItems;
 	}, [createNewDashboard, loading, onNewDashboardHandler, t]);
 
-	const menuItems = getMenuItems();
+	const menu: MenuProps = useMemo(
+		() => ({
+			items: getMenuItems(),
+		}),
+		[getMenuItems],
+	);
 
 	const GetHeader = useMemo(
 		() => (
@@ -230,7 +245,7 @@ function ListOfAllDashboard(): JSX.Element {
 						}}
 					/>
 					{newDashboard && (
-						<Dropdown trigger={['click']} overlay={<Menu items={menuItems} />}>
+						<Dropdown trigger={['click']} menu={menu}>
 							<NewDashboardButton
 								icon={<PlusOutlined />}
 								type="primary"
@@ -249,7 +264,7 @@ function ListOfAllDashboard(): JSX.Element {
 			newDashboard,
 			newDashboardState.error,
 			newDashboardState.loading,
-			menuItems,
+			menu,
 		],
 	);
 

frontend/src/container/LogsSearchFilter/index.tsx

@@ -173,6 +173,13 @@ function SearchFilter({
 		globalTime.minTime,
 	]);
 
+	const onPopOverChange = useCallback(
+		(isVisible: boolean) => {
+			onDropDownToggleHandler(isVisible)();
+		},
+		[onDropDownToggleHandler],
+	);
+
 	return (
 		<Container>
 			<Popover
@@ -189,11 +196,9 @@ function SearchFilter({
 				overlayInnerStyle={{
 					width: `${searchRef?.current?.input?.offsetWidth || 0}px`,
 				}}
-				visible={showDropDown}
+				open={showDropDown}
 				destroyTooltipOnHide
-				onVisibleChange={(value): void => {
-					onDropDownToggleHandler(value)();
-				}}
+				onOpenChange={onPopOverChange}
 			>
 				<Input.Search
 					ref={searchRef}