Annotations: Add typeahead support for tags in builtin annotations (#36377)

* Annotations: create React component, naive attempt at hooking together

* Annotations: Use query object instead of passing annotation

* Annotations: Hook up the new api to get annotation tags

* Annotations: Use InlineFieldRow instead of gf-form-inline

* Annotations: Use InlineSwitch instead of gf-form-switch

* TagFilter: Add support for allowCustomValue

* Annotations: Update to match backend api

* Annotations: Add basic tests, expose inputId on `TagFilter`

* Annotations: Fix test name and reorder tests slightly

* Annotations: Use FieldSet instead of gf-form-group

* Refactor: fixes annotation queries

* Annotations: Everything working, just types to fix...

* Annotations: Fix types?

* Revert "Annotations: Fix types?"

This reverts commit 6df0cae0c9.

* Annotations: Fix types again?

* Annotations: Remove old angular code

* Annotations: Fix unit tests for AnnotationQueryEditor

* Annotations: Check if it's an annotation query immediately

* Annotations: Prevent TagFilter overflowing container when there are a large number of tags

* Change to new form styles

* Annotations: Add id's + fix unit tests

* Updated wording

* Annotations: Allow custom value to preserve being able to use template variables

Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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

@@ -14,8 +14,10 @@ export interface TermCount {
 }
 
 export interface Props {
+  allowCustomValue?: boolean;
   /** Do not show selected values inside Select. Useful when the values need to be shown in some other components */
   hideValues?: boolean;
+  inputId?: string;
   isClearable?: boolean;
   onChange: (tags: string[]) => void;
   placeholder?: string;
@@ -30,7 +32,9 @@ const filterOption = (option: any, searchQuery: string) => {
 };
 
 export const TagFilter: FC<Props> = ({
+  allowCustomValue = false,
   hideValues,
+  inputId,
   isClearable,
   onChange,
   placeholder = 'Filter by tag',
@@ -60,10 +64,12 @@ export const TagFilter: FC<Props> = ({
   const value = tags.map((tag) => ({ value: tag, label: tag, count: 0 }));
 
   const selectOptions = {
+    allowCustomValue,
     defaultOptions: true,
     filterOption,
     getOptionLabel: (i: any) => i.label,
     getOptionValue: (i: any) => i.value,
+    inputId,
     isMulti: true,
     loadOptions: onLoadOptions,
     loadingMessage: 'Loading...',

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

@@ -18,7 +18,7 @@ export const TagOption: FC<ExtendedOptionProps> = ({ data, className, label, isF
   return (
     <div className={cx(styles.option, isFocused && styles.optionFocused)} aria-label="Tag option" {...innerProps}>
       <div className={`tag-filter-option ${className || ''}`}>
-        <TagBadge label={label} removeIcon={false} count={data.count} />
+        <TagBadge label={label} removeIcon={false} count={data.count ?? 0} />
       </div>
     </div>
   );