diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx index beec3b55a9..740ceaf5b7 100644 --- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx +++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx @@ -4,6 +4,7 @@ import './LogsFormatOptionsMenu.styles.scss'; import { Button, Input, InputNumber, 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'; @@ -81,6 +82,7 @@ export default function LogsFormatOptionsMenu({ }, 300); const handleToggleAddNewColumn = (): void => { + addColumn?.onSearch?.(''); setShowAddNewColumnContainer(!showAddNewColumnContainer); }; @@ -106,6 +108,39 @@ export default function LogsFormatOptionsMenu({ } }, [fontSizeValue]); + function handleColumnSelection( + currentIndex: number, + optionsData: DefaultOptionType[], + ): void { + const currentItem = optionsData[currentIndex]; + const itemLength = optionsData.length; + if (addColumn && addColumn?.onSelect) { + addColumn?.onSelect(selectedValue, { + label: currentItem.label, + disabled: false, + }); + + // if the last element is selected then select the previous one + if (currentIndex === itemLength - 1) { + // there should be more than 1 element in the list + if (currentIndex - 1 >= 0) { + const prevValue = optionsData[currentIndex - 1]?.value || null; + setSelectedValue(prevValue as string | null); + } else { + // if there is only one element then just select and do nothing + setSelectedValue(null); + } + } else { + // selecting any random element from the list except the last one + const nextIndex = currentIndex + 1; + + const nextValue = optionsData[nextIndex]?.value || null; + + setSelectedValue(nextValue as string | null); + } + } + } + const handleKeyDown = (e: KeyboardEvent): void => { if (!selectedValue) return; @@ -115,8 +150,6 @@ export default function LogsFormatOptionsMenu({ (item) => item?.value === selectedValue, ); - const currentItem = optionsData[currentIndex]; - const itemLength = optionsData.length; switch (e.key) { @@ -137,24 +170,7 @@ export default function LogsFormatOptionsMenu({ } case 'Enter': e.preventDefault(); - if (addColumn && addColumn?.onSelect) { - addColumn?.onSelect(selectedValue, { - label: currentItem.label, - disabled: false, - }); - - if (currentIndex === itemLength - 1) { - setSelectedValue(null); - break; - } else { - const nextIndex = currentIndex + 1; - - const nextValue = optionsData[nextIndex]?.value || null; - - setSelectedValue(nextValue as string | null); - } - } - + handleColumnSelection(currentIndex, optionsData); break; default: break; @@ -279,7 +295,7 @@ export default function LogsFormatOptionsMenu({ )}