Make notes in UI visible directly in header

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

@@ -0,0 +1,66 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, VStack, Editable, Text } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+
+import ReactMarkdown from "./ReactMarkdown";
+
+const EditableMarkdownArea = ({
+  mdContent,
+  onBlur,
+  placeholder,
+  setMdContent,
+}: {
+  readonly mdContent?: string | null;
+  readonly onBlur?: () => void;
+  readonly placeholder?: string | null;
+  readonly setMdContent: (value: string) => void;
+}) => (
+  <Box mt={4} px={4} width="100%">
+    <Editable.Root
+      onBlur={onBlur}
+      onChange={(event: ChangeEvent<HTMLInputElement>) => setMdContent(event.target.value)}
+      value={mdContent ?? ""}
+    >
+      <Editable.Preview
+        _hover={{ backgroundColor: "transparent" }}
+        alignItems="flex-start"
+        as={VStack}
+        gap="0"
+        overflowY="auto"
+        width="100%"
+      >
+        {Boolean(mdContent) ? (
+          <ReactMarkdown>{mdContent}</ReactMarkdown>
+        ) : (
+          <Text color="fg.subtle">{placeholder}</Text>
+        )}
+      </Editable.Preview>
+      <Editable.Textarea
+        data-testid="markdown-input"
+        height="200px"
+        overflowY="auto"
+        placeholder={placeholder ?? ""}
+        resize="none"
+      />
+    </Editable.Root>
+  </Box>
+);
+
+export default EditableMarkdownArea;

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

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, VStack, Editable, Text, Flex } from "@chakra-ui/react";
-import { type ChangeEvent, type ReactElement, useState } from "react";
+import { Box, Heading, VStack, Flex } from "@chakra-ui/react";
+import { type ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button, Dialog } from "src/components/ui";
 
-import ReactMarkdown from "./ReactMarkdown";
+import EditableMarkdownArea from "./EditableMarkdownArea";
 import ActionButton from "./ui/ActionButton";
 
 const EditableMarkdownButton = ({
@@ -71,34 +71,11 @@ const EditableMarkdownButton = ({
             <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
           </Dialog.Header>
           <Dialog.Body alignItems="flex-start" as={VStack} gap="0">
-            <Editable.Root
-              onChange={(event: ChangeEvent<HTMLInputElement>) => setMdContent(event.target.value)}
-              value={mdContent ?? ""}
-            >
-              <Editable.Preview
-                _hover={{ backgroundColor: "transparent" }}
-                alignItems="flex-start"
-                as={VStack}
-                gap="0"
-                height="200px"
-                overflowY="auto"
-                width="100%"
-              >
-                {Boolean(mdContent) ? (
-                  <ReactMarkdown>{mdContent}</ReactMarkdown>
-                ) : (
-                  <Text color="fg.subtle">{placeholder}</Text>
-                )}
-              </Editable.Preview>
-              <Editable.Textarea
-                data-testid="markdown-input"
-                height="200px"
-                overflowY="auto"
-                placeholder={placeholder}
-                resize="none"
-              />
-            </Editable.Root>
-
+            <EditableMarkdownArea
+              mdContent={mdContent}
+              placeholder={placeholder}
+              setMdContent={setMdContent}
+            />
             <Flex justifyContent="end" mt={3} width="100%">
               <Button
                 colorPalette="blue"

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

@@ -24,6 +24,7 @@ import { FiBarChart, FiMessageSquare } from "react-icons/fi";
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { ClearRunButton } from "src/components/Clear";
 import { DagVersion } from "src/components/DagVersion";
+import EditableMarkdownArea from "src/components/EditableMarkdownArea";
 import EditableMarkdownButton from "src/components/EditableMarkdownButton";
 import { HeaderCard } from "src/components/HeaderCard";
 import { LimitedItemsList } from "src/components/LimitedItemsList";
@@ -68,17 +69,19 @@ export const Header = ({
       <HeaderCard
         actions={
           <>
-            <EditableMarkdownButton
-              header={translate("note.dagRun")}
-              icon={<FiMessageSquare />}
-              isPending={isPending}
-              mdContent={note}
-              onConfirm={onConfirm}
-              placeholder={translate("note.placeholder")}
-              setMdContent={setNote}
-              text={Boolean(dagRun.note) ? translate("note.label") : translate("note.add")}
-              withText={containerWidth > 700}
-            />
+            {!Boolean(dagRun.note) && (
+              <EditableMarkdownButton
+                header={translate("note.dagRun")}
+                icon={<FiMessageSquare />}
+                isPending={isPending}
+                mdContent={note}
+                onConfirm={onConfirm}
+                placeholder={translate("note.placeholder")}
+                setMdContent={setNote}
+                text={translate("note.add")}
+                withText={containerWidth > 700}
+              />
+            )}
             <ClearRunButton dagRun={dagRun} isHotkeyEnabled withText={containerWidth > 700} />
             <MarkRunAsButton dagRun={dagRun} isHotkeyEnabled withText={containerWidth > 700} />
           </>
@@ -121,6 +124,9 @@ export const Header = ({
         ]}
         title={<Time datetime={dagRun.run_after} />}
       />
+      {Boolean(dagRun.note) && (
+        <EditableMarkdownArea mdContent={note} onBlur={onConfirm} setMdContent={setNote} />
+      )}
     </Box>
   );
 };

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

@@ -25,6 +25,7 @@ import { MdOutlineTask } from "react-icons/md";
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ClearTaskInstanceButton } from "src/components/Clear";
 import { DagVersion } from "src/components/DagVersion";
+import EditableMarkdownArea from "src/components/EditableMarkdownArea";
 import EditableMarkdownButton from "src/components/EditableMarkdownButton";
 import { HeaderCard } from "src/components/HeaderCard";
 import { MarkTaskInstanceAsButton } from "src/components/MarkAs";
@@ -93,17 +94,19 @@ export const Header = ({
       <HeaderCard
         actions={
           <>
-            <EditableMarkdownButton
-              header={translate("note.taskInstance")}
-              icon={<FiMessageSquare />}
-              isPending={isPending}
-              mdContent={note}
-              onConfirm={onConfirm}
-              placeholder={translate("note.placeholder")}
-              setMdContent={setNote}
-              text={Boolean(taskInstance.note) ? translate("note.label") : translate("note.add")}
-              withText={containerWidth > 700}
-            />
+            {!Boolean(taskInstance.note) && (
+              <EditableMarkdownButton
+                header={translate("note.taskInstance")}
+                icon={<FiMessageSquare />}
+                isPending={isPending}
+                mdContent={note}
+                onConfirm={onConfirm}
+                placeholder={translate("note.placeholder")}
+                setMdContent={setNote}
+                text={translate("note.add")}
+                withText={containerWidth > 700}
+              />
+            )}
             <ClearTaskInstanceButton
               isHotkeyEnabled
               taskInstance={taskInstance}
@@ -123,6 +126,9 @@ export const Header = ({
         subTitle={<Time datetime={taskInstance.start_date} />}
         title={`${taskInstance.task_display_name}${taskInstance.map_index > -1 ? ` [${taskInstance.rendered_map_index ?? taskInstance.map_index}]` : ""}`}
       />
+      {Boolean(taskInstance.note) && (
+        <EditableMarkdownArea mdContent={note} onBlur={onConfirm} setMdContent={setNote} />
+      )}
     </Box>
   );
 };