GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 07:39:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: edit tag chip for WHERE clause updated logic (#2590)

Browse Source 
* feat: edit search filter tag for query builder

* fix: edit tag updated logic

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Chintan Sudani 2023-04-20 02:18:06 +05:30 committed by GitHub
parent ea6ee6a6ef
commit 2e4f0cfc33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
View File

@ -16,6 +16,7 @@ function QueryBuilderSearch({
onChange, onChange,
}: QueryBuilderSearchProps): JSX.Element { }: QueryBuilderSearchProps): JSX.Element {
const { const {
updateTag,
handleClearTag, handleClearTag,
handleKeyDown, handleKeyDown,
handleSearch, handleSearch,
@ -39,10 +40,19 @@ function QueryBuilderSearch({
handleSearch(''); handleSearch('');
}; };
const tagEditHandler = (value: string): void => {
updateTag(value);
handleSearch(value);
};
return ( return (
<Tag closable={closable} onClose={onCloseHandler}> <Tag closable={closable} onClose={onCloseHandler}>
<Tooltip title={value}> <Tooltip title={value}>
<TypographyText ellipsis $isInNin={isInNin}> <TypographyText
ellipsis
$isInNin={isInNin}
onClick={(): void => tagEditHandler(value)}
>
{value} {value}
</TypographyText> </TypographyText>
</Tooltip> </Tooltip>

1
frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
View File

@ -4,6 +4,7 @@ import styled from 'styled-components';
export const TypographyText = styled(Typography.Text)<{ $isInNin: boolean }>` export const TypographyText = styled(Typography.Text)<{ $isInNin: boolean }>`
width: ${({ $isInNin }): string => ($isInNin ? '10rem' : 'auto')}; width: ${({ $isInNin }): string => ($isInNin ? '10rem' : 'auto')};
cursor: pointer;
`; `;
export const StyledCheckOutlined = styled(CheckOutlined)` export const StyledCheckOutlined = styled(CheckOutlined)`

4
frontend/src/hooks/queryBuilder/useAutoComplete.ts
View File

@ -11,6 +11,7 @@ import { useTag } from './useTag';
import { useTagValidation } from './useTagValidation'; import { useTagValidation } from './useTagValidation';
interface IAutoComplete { interface IAutoComplete {
updateTag: (value: string) => void;
handleSearch: (value: string) => void; handleSearch: (value: string) => void;
handleClearTag: (value: string) => void; handleClearTag: (value: string) => void;
handleSelect: (value: string) => void; handleSelect: (value: string) => void;
@ -42,7 +43,7 @@ export const useAutoComplete = (query: IBuilderQueryForm): IAutoComplete => {
isFreeText, isFreeText,
} = useTagValidation(searchValue, operator, result); } = useTagValidation(searchValue, operator, result);
const { handleAddTag, handleClearTag, tags } = useTag( const { handleAddTag, handleClearTag, tags, updateTag } = useTag(
key, key,
isValidTag, isValidTag,
isFreeText, isFreeText,
@ -118,6 +119,7 @@ export const useAutoComplete = (query: IBuilderQueryForm): IAutoComplete => {
); );
return { return {
updateTag,
handleSearch, handleSearch,
handleClearTag, handleClearTag,
handleSelect, handleSelect,

8
frontend/src/hooks/queryBuilder/useTag.ts
View File

@ -5,6 +5,7 @@ type IUseTag = {
handleAddTag: (value: string) => void; handleAddTag: (value: string) => void;
handleClearTag: (value: string) => void; handleClearTag: (value: string) => void;
tags: string[]; tags: string[];
updateTag: (value: string) => void;
}; };
/** /**
@ -23,6 +24,11 @@ export const useTag = (
): IUseTag => { ): IUseTag => {
const [tags, setTags] = useState<string[]>([]); const [tags, setTags] = useState<string[]>([]);
const updateTag = (value: string): void => {
const newTags = tags?.filter((item: string) => item !== value);
setTags(newTags);
};
/** /**
* Adds a new tag to the tag list. * Adds a new tag to the tag list.
* @param {string} value - The tag value to be added. * @param {string} value - The tag value to be added.
@ -49,5 +55,5 @@ export const useTag = (
setTags((prevTags) => prevTags.filter((v) => v !== value)); setTags((prevTags) => prevTags.filter((v) => v !== value));
}, []); }, []);
return { handleAddTag, handleClearTag, tags }; return { handleAddTag, handleClearTag, tags, updateTag };
}; };