chore: fix filter editing issue in infra monitoring (#6961)

This commit is contained in:
Amlan Kumar Nandy 2025-01-29 22:51:57 +05:30 committed by GitHub
parent 88084af4d4
commit 1378590429
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -88,6 +88,8 @@ function QueryBuilderSearch({
[pathname],
);
const [isEditingTag, setIsEditingTag] = useState(false);
const {
updateTag,
handleClearTag,
@ -133,6 +135,16 @@ function QueryBuilderSearch({
const { handleRunQuery, currentQuery } = useQueryBuilder();
const toggleEditMode = useCallback(
(value: boolean) => {
// Editing mode is required only in infra monitoring mode
if (isInfraMonitoring) {
setIsEditingTag(value);
}
},
[isInfraMonitoring],
);
const onTagRender = ({
value,
closable,
@ -146,12 +158,16 @@ function QueryBuilderSearch({
const onCloseHandler = (): void => {
onClose();
// Editing is done after closing a tag
toggleEditMode(false);
handleSearch('');
setSearchKey('');
};
const tagEditHandler = (value: string): void => {
updateTag(value);
// Editing starts
toggleEditMode(true);
if (isInfraMonitoring) {
setSearchValue(value);
} else {
@ -188,6 +204,11 @@ function QueryBuilderSearch({
if (isMulti || event.key === 'Backspace') handleKeyDown(event);
if (isExistsNotExistsOperator(searchValue)) handleKeyDown(event);
// Editing is done after enter key press
if (event.key === 'Enter') {
toggleEditMode(false);
}
if (
!disableNavigationShortcuts &&
(event.ctrlKey || event.metaKey) &&
@ -270,7 +291,14 @@ function QueryBuilderSearch({
};
});
onChange(initialTagFilters);
// If in infra monitoring, only run the onChange query when editing is finsished.
if (isInfraMonitoring) {
if (!isEditingTag) {
onChange(initialTagFilters);
}
} else {
onChange(initialTagFilters);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sourceKeys]);
@ -367,7 +395,11 @@ function QueryBuilderSearch({
)
}
showAction={['focus']}
onBlur={handleOnBlur}
onBlur={(e: React.FocusEvent<HTMLInputElement>): void => {
handleOnBlur(e);
// Editing is done after tapping out of the input
toggleEditMode(false);
}}
popupClassName={isLogsExplorerPage ? 'logs-explorer-popup' : ''}
dropdownRender={(menu): ReactElement => (
<div>