Unmount dialog & add onOpen (#53307) (#54025)

(cherry picked from commit bb87ad5)

Co-authored-by: Wei-Yu Chen <[email protected]>

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx

@@ -30,6 +30,7 @@ const EditableMarkdownButton = ({
   isPending,
   mdContent,
   onConfirm,
+  onOpen,
   placeholder,
   setMdContent,
   text,
@@ -40,6 +41,7 @@ const EditableMarkdownButton = ({
   readonly isPending: boolean;
   readonly mdContent?: string | null;
   readonly onConfirm: () => void;
+  readonly onOpen: () => void;
   readonly placeholder: string;
   readonly setMdContent: (value: string) => void;
   readonly text: string;
@@ -52,7 +54,12 @@ const EditableMarkdownButton = ({
       <ActionButton
         actionName={placeholder}
         icon={icon}
-        onClick={() => setIsOpen(true)}
+        onClick={() => {
+          if (!isOpen) {
+            onOpen();
+          }
+          setIsOpen(true);
+        }}
         text={text}
         withText={withText}
       />
@@ -62,6 +69,7 @@ const EditableMarkdownButton = ({
         onOpenChange={() => setIsOpen(false)}
         open={isOpen}
         size="md"
+        unmountOnExit={true}
       >
         <Dialog.Content backdrop>
           <Dialog.Header bg="blue.muted">

airflow-core/src/airflow/ui/src/pages/Run/Header.tsx

@@ -58,6 +58,11 @@ export const Header = ({
       });
     }
   }, [dagId, dagRun.note, dagRunId, mutate, note]);
+
+  const onOpen = () => {
+    setNote(dagRun.note ?? "");
+  };
+
   const containerRef = useRef<HTMLDivElement>();
   const containerWidth = useContainerWidth(containerRef);
 
@@ -72,6 +77,7 @@ export const Header = ({
               isPending={isPending}
               mdContent={note}
               onConfirm={onConfirm}
+              onOpen={onOpen}
               placeholder="Add a note..."
               setMdContent={setNote}
               text={Boolean(dagRun.note) ? "Note" : "Add a note"}

airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx

@@ -82,6 +82,10 @@ export const Header = ({
     }
   }, [dagId, dagRunId, mapIndex, mutate, note, taskId, taskInstance.note]);
 
+  const onOpen = () => {
+    setNote(taskInstance.note ?? "");
+  };
+
   return (
     <Box ref={containerRef}>
       <HeaderCard
@@ -93,6 +97,7 @@ export const Header = ({
               isPending={isPending}
               mdContent={note}
               onConfirm={onConfirm}
+              onOpen={onOpen}
               placeholder="Add a note..."
               setMdContent={setNote}
               text={Boolean(taskInstance.note) ? "Note" : "Add a note"}