Enhance note button visibility with highlighting when notes exist

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

@@ -17,8 +17,9 @@
  * under the License.
  */
 import { Box, Heading, VStack, Flex } from "@chakra-ui/react";
-import { type ReactElement, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { PiNoteBlankLight, PiNoteLight } from "react-icons/pi";
 
 import { Button, Dialog } from "src/components/ui";
 
@@ -27,7 +28,6 @@ import ActionButton from "./ui/ActionButton";
 
 const EditableMarkdownButton = ({
   header,
-  icon,
   isPending,
   mdContent,
   onConfirm,
@@ -38,7 +38,6 @@ const EditableMarkdownButton = ({
   withText = true,
 }: {
   readonly header: string;
-  readonly icon: ReactElement;
   readonly isPending: boolean;
   readonly mdContent?: string | null;
   readonly onConfirm: () => void;
@@ -51,20 +50,36 @@ const EditableMarkdownButton = ({
   const { t: translate } = useTranslation("common");
   const [isOpen, setIsOpen] = useState(false);
 
+  const noteIcon = Boolean(mdContent?.trim()) ? <PiNoteLight /> : <PiNoteBlankLight />;
+
   return (
     <Box>
-      <ActionButton
-        actionName={placeholder}
-        icon={icon}
-        onClick={() => {
-          if (!isOpen) {
-            onOpen();
-          }
-          setIsOpen(true);
-        }}
-        text={text}
-        withText={withText}
-      />
+      <Box display="inline-block" position="relative">
+        <ActionButton
+          actionName={placeholder}
+          icon={noteIcon}
+          onClick={() => {
+            if (!isOpen) {
+              onOpen();
+            }
+            setIsOpen(true);
+          }}
+          text={text}
+          variant="outline"
+          withText={withText}
+        />
+        {Boolean(mdContent?.trim()) && (
+          <Box
+            bg="blue.500"
+            borderRadius="full"
+            height={2.5}
+            position="absolute"
+            right={-0.5}
+            top={-0.5}
+            width={2.5}
+          />
+        )}
+      </Box>
       <Dialog.Root
         data-testid="markdown-modal"
         lazyMount
@@ -93,7 +108,7 @@ const EditableMarkdownButton = ({
                   setIsOpen(false);
                 }}
               >
-                {icon} {translate("modal.confirm")}
+                {noteIcon} {translate("modal.confirm")}
               </Button>
             </Flex>
           </Dialog.Body>

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

@@ -19,7 +19,7 @@
 import { HStack, Text, Box } from "@chakra-ui/react";
 import { useCallback, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { FiBarChart, FiMessageSquare } from "react-icons/fi";
+import { FiBarChart } from "react-icons/fi";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { ClearRunButton } from "src/components/Clear";
@@ -43,6 +43,8 @@ export const Header = ({
   const { t: translate } = useTranslation();
   const [note, setNote] = useState<string | null>(dagRun.note);
 
+  const hasContent = Boolean(dagRun.note?.trim());
+
   const dagId = dagRun.dag_id;
   const dagRunId = dagRun.dag_run_id;
 
@@ -75,14 +77,13 @@ export const Header = ({
           <>
             <EditableMarkdownButton
               header={translate("note.dagRun")}
-              icon={<FiMessageSquare />}
               isPending={isPending}
-              mdContent={note}
+              mdContent={dagRun.note}
               onConfirm={onConfirm}
               onOpen={onOpen}
               placeholder={translate("note.placeholder")}
               setMdContent={setNote}
-              text={Boolean(dagRun.note) ? translate("note.label") : translate("note.add")}
+              text={hasContent ? translate("note.label") : translate("note.add")}
               withText={containerWidth > 700}
             />
             <ClearRunButton dagRun={dagRun} isHotkeyEnabled withText={containerWidth > 700} />

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

@@ -19,7 +19,6 @@
 import { Box } from "@chakra-ui/react";
 import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FiMessageSquare } from "react-icons/fi";
 import { MdOutlineTask } from "react-icons/md";
 
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
@@ -64,6 +63,8 @@ export const Header = ({
 
   const [note, setNote] = useState<string | null>(taskInstance.note);
 
+  const hasContent = Boolean(taskInstance.note?.trim());
+
   const dagId = taskInstance.dag_id;
   const dagRunId = taskInstance.dag_run_id;
   const taskId = taskInstance.task_id;
@@ -99,14 +100,13 @@ export const Header = ({
           <>
             <EditableMarkdownButton
               header={translate("note.taskInstance")}
-              icon={<FiMessageSquare />}
               isPending={isPending}
-              mdContent={note}
+              mdContent={taskInstance.note}
               onConfirm={onConfirm}
               onOpen={onOpen}
               placeholder={translate("note.placeholder")}
               setMdContent={setNote}
-              text={Boolean(taskInstance.note) ? translate("note.label") : translate("note.add")}
+              text={hasContent ? translate("note.label") : translate("note.add")}
               withText={containerWidth > 700}
             />
             <ClearTaskInstanceButton