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
This commit is contained in:
Ashley Harrison 2022-06-22 14:54:42 +01:00 committed by GitHub
parent 8b82bebdc5
commit be6a878fd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 1 additions and 4 deletions

View File

@ -19,7 +19,7 @@ export const TagOption: FC<ExtendedOptionProps> = ({ data, className, label, isF
return ( return (
<div className={cx(styles.option, isFocused && styles.optionFocused)} aria-label="Tag option" {...innerProps}> <div className={cx(styles.option, isFocused && styles.optionFocused)} aria-label="Tag option" {...innerProps}>
<div className={`tag-filter-option ${className || ''}`}> <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>
</div> </div>
); );

View File

@ -66,8 +66,6 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
tags, tags,
}); });
const onFormatCreateLabel = (input: string) => `Use custom value: ${input}`;
return ( return (
<FieldSet className={styles.container}> <FieldSet className={styles.container}>
<Field label="Filter by"> <Field label="Filter by">
@ -95,7 +93,6 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
<Field label="Tags" description={tagsTooltipContent}> <Field label="Tags" description={tagsTooltipContent}>
<TagFilter <TagFilter
allowCustomValue allowCustomValue
formatCreateLabel={onFormatCreateLabel}
inputId="grafana-annotations__tags" inputId="grafana-annotations__tags"
onChange={onTagsChange} onChange={onTagsChange}
tagOptions={getAnnotationTags} tagOptions={getAnnotationTags}