Annotations: Fix custom tag functionality (#51537) (#51588)

(cherry picked from commit 35240f6d5a)

Co-authored-by: Nathan Marrs <nathanielmarrs@gmail.com>

.betterer.results

@@ -3521,14 +3521,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"],
+      [109, 32, 3, "Unexpected any. Specify a different type.", "193409811"],
-      [121, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
+      [132, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
-      [122, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
+      [133, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
-      [133, 27, 3, "Unexpected any. Specify a different type.", "193409811"],
+      [144, 27, 3, "Unexpected any. Specify a different type.", "193409811"],
-      [136, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
+      [147, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
-      [145, 44, 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"],

public/app/core/components/TagFilter/TagFilter.tsx

@@ -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 = {

public/app/features/annotations/standardAnnotationSupport.test.ts

@@ -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] },

public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx

@@ -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"', () => {