Annotations: Fix custom tag functionality (#51537)

This commit is contained in:
Nathan Marrs 2022-06-29 10:37:50 -07:00 committed by GitHub
parent 66c911f263
commit 35240f6d5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 12 deletions

View File

@ -3401,14 +3401,14 @@ exports[`better eslint`] = {
[8, 12, 3, "Unexpected any. Specify a different type.", "193409811"],
[11, 53, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"public/app/core/components/TagFilter/TagFilter.tsx:3569632478": [
"public/app/core/components/TagFilter/TagFilter.tsx:818083657": [
[35, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
[103, 32, 3, "Unexpected any. Specify a different type.", "193409811"],
[121, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
[122, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
[133, 27, 3, "Unexpected any. Specify a different type.", "193409811"],
[136, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
[145, 44, 3, "Unexpected any. Specify a different type.", "193409811"]
[109, 32, 3, "Unexpected any. Specify a different type.", "193409811"],
[132, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
[133, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
[144, 27, 3, "Unexpected any. Specify a different type.", "193409811"],
[147, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
[156, 44, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"public/app/core/components/TagFilter/TagOption.tsx:108355790": [
[10, 50, 3, "Unexpected any. Specify a different type.", "193409811"],

View File

@ -56,6 +56,7 @@ export const TagFilter: FC<Props> = ({
const [options, setOptions] = useState<TagSelectOption[]>(currentlySelectedTags);
const [isLoading, setIsLoading] = useState(false);
const [previousTags, setPreviousTags] = useState(tags);
const [customTags, setCustomTags] = useState<TagSelectOption[]>(currentlySelectedTags);
// Necessary to force re-render to keep tag options up to date / relevant
const selectKey = useMemo(() => tags.join(), [tags]);
@ -82,9 +83,14 @@ export const TagFilter: FC<Props> = ({
const onFocus = useCallback(async () => {
setIsLoading(true);
const results = await onLoadOptions();
if (allowCustomValue) {
customTags.forEach((customTag) => results.push(customTag));
}
setOptions(results);
setIsLoading(false);
}, [onLoadOptions]);
}, [allowCustomValue, customTags, onLoadOptions]);
useEffect(() => {
// Load options when tag is selected externally
@ -102,11 +108,16 @@ export const TagFilter: FC<Props> = ({
}, [onFocus, previousTags, tags]);
const onTagChange = (newTags: any[]) => {
// On remove with 1 item returns null, so we need to make sure it's an empty array in that case
// https://github.com/JedWatson/react-select/issues/3632
newTags.forEach((tag) => (tag.count = 0));
// On remove with 1 item returns null, so we need to make sure it's an empty array in that case
// https://github.com/JedWatson/react-select/issues/3632
onChange((newTags || []).map((tag) => tag.value));
// If custom values are allowed, set custom tags to prevent overwriting from query update
if (allowCustomValue) {
setCustomTags(newTags.filter((tag) => !tags.includes(tag)));
}
};
const selectOptions = {

View File

@ -49,7 +49,7 @@ describe('DataFrame to annotations', () => {
]);
});
test('explicit mappins', async () => {
test('explicit mappings', async () => {
const frame = toDataFrame({
fields: [
{ name: 'time1', values: [111, 222, 333] },

View File

@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react';
import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQueryType } from '../types';
@ -46,6 +46,17 @@ describe('AnnotationQueryEditor', () => {
const tags = screen.getByLabelText(/Tags/);
expect(tags).toBeInTheDocument();
});
it('add and remove a custom tag', () => {
render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
const tags = screen.getByLabelText(/Tags/);
fireEvent.change(tags, { target: { value: 'customTag' } });
fireEvent.submit(tags);
const addedTag = screen.getByText('customTag');
expect(addedTag).toBeInTheDocument();
fireEvent.click(addedTag);
expect(addedTag).not.toBeInTheDocument();
});
});
describe('when the query type is "Dashboard"', () => {