From ac5b56a7e4b8ed106e8f13204f7da712af5965cd Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 30 Jun 2021 14:46:07 +0100
Subject: [PATCH] TagFilter: Add support for allowCustomValue

---
 public/app/core/components/TagFilter/TagFilter.tsx             | 3 +++
 public/app/core/components/TagFilter/TagOption.tsx             | 2 +-
 .../plugins/datasource/grafana/components/AnnotationQuery.tsx  | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 8f4cd9ffea2..d41d867041e 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/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,
diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx
index 7352fd2d498..8448d01e279 100644
--- a/public/app/core/components/TagFilter/TagOption.tsx
+++ b/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>
   );
diff --git a/public/app/plugins/datasource/grafana/components/AnnotationQuery.tsx b/public/app/plugins/datasource/grafana/components/AnnotationQuery.tsx
index 089fc01432a..4e6a23a2665 100644
--- a/public/app/plugins/datasource/grafana/components/AnnotationQuery.tsx
+++ b/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>
       )}