fix: Adding and removing annotations (#11811)

* Fix creating new annotation layer and refactor AnnotationLayer component

* Refactor checking overrides keys in AnnotationLayer

* Fix adding and editing annotations. Refactor AnnotationLayer submit and remove functions

* Remove unused parent prop from AnnotationLayer

* Fix toggling annotation layer popover

* Revert extracting annotation props to nested object

* Clean up AnnotationLayer component

* Remove unnecessary import

* Use original name for identifying annotations in add/remove actions

* Change props order and rename removeAnnotation function

* Compare annotations by reference instead of name

superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -58,7 +58,7 @@ const defaultProps = {
 class AnnotationLayerControl extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = { popoverVisible: false };
+    this.state = { popoverVisible: {}, addedAnnotationIndex: null };
     this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
     this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
     this.handleVisibleChange = this.handleVisibleChange.bind(this);
@@ -83,48 +83,50 @@ class AnnotationLayerControl extends React.PureComponent {
     }
   }
 
-  addAnnotationLayer(annotationLayer) {
-    const annotation = annotationLayer;
-    let annotations = this.props.value.slice();
-    const i = annotations.findIndex(
-      x => x.name === (annotation.oldName || annotation.name),
-    );
-    delete annotation.oldName;
-    if (i > -1) {
-      annotations[i] = annotation;
+  addAnnotationLayer(originalAnnotation, newAnnotation) {
+    let annotations = this.props.value;
+    if (annotations.includes(originalAnnotation)) {
+      annotations = annotations.map(anno =>
+        anno === originalAnnotation ? newAnnotation : anno,
+      );
     } else {
-      annotations = annotations.concat(annotation);
+      annotations = [...annotations, newAnnotation];
+      this.setState({ addedAnnotationIndex: annotations.length - 1 });
     }
-    this.props.refreshAnnotationData(annotation);
+
+    this.props.refreshAnnotationData(newAnnotation);
     this.props.onChange(annotations);
   }
 
   handleVisibleChange(visible, popoverKey) {
     this.setState(prevState => ({
-      popoverVisible: { ...prevState, [popoverKey]: visible },
+      popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
     }));
   }
 
   removeAnnotationLayer(annotation) {
-    const annotations = this.props.value
-      .slice()
-      .filter(x => x.name !== annotation.oldName);
+    const annotations = this.props.value.filter(anno => anno !== annotation);
     this.props.onChange(annotations);
   }
 
-  renderPopover(parent, popoverKey, annotation, error) {
-    const id = !annotation ? '_new' : annotation.name;
+  renderPopover(popoverKey, annotation, error) {
+    const id = annotation?.name || '_new';
+
     return (
       <div id={`annotation-pop-${id}`} data-test="popover-content">
         <AnnotationLayer
           {...annotation}
-          parent={this.refs[parent]}
           error={error}
           colorScheme={this.props.colorScheme}
           vizType={this.props.vizType}
-          addAnnotationLayer={this.addAnnotationLayer}
-          removeAnnotationLayer={this.removeAnnotationLayer}
-          close={() => this.handleVisibleChange(false, popoverKey)}
+          addAnnotationLayer={newAnnotation =>
+            this.addAnnotationLayer(annotation, newAnnotation)
+          }
+          removeAnnotationLayer={() => this.removeAnnotationLayer(annotation)}
+          close={() => {
+            this.handleVisibleChange(false, popoverKey);
+            this.setState({ addedAnnotationIndex: null });
+          }}
         />
       </div>
     );
@@ -153,6 +155,9 @@ class AnnotationLayerControl extends React.PureComponent {
   }
 
   render() {
+    const { addedAnnotationIndex } = this.state;
+    const addedAnnotation = this.props.value[addedAnnotationIndex];
+
     const annotations = this.props.value.map((anno, i) => (
       <Popover
         key={i}
@@ -160,7 +165,6 @@ class AnnotationLayerControl extends React.PureComponent {
         placement="right"
         title={t('Edit Annotation Layer')}
         content={this.renderPopover(
-          `overlay-${i}`,
           i,
           anno,
           this.props.annotationError[anno.name],
@@ -183,9 +187,10 @@ class AnnotationLayerControl extends React.PureComponent {
           <Popover
             trigger="click"
             placement="right"
-            content={this.renderPopover('overlay-new', addLayerPopoverKey)}
+            content={this.renderPopover(addLayerPopoverKey, addedAnnotation)}
             title={t('Add Annotation Layer')}
             visible={this.state.popoverVisible[addLayerPopoverKey]}
+            destroyTooltipOnHide
             onVisibleChange={visible =>
               this.handleVisibleChange(visible, addLayerPopoverKey)
             }