From be6a878fd6271aa3d06dd4ccfb373dcc2d88f298 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 22 Jun 2022 14:54:42 +0100
Subject: [PATCH] Annotations: Fixes a problem where annotation autocomplete
 would crash the panel (#51164)

* use custom formatCreateLabel in AnnotationEditorForm

* give `TagFilter` it's own formatCreateLabel

* only show TagBadge if the label is a string
---
 public/app/core/components/TagFilter/TagOption.tsx             | 2 +-
 .../datasource/grafana/components/AnnotationQueryEditor.tsx    | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx
index c7ad15fcb18..4227a4b16b1 100644
--- a/public/app/core/components/TagFilter/TagOption.tsx
+++ b/public/app/core/components/TagFilter/TagOption.tsx
@@ -19,7 +19,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 ?? 0} />
+        {typeof label === 'string' ? <TagBadge label={label} removeIcon={false} count={data.count ?? 0} /> : label}
       </div>
     </div>
   );
diff --git a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
index abe916bef24..477d282fa61 100644
--- a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
@@ -66,8 +66,6 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
       tags,
     });
 
-  const onFormatCreateLabel = (input: string) => `Use custom value: ${input}`;
-
   return (
     <FieldSet className={styles.container}>
       <Field label="Filter by">
@@ -95,7 +93,6 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
           <Field label="Tags" description={tagsTooltipContent}>
             <TagFilter
               allowCustomValue
-              formatCreateLabel={onFormatCreateLabel}
               inputId="grafana-annotations__tags"
               onChange={onTagsChange}
               tagOptions={getAnnotationTags}