mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Scopes: Fix debounce for nodes search (#90042)
This commit is contained in:
parent
09d833fef9
commit
ab1ad8ed7f
@ -108,10 +108,8 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
|
||||
currentNode.isExpanded = isExpanded;
|
||||
currentNode.query = query;
|
||||
|
||||
this.setState({ nodes, loadingNodeName: undefined });
|
||||
|
||||
if (isExpanded || isDifferentQuery) {
|
||||
this.setState({ loadingNodeName: name });
|
||||
this.setState({ nodes, loadingNodeName: name });
|
||||
|
||||
this.nodesFetchingSub = from(fetchNodes(name, query))
|
||||
.pipe(
|
||||
@ -138,6 +136,8 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
|
||||
|
||||
this.nodesFetchingSub?.unsubscribe();
|
||||
});
|
||||
} else {
|
||||
this.setState({ nodes, loadingNodeName: undefined });
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { debounce } from 'lodash';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useDebounce } from 'react-use';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { FilterInput, useStyles2 } from '@grafana/ui';
|
||||
@ -18,13 +18,23 @@ export interface ScopesTreeSearchProps {
|
||||
export function ScopesTreeSearch({ anyChildExpanded, nodePath, query, onNodeUpdate }: ScopesTreeSearchProps) {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const [queryValue, setQueryValue] = useState(query);
|
||||
const [inputState, setInputState] = useState<{ value: string; isDirty: boolean }>({ value: query, isDirty: false });
|
||||
|
||||
useEffect(() => {
|
||||
setQueryValue(query);
|
||||
}, [query]);
|
||||
if (!inputState.isDirty && inputState.value !== query) {
|
||||
setInputState({ value: query, isDirty: false });
|
||||
}
|
||||
}, [inputState, query]);
|
||||
|
||||
const onQueryUpdate = useMemo(() => debounce(onNodeUpdate, 500), [onNodeUpdate]);
|
||||
useDebounce(
|
||||
() => {
|
||||
if (inputState.isDirty) {
|
||||
onNodeUpdate(nodePath, true, inputState.value);
|
||||
}
|
||||
},
|
||||
500,
|
||||
[inputState.isDirty, inputState.value]
|
||||
);
|
||||
|
||||
if (anyChildExpanded) {
|
||||
return null;
|
||||
@ -33,12 +43,11 @@ export function ScopesTreeSearch({ anyChildExpanded, nodePath, query, onNodeUpda
|
||||
return (
|
||||
<FilterInput
|
||||
placeholder={t('scopes.tree.search', 'Search')}
|
||||
value={queryValue}
|
||||
value={inputState.value}
|
||||
className={styles.input}
|
||||
data-testid="scopes-tree-search"
|
||||
onChange={(value) => {
|
||||
setQueryValue(value);
|
||||
onQueryUpdate(nodePath, true, value);
|
||||
setInputState({ value, isDirty: true });
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user