Annotations: Add custom label for custom values in builtin annotations (#36691)

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,

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}