fix: search not working when switching spans (#3048)

This commit is contained in:
Sachin M K 2023-07-10 10:52:28 +05:30 committed by GitHub
parent c72729f8bc
commit e3e0787459
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -6,7 +6,6 @@ import {
Dispatch, Dispatch,
SetStateAction, SetStateAction,
useCallback, useCallback,
useEffect,
useMemo, useMemo,
useState, useState,
} from 'react'; } from 'react';
@ -24,13 +23,9 @@ function Tags({
setText, setText,
}: TagsProps): JSX.Element { }: TagsProps): JSX.Element {
const { t } = useTranslation(['traceDetails']); const { t } = useTranslation(['traceDetails']);
const [allRenderedTags, setAllRenderedTags] = useState(tags); const [searchText, setSearchText] = useState('');
const isSearchVisible = useMemo(() => tags.length > 5, [tags]); const isSearchVisible = useMemo(() => tags.length > 5, [tags]);
useEffect(() => {
setAllRenderedTags(tags);
}, [tags]);
const getLink = useCallback( const getLink = useCallback(
(item: Record<string, string>) => (item: Record<string, string>) =>
`${ROUTES.TRACE}/${item.TraceId}${formUrlParams({ `${ROUTES.TRACE}/${item.TraceId}${formUrlParams({
@ -41,14 +36,12 @@ function Tags({
[], [],
); );
const onChangeHandler = useCallback( const onChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
(e: ChangeEvent<HTMLInputElement>): void => { const { value } = e.target;
const { value } = e.target; setSearchText(value);
const filteredTags = tags.filter((tag) => tag.key.includes(value)); };
setAllRenderedTags(filteredTags);
}, const filteredTags = tags.filter((tag) => tag.key.includes(searchText));
[tags],
);
if (tags.length === 0) { if (tags.length === 0) {
return <Typography>No tags in selected span</Typography>; return <Typography>No tags in selected span</Typography>;
@ -61,9 +54,10 @@ function Tags({
placeholder={t('traceDetails:search_tags')} placeholder={t('traceDetails:search_tags')}
allowClear allowClear
onChange={onChangeHandler} onChange={onChangeHandler}
value={searchText}
/> />
)} )}
{allRenderedTags.map((tag) => ( {filteredTags.map((tag) => (
<Tag <Tag
key={JSON.stringify(tag)} key={JSON.stringify(tag)}
{...{ {...{