refactor(annotation): improve annotation modal (#15359)

superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx

@@ -279,6 +279,7 @@ function AnnotationList({
       />
       <AnnotationModal
         addDangerToast={addDangerToast}
+        addSuccessToast={addSuccessToast}
         annotation={currentAnnotation}
         show={annotationModalOpen}
         onAnnotationAdd={() => refreshData()}

superset-frontend/src/views/CRUD/annotation/AnnotationModal.test.jsx

@@ -45,6 +45,7 @@ const store = mockStore({});
 
 const mockedProps = {
   addDangerToast: () => {},
+  addSuccessToast: () => {},
   annotation: mockData,
   onAnnotationAdd: jest.fn(() => []),
   onHide: () => {},

superset-frontend/src/views/CRUD/annotation/AnnotationModal.tsx

@@ -30,6 +30,7 @@ import { AnnotationObject } from './types';
 
 interface AnnotationModalProps {
   addDangerToast: (msg: string) => void;
+  addSuccessToast: (msg: string) => void;
   annnotationLayerId: number;
   annotation?: AnnotationObject | null;
   onAnnotationAdd?: (annotation?: AnnotationObject) => void;
@@ -85,6 +86,7 @@ const AnnotationContainer = styled.div`
 
 const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
   addDangerToast,
+  addSuccessToast,
   annnotationLayerId,
   annotation = null,
   onAnnotationAdd,
@@ -96,7 +98,6 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
     currentAnnotation,
     setCurrentAnnotation,
   ] = useState<AnnotationObject | null>(null);
-  const [isHidden, setIsHidden] = useState<boolean>(true);
   const isEditMode = annotation !== null;
 
   // annotation fetch logic
@@ -122,13 +123,12 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
     });
   };
 
-  // Functions
   const hide = () => {
-    setIsHidden(true);
-
-    // Reset annotation
-    resetAnnotation();
-
+    if (isEditMode) {
+      setCurrentAnnotation(resource);
+    } else {
+      resetAnnotation();
+    }
     onHide();
   };
 
@@ -153,6 +153,8 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
           }
 
           hide();
+
+          addSuccessToast(t('The annotation has been updated'));
         });
       }
     } else if (currentAnnotation) {
@@ -167,6 +169,8 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
         }
 
         hide();
+
+        addSuccessToast(t('The annotation has been saved'));
       });
     }
   };
@@ -236,7 +240,7 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
       (!currentAnnotation ||
         !currentAnnotation.id ||
         (annotation && annotation.id !== currentAnnotation.id) ||
-        (isHidden && show))
+        show)
     ) {
       if (annotation && annotation.id !== null && !loading) {
         const id = annotation.id || 0;
@@ -245,7 +249,7 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
       }
     } else if (
       !isEditMode &&
-      (!currentAnnotation || currentAnnotation.id || (isHidden && show))
+      (!currentAnnotation || currentAnnotation.id || show)
     ) {
       resetAnnotation();
     }
@@ -266,11 +270,6 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
     currentAnnotation ? currentAnnotation.end_dttm : '',
   ]);
 
-  // Show/hide
-  if (isHidden && show) {
-    setIsHidden(false);
-  }
-
   return (
     <Modal
       disablePrimaryButton={disableSave}