TagFilter: Add support for allowCustomValue

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

@@ -14,6 +14,7 @@ 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;
   isClearable?: boolean;
@@ -30,6 +31,7 @@ const filterOption = (option: any, searchQuery: string) => {
 };
 
 export const TagFilter: FC<Props> = ({
+  allowCustomValue = false,
   hideValues,
   isClearable,
   onChange,
@@ -60,6 +62,7 @@ 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,

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>
   );

public/app/plugins/datasource/grafana/components/AnnotationQuery.tsx

@@ -90,7 +90,7 @@ export default function AnnotationQuery({ query, onChange }: Props) {
             <InlineSwitch value={matchAny} onChange={onMatchAnyChange} />
           </InlineField>
           <InlineField label="Tags" labelWidth="auto" tooltip={tagsTooltipContent}>
-            <TagFilter onChange={onTagsChange} tagOptions={getAnnotationTags} tags={tags} />
+            <TagFilter allowCustomValue onChange={onTagsChange} tagOptions={getAnnotationTags} tags={tags} />
           </InlineField>
         </InlineFieldRow>
       )}