mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Annotations: Fix custom tag functionality (#51537)
This commit is contained in:
parent
66c911f263
commit
35240f6d5a
@ -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"],
|
||||
|
@ -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 = {
|
||||
|
@ -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] },
|
||||
|
@ -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"', () => {
|
||||
|
Loading…
Reference in New Issue
Block a user