Converted format options menu to popover (#9094)

This pull request refactors the LogsFormatOptionsMenu component to use the Ant Design Popover for displaying format options, replacing the previous custom dropdown implementation. It also updates the related styles and removes now-unnecessary state and logic from parent components. The changes improve code maintainability, UI consistency, and simplify event handling.

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -1,21 +1,22 @@
-.nested-menu-container {
-	z-index: 2;
-	position: absolute;
-	right: -2px;
-	margin: 6px 0;
-	width: 240px;
-
+.format-options-popover {
+	.ant-popover-inner {
 		border-radius: 4px;
-
-	border: 1px solid var(--bg-slate-400, #1d212d);
+		border: 1px solid var(--bg-slate-400);
 		background: linear-gradient(
 			139deg,
-		rgba(18, 19, 23, 0.8) 0%,
-		rgba(18, 19, 23, 0.9) 98.68%
+			var(--bg-ink-400) 0%,
+			var(--bg-ink-500) 98.68%
 		);
-
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
+		padding: 0;
+		margin: 6px 0;
+
+		.nested-menu-container {
+			z-index: 2;
+			position: relative;
+			right: -2px;
+			width: 240px;
 
 			.font-size-dropdown {
 				display: flex;
@@ -482,19 +483,22 @@
 					}
 				}
 			}
+		}
+	}
 }
 
 .lightMode {
-	.nested-menu-container {
+	.format-options-popover {
+		.ant-popover-inner {
 			border: 1px solid var(--bg-vanilla-300);
 			background: linear-gradient(
 				139deg,
 				rgba(255, 255, 255, 0.8) 0%,
 				rgba(255, 255, 255, 0.9) 98.68%
 			);
-
 			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
 
+			.nested-menu-container {
 				.font-size-dropdown {
 					.back-btn {
 						.text {
@@ -645,4 +649,6 @@
 					}
 				}
 			}
+		}
+	}
 }

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -3,24 +3,30 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './LogsFormatOptionsMenu.styles.scss';
 
-import { Button, Input, InputNumber, Tooltip, Typography } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
+import {
+	Check,
+	ChevronLeft,
+	ChevronRight,
+	Minus,
+	Plus,
+	Sliders,
+	X,
+} from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface LogsFormatOptionsMenuProps {
-	title: string;
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
 }
 
 export default function LogsFormatOptionsMenu({
-	title,
 	items,
 	selectedOptionFormat,
 	config,
@@ -43,6 +49,7 @@ export default function LogsFormatOptionsMenu({
 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);
 	const initialMouseEnterRef = useRef<boolean>(false);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const onChange = useCallback(
 		(key: LogViewMode) => {
@@ -202,7 +209,7 @@ export default function LogsFormatOptionsMenu({
 		};
 	}, [selectedValue]);
 
-	return (
+	const popoverContent = (
 		<div
 			className={cx(
 				'nested-menu-container',
@@ -344,7 +351,7 @@ export default function LogsFormatOptionsMenu({
 					</div>
 					<div className="horizontal-line" />
 					<div className="menu-container">
-						<div className="title"> {title} </div>
+						<div className="title">FORMAT</div>
 
 						<div className="menu-items">
 							{items.map(
@@ -440,4 +447,21 @@ export default function LogsFormatOptionsMenu({
 			)}
 		</div>
 	);
+	return (
+		<Popover
+			content={popoverContent}
+			trigger="click"
+			placement="bottomRight"
+			arrow={false}
+			open={isPopoverOpen}
+			onOpenChange={setIsPopoverOpen}
+			rootClassName="format-options-popover"
+		>
+			<Button
+				className="periscope-btn ghost"
+				icon={<Sliders size={14} />}
+				data-testid="periscope-btn"
+			/>
+		</Popover>
+	);
 }

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -240,7 +240,6 @@ function LiveLogsContainer(): JSX.Element {
 
 						{showFormatMenuItems && (
 							<LogsFormatOptionsMenu
-								title="FORMAT"
 								items={formatItems}
 								selectedOptionFormat={options.format}
 								config={config}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { Button, Switch, Typography } from 'antd';
+import { Switch, Typography } from 'antd';
 import { WsDataEvent } from 'api/common/getQueryStats';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
@@ -7,9 +7,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Download from 'container/DownloadV2/DownloadV2';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import useClickOutside from 'hooks/useClickOutside';
-import { ArrowUp10, Minus, Sliders } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { ArrowUp10, Minus } from 'lucide-react';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import QueryStatus from './QueryStatus';
@@ -41,9 +39,6 @@ function LogsActionsContainer({
 	isSuccess: boolean;
 	queryStats: WsDataEvent | undefined;
 }): JSX.Element {
-	const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
-	const menuRef = useRef<HTMLDivElement>(null);
-
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
@@ -71,18 +66,6 @@ function LogsActionsContainer({
 		},
 	];
 
-	const handleToggleShowFormatOptions = (): void =>
-		setShowFormatMenuItems(!showFormatMenuItems);
-
-	useClickOutside({
-		ref: menuRef,
-		onClickOutside: () => {
-			if (showFormatMenuItems) {
-				setShowFormatMenuItems(false);
-			}
-		},
-	});
-
 	return (
 		<div className="logs-actions-container">
 			<div className="tab-options">
@@ -119,22 +102,12 @@ function LogsActionsContainer({
 								isLoading={isFetching}
 								fileName="log_data"
 							/>
-							<div className="format-options-container" ref={menuRef}>
-								<Button
-									className="periscope-btn ghost"
-									onClick={handleToggleShowFormatOptions}
-									icon={<Sliders size={14} />}
-									data-testid="periscope-btn"
-								/>
-
-								{showFormatMenuItems && (
+							<div className="format-options-container">
 								<LogsFormatOptionsMenu
-										title="FORMAT"
 									items={formatItems}
 									selectedOptionFormat={options.format}
 									config={config}
 								/>
-								)}
 							</div>
 						</>
 					)}