From 5af35f1f3cccf0637c9fc320aaf2e2eddba91726 Mon Sep 17 00:00:00 2001
From: Hugo Kiyodi Oshiro <hugo.oshiro@grafana.com>
Date: Thu, 14 Sep 2023 14:23:17 +0200
Subject: [PATCH] Plugins: Unset annotation editor variables (#74519)

---
 .../components/AnnotationResultMapper.tsx     | 27 ++++++++++++-------
 .../annotations/standardAnnotationSupport.ts  |  4 +--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/public/app/features/annotations/components/AnnotationResultMapper.tsx b/public/app/features/annotations/components/AnnotationResultMapper.tsx
index bb8cdb39b52..a229769a247 100644
--- a/public/app/features/annotations/components/AnnotationResultMapper.tsx
+++ b/public/app/features/annotations/components/AnnotationResultMapper.tsx
@@ -99,6 +99,15 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
 
   onFieldNameChange = (k: keyof AnnotationEvent, v: SelectableValue<string>) => {
     const mappings = this.props.mappings || {};
+
+    // in case of clearing the value
+    if (!v) {
+      const newMappings = { ...this.props.mappings };
+      delete newMappings[k];
+      this.props.change(newMappings);
+      return;
+    }
+
     const mapping = mappings[k] || {};
 
     this.props.change({
@@ -114,17 +123,14 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
   renderRow(row: AnnotationFieldInfo, mapping: AnnotationEventFieldMapping, first?: AnnotationEvent) {
     const { fieldNames } = this.state;
 
-    let picker = fieldNames;
+    let picker = [...fieldNames];
     const current = mapping.value;
     let currentValue = fieldNames.find((f) => current === f.value);
-    if (current) {
-      picker = [...fieldNames];
-      if (!currentValue) {
-        picker.push({
-          label: current,
-          value: current,
-        });
-      }
+    if (current && !currentValue) {
+      picker.push({
+        label: current,
+        value: current,
+      });
     }
 
     let value = first ? first[row.key] : '';
@@ -139,7 +145,7 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
     return (
       <tr key={row.key}>
         <td>
-          {row.key}{' '}
+          {row.label || row.key}{' '}
           {row.help && (
             <Tooltip content={row.help}>
               <Icon name="info-circle" />
@@ -166,6 +172,7 @@ export class AnnotationFieldMapper extends PureComponent<Props, State> {
             }}
             noOptionsMessage="Unknown field names"
             allowCustomValue={true}
+            isClearable
           />
         </td>
         <td>{`${value}`}</td>
diff --git a/public/app/features/annotations/standardAnnotationSupport.ts b/public/app/features/annotations/standardAnnotationSupport.ts
index 869b639466f..6e7e9c15d39 100644
--- a/public/app/features/annotations/standardAnnotationSupport.ts
+++ b/public/app/features/annotations/standardAnnotationSupport.ts
@@ -89,7 +89,7 @@ interface AnnotationEventFieldSetter {
 
 export interface AnnotationFieldInfo {
   key: keyof AnnotationEvent;
-
+  label?: string;
   split?: string;
   field?: (frame: DataFrame) => Field | undefined;
   placeholder?: string;
@@ -103,7 +103,7 @@ export const annotationEventNames: AnnotationFieldInfo[] = [
     field: (frame: DataFrame) => frame.fields.find((f) => f.type === FieldType.time),
     placeholder: 'time, or the first time field',
   },
-  { key: 'timeEnd', help: 'When this field is defined, the annotation will be treated as a range' },
+  { key: 'timeEnd', label: 'end time', help: 'When this field is defined, the annotation will be treated as a range' },
   {
     key: 'title',
   },