From ec8a74d385191917158c918d068da0e145ee62df Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Fri, 24 Nov 2023 00:03:47 +0530
Subject: [PATCH] fix: new dashboard menu items are flickering (#4039)

---
 .../src/container/ListOfDashboard/index.tsx   | 89 ++++++++-----------
 1 file changed, 35 insertions(+), 54 deletions(-)

diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx
index dce9b5835d..071e43fc94 100644
--- a/frontend/src/container/ListOfDashboard/index.tsx
+++ b/frontend/src/container/ListOfDashboard/index.tsx
@@ -1,13 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons';
-import {
-	Card,
-	Col,
-	Dropdown,
-	Input,
-	MenuProps,
-	Row,
-	TableColumnProps,
-} from 'antd';
+import { Card, Col, Dropdown, Input, Row, TableColumnProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
@@ -30,7 +22,6 @@ import { generatePath } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import DateComponent from '../../components/ResizeTable/TableComponent/DateComponent';
 import ImportJSON from './ImportJSON';
@@ -49,8 +40,8 @@ function ListOfAllDashboard(): JSX.Element {
 
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
-	const [action, createNewDashboard, newDashboard] = useComponentPermission(
-		['action', 'create_new_dashboards', 'new_dashboard'],
+	const [action, createNewDashboard] = useComponentPermission(
+		['action', 'create_new_dashboards'],
 		role,
 	);
 
@@ -234,9 +225,22 @@ function ListOfAllDashboard(): JSX.Element {
 	};
 
 	const getMenuItems = useMemo(() => {
-		const menuItems: ItemType[] = [];
+		const menuItems: ItemType[] = [
+			{
+				key: t('import_json').toString(),
+				label: t('import_json'),
+				onClick: (): void => onModalHandler(false),
+			},
+			{
+				key: t('import_grafana_json').toString(),
+				label: t('import_grafana_json'),
+				onClick: (): void => onModalHandler(true),
+				disabled: true,
+			},
+		];
+
 		if (createNewDashboard) {
-			menuItems.push({
+			menuItems.unshift({
 				key: t('create_dashboard').toString(),
 				label: t('create_dashboard'),
 				disabled: isDashboardListLoading,
@@ -244,29 +248,9 @@ function ListOfAllDashboard(): JSX.Element {
 			});
 		}
 
-		menuItems.push({
-			key: t('import_json').toString(),
-			label: t('import_json'),
-			onClick: (): void => onModalHandler(false),
-		});
-
-		menuItems.push({
-			key: t('import_grafana_json').toString(),
-			label: t('import_grafana_json'),
-			onClick: (): void => onModalHandler(true),
-			disabled: true,
-		});
-
 		return menuItems;
 	}, [createNewDashboard, isDashboardListLoading, onNewDashboardHandler, t]);
 
-	const menu: MenuProps = useMemo(
-		() => ({
-			items: getMenuItems,
-		}),
-		[getMenuItems],
-	);
-
 	const searchArrayOfObjects = (searchValue: string): any[] => {
 		// Convert the searchValue to lowercase for case-insensitive search
 		const searchValueLowerCase = searchValue.toLowerCase();
@@ -318,25 +302,23 @@ function ListOfAllDashboard(): JSX.Element {
 								url: 'https://signoz.io/docs/userguide/dashboards',
 							}}
 						/>
-						{newDashboard && (
-							<Dropdown
-								getPopupContainer={popupContainer}
-								disabled={isDashboardListLoading}
-								trigger={['click']}
-								menu={menu}
-							>
-								<NewDashboardButton
-									icon={<PlusOutlined />}
-									type="primary"
-									data-testid="create-new-dashboard"
-									loading={newDashboardState.loading}
-									danger={newDashboardState.error}
-								>
-									{getText()}
-								</NewDashboardButton>
-							</Dropdown>
-						)}
 					</ButtonContainer>
+
+					<Dropdown
+						menu={{ items: getMenuItems }}
+						disabled={isDashboardListLoading}
+						placement="bottomRight"
+					>
+						<NewDashboardButton
+							icon={<PlusOutlined />}
+							type="primary"
+							data-testid="create-new-dashboard"
+							loading={newDashboardState.loading}
+							danger={newDashboardState.error}
+						>
+							{getText()}
+						</NewDashboardButton>
+					</Dropdown>
 				</Col>
 			</Row>
 		),
@@ -345,8 +327,7 @@ function ListOfAllDashboard(): JSX.Element {
 			isDashboardListLoading,
 			handleSearch,
 			isFilteringDashboards,
-			newDashboard,
-			menu,
+			getMenuItems,
 			newDashboardState.loading,
 			newDashboardState.error,
 			getText,