fix: widget options are now opening (#2141)

frontend/src/container/GridGraphLayout/WidgetHeader/config.ts

@@ -10,4 +10,13 @@ export const tooltipStyles = {
 	right: '0.313rem',
 	color: themeColors.errorColor,
 };
+
 export const errorTooltipPosition = 'top';
+
+export const overlayStyles: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	justifyContent: 'center',
+	position: 'absolute',
+};

frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx

@@ -5,11 +5,12 @@ import {
 	ExclamationCircleOutlined,
 	FullscreenOutlined,
 } from '@ant-design/icons';
-import { Dropdown, Menu, Tooltip, Typography } from 'antd';
+import { Dropdown, MenuProps, Tooltip, Typography } from 'antd';
+import { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import Spinner from 'components/Spinner';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -18,12 +19,16 @@ import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import AppReducer from 'types/reducer/app';
 
-import { errorTooltipPosition, spinnerStyles, tooltipStyles } from './config';
+import {
+	errorTooltipPosition,
+	overlayStyles,
+	spinnerStyles,
+	tooltipStyles,
+} from './config';
 import {
 	ArrowContainer,
 	HeaderContainer,
 	HeaderContentContainer,
-	MenuItemContainer,
 } from './styles';
 
 type TWidgetOptions = 'view' | 'edit' | 'delete' | string;
@@ -48,17 +53,19 @@ function WidgetHeader({
 	errorMessage,
 }: IWidgetHeaderProps): JSX.Element {
 	const [localHover, setLocalHover] = useState(false);
+	const [isOpen, setIsOpen] = useState<boolean>(false);
 
-	const onEditHandler = (): void => {
+	const onEditHandler = useCallback((): void => {
 		const widgetId = widget.id;
 		history.push(
 			`${window.location.pathname}/new?widgetId=${widgetId}&graphType=${widget.panelTypes}`,
 		);
-	};
+	}, [widget.id, widget.panelTypes]);
 
 	const keyMethodMapping: {
 		[K in TWidgetOptions]: { key: TWidgetOptions; method: VoidFunction };
-	} = {
+	} = useMemo(
+		() => ({
 			view: {
 				key: 'view',
 				method: onView,
@@ -71,10 +78,20 @@ function WidgetHeader({
 				key: 'delete',
 				method: onDelete,
 			},
-	};
+		}),
-	const onMenuItemSelectHandler = ({ key }: { key: TWidgetOptions }): void => {
+		[onDelete, onEditHandler, onView],
-		keyMethodMapping[key]?.method();
+	);
-	};
+
+	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
+		({ key }: { key: TWidgetOptions }): void => {
+			const functionToCall = keyMethodMapping[key]?.method;
+			if (functionToCall) {
+				functionToCall();
+				setIsOpen(false);
+			}
+		},
+		[keyMethodMapping],
+	);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
 	const [deleteWidget, editWidget] = useComponentPermission(
@@ -82,49 +99,67 @@ function WidgetHeader({
 		role,
 	);
 
-	const menu = (
+	const menuList: MenuItemType[] = useMemo(
-		<Menu onClick={onMenuItemSelectHandler}>
+		() => [
-			<Menu.Item key={keyMethodMapping.view.key}>
+			{
-				<MenuItemContainer>
+				key: keyMethodMapping.view.key,
-					<span>View</span> <FullscreenOutlined />
+				icon: <FullscreenOutlined />,
-				</MenuItemContainer>
+				disabled: queryResponse.isLoading,
-			</Menu.Item>
+				label: 'View',
+			},
+			{
+				key: keyMethodMapping.edit.key,
+				icon: <EditFilled />,
+				disabled: !editWidget,
+				label: 'Edit',
+			},
+			{
+				key: keyMethodMapping.delete.key,
+				icon: <DeleteOutlined />,
+				disabled: !deleteWidget,
+				danger: true,
+				label: 'Delete',
+			},
+		],
+		[
+			deleteWidget,
+			editWidget,
+			keyMethodMapping.delete.key,
+			keyMethodMapping.edit.key,
+			keyMethodMapping.view.key,
+			queryResponse.isLoading,
+		],
+	);
 
-			{editWidget && (
+	const onClickHandler = useCallback(() => {
-				<Menu.Item key={keyMethodMapping.edit.key}>
+		setIsOpen((open) => !open);
-					<MenuItemContainer>
+	}, []);
-						<span>Edit</span> <EditFilled />
-					</MenuItemContainer>
-				</Menu.Item>
-			)}
 
-			{deleteWidget && (
+	const menu = useMemo(
-				<>
+		() => ({
-					<Menu.Divider />
+			items: menuList,
-					<Menu.Item key={keyMethodMapping.delete.key} danger>
+			onClick: onMenuItemSelectHandler,
-						<MenuItemContainer>
+		}),
-							<span>Delete</span> <DeleteOutlined />
+		[menuList, onMenuItemSelectHandler],
-						</MenuItemContainer>
-					</Menu.Item>
-				</>
-			)}
-		</Menu>
 	);
 
 	return (
+		<div>
 			<Dropdown
-			overlay={menu}
+				destroyPopupOnHide
+				open={isOpen}
+				onOpenChange={setIsOpen}
+				menu={menu}
 				trigger={['click']}
-			overlayStyle={{ minWidth: 100 }}
+				overlayStyle={overlayStyles}
-			placement="bottom"
 			>
-			<>
 				<HeaderContainer
 					onMouseOver={(): void => setLocalHover(true)}
 					onMouseOut={(): void => setLocalHover(false)}
 					hover={localHover}
+					onClick={onClickHandler}
 				>
-					<HeaderContentContainer onClick={(e): void => e.preventDefault()}>
+					<HeaderContentContainer>
 						<Typography.Text style={{ maxWidth: '80%' }} ellipsis>
 							{title}
 						</Typography.Text>
@@ -133,6 +168,7 @@ function WidgetHeader({
 						</ArrowContainer>
 					</HeaderContentContainer>
 				</HeaderContainer>
+			</Dropdown>
 			{queryResponse.isFetching && !queryResponse.isError && (
 				<Spinner height="5vh" style={spinnerStyles} />
 			)}
@@ -141,8 +177,7 @@ function WidgetHeader({
 					<ExclamationCircleOutlined style={tooltipStyles} />
 				</Tooltip>
 			)}
-			</>
+		</div>
-		</Dropdown>
 	);
 }
 

frontend/src/container/GridGraphLayout/WidgetHeader/styles.ts

@@ -1,12 +1,6 @@
 import { grey } from '@ant-design/colors';
 import styled from 'styled-components';
 
-export const MenuItemContainer = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-`;
-
 export const HeaderContainer = styled.div<{ hover: boolean }>`
 	width: 100%;
 	text-align: center;