From da7f5864f5976aa3ebdd1ce04fb8e2c6fdcf0e4e Mon Sep 17 00:00:00 2001
From: Maria Alexandra <239999+axelavargas@users.noreply.github.com>
Date: Tue, 13 Jul 2021 13:30:07 +0200
Subject: [PATCH] Annotations: Add custom label for custom values in builtin
 annotations (#36691)

---
 public/app/core/components/TagFilter/TagFilter.tsx             | 3 +++
 .../datasource/grafana/components/AnnotationQueryEditor.tsx    | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index f57342ff48d..e72ee56a1fb 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -15,6 +15,7 @@ export interface TermCount {
 
 export interface Props {
   allowCustomValue?: boolean;
+  formatCreateLabel?: (input: string) => string;
   /** Do not show selected values inside Select. Useful when the values need to be shown in some other components */
   hideValues?: boolean;
   inputId?: string;
@@ -33,6 +34,7 @@ const filterOption = (option: any, searchQuery: string) => {
 
 export const TagFilter: FC<Props> = ({
   allowCustomValue = false,
+  formatCreateLabel,
   hideValues,
   inputId,
   isClearable,
@@ -65,6 +67,7 @@ export const TagFilter: FC<Props> = ({
 
   const selectOptions = {
     allowCustomValue,
+    formatCreateLabel,
     defaultOptions: true,
     filterOption,
     getOptionLabel: (i: any) => i.label,
diff --git a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
index ff1ee696762..ab71638c92e 100644
--- a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
@@ -65,6 +65,8 @@ 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">
@@ -92,6 +94,7 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
           <Field label="Tags" description={tagsTooltipContent}>
             <TagFilter
               allowCustomValue
+              formatCreateLabel={onFormatCreateLabel}
               inputId="grafana-annotations__tags"
               onChange={onTagsChange}
               tagOptions={getAnnotationTags}