AIP-38 TI and DagRun note rendering in headers (apache#45829)

aws-mwaa · Jan 21, 2025 · 8fc7721 · 8fc7721
1 parent 8c93a25
commit 8fc7721
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 37 deletions.
diff --git a/.../ui/src/components/DocumentationModal.tsx → .../src/components/DisplayMarkdownButton.tsx b/.../ui/src/components/DocumentationModal.tsx → .../src/components/DisplayMarkdownButton.tsx
@@ -16,36 +16,45 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading } from "@chakra-ui/react";
-import { useState } from "react";
-import { FiBookOpen } from "react-icons/fi";
+import { Box, Heading, VStack } from "@chakra-ui/react";
+import { type ReactElement, useState } from "react";
 
 import { Button, Dialog } from "src/components/ui";
 
 import ReactMarkdown from "./ReactMarkdown";
 
-const DocumentationModal = ({ docMd, docType }: { readonly docMd: string; readonly docType: string }) => {
+const DisplayMarkdownButton = ({
+  header,
+  icon,
+  mdContent,
+  text,
+}: {
+  readonly header: string;
+  readonly icon?: ReactElement;
+  readonly mdContent: string;
+  readonly text: string;
+}) => {
   const [isDocsOpen, setIsDocsOpen] = useState(false);
 
   return (
     <Box>
       <Button onClick={() => setIsDocsOpen(true)} variant="outline">
-        <FiBookOpen height={5} width={5} />
-        {docType} Docs
+        {icon}
+        {text}
       </Button>
       <Dialog.Root onOpenChange={() => setIsDocsOpen(false)} open={isDocsOpen} size="md">
         <Dialog.Content backdrop>
           <Dialog.Header bg="blue.muted">
-            <Heading size="xl">{docType} Documentation</Heading>
+            <Heading size="xl">{header}</Heading>
             <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
           </Dialog.Header>
-          <Dialog.Body display="flex">
-            <ReactMarkdown>{docMd}</ReactMarkdown>
+          <Dialog.Body alignItems="flex-start" as={VStack} gap="0">
+            <ReactMarkdown>{mdContent}</ReactMarkdown>
           </Dialog.Body>
         </Dialog.Content>
       </Dialog.Root>
     </Box>
   );
 };
 
-export default DocumentationModal;
+export default DisplayMarkdownButton;
diff --git a/airflow/ui/src/pages/Dag/Header.tsx b/airflow/ui/src/pages/Dag/Header.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
-import { FiCalendar } from "react-icons/fi";
+import { FiBookOpen, FiCalendar } from "react-icons/fi";
 
 import type { DAGDetailsResponse, DAGRunResponse } from "openapi/requests/types.gen";
 import { DagIcon } from "src/assets/DagIcon";
 import DagRunInfo from "src/components/DagRunInfo";
-import DocumentationModal from "src/components/DocumentationModal";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
 import ParseDag from "src/components/ParseDag";
 import { Stat } from "src/components/Stat";
 import { TogglePause } from "src/components/TogglePause";
@@ -53,7 +53,14 @@ export const Header = ({
         <Flex>
           {dag ? (
             <HStack>
-              {dag.doc_md === null ? undefined : <DocumentationModal docMd={dag.doc_md} docType="Dag" />}
+              {dag.doc_md === null ? undefined : (
+                <DisplayMarkdownButton
+                  header="Dag Documentation"
+                  icon={<FiBookOpen />}
+                  mdContent={dag.doc_md}
+                  text="Dag Docs"
+                />
+              )}
               <ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
               <TriggerDAGButton dag={dag} />
             </HStack>

diff --git a/airflow/ui/src/pages/Run/Header.tsx b/airflow/ui/src/pages/Run/Header.tsx
@@ -17,11 +17,11 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
-import { FiBarChart } from "react-icons/fi";
-import { MdOutlineModeComment } from "react-icons/md";
+import { FiBarChart, FiMessageSquare } from "react-icons/fi";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { ClearRunButton } from "src/components/Clear";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
 import { RunTypeIcon } from "src/components/RunTypeIcon";
 import { Stat } from "src/components/Stat";
 import Time from "src/components/Time";
@@ -42,16 +42,18 @@ export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => (
           <div />
         </Flex>
       </HStack>
-      <ClearRunButton dagRun={dagRun} />
+      <HStack>
+        {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
+          <DisplayMarkdownButton
+            header="Dag Run Note"
+            icon={<FiMessageSquare color="black" />}
+            mdContent={dagRun.note}
+            text="Note"
+          />
+        )}
+        <ClearRunButton dagRun={dagRun} />
+      </HStack>
     </Flex>
-    {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
-      <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
-        <MdOutlineModeComment size="3rem" />
-        <Text fontSize="sm" ml={3}>
-          {dagRun.note}
-        </Text>
-      </Flex>
-    )}
     <SimpleGrid columns={4} gap={4}>
       <Stat label="Run Type">
         <HStack>

diff --git a/airflow/ui/src/pages/Task/Header.tsx b/airflow/ui/src/pages/Task/Header.tsx
@@ -17,10 +17,11 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
+import { FiBookOpen } from "react-icons/fi";
 
 import type { TaskResponse } from "openapi/requests/types.gen";
 import { TaskIcon } from "src/assets/TaskIcon";
-import DocumentationModal from "src/components/DocumentationModal";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
 import { Stat } from "src/components/Stat";
 
 export const Header = ({ task }: { readonly task: TaskResponse }) => (
@@ -37,7 +38,14 @@ export const Header = ({ task }: { readonly task: TaskResponse }) => (
           <div />
         </Flex>
       </HStack>
-      {task.doc_md === null ? undefined : <DocumentationModal docMd={task.doc_md} docType="Task" />}
+      {task.doc_md === null ? undefined : (
+        <DisplayMarkdownButton
+          header="Task Documentation"
+          icon={<FiBookOpen />}
+          mdContent={task.doc_md}
+          text="Task Docs"
+        />
+      )}
     </Flex>
     <SimpleGrid columns={4} gap={4}>
       <Stat label="Operator">

diff --git a/airflow/ui/src/pages/TaskInstance/Header.tsx b/airflow/ui/src/pages/TaskInstance/Header.tsx
@@ -16,11 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
-import { MdOutlineModeComment, MdOutlineTask } from "react-icons/md";
+import { Box, Flex, Heading, HStack, SimpleGrid } from "@chakra-ui/react";
+import { FiMessageSquare } from "react-icons/fi";
+import { MdOutlineTask } from "react-icons/md";
 
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ClearTaskInstanceButton } from "src/components/Clear";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
 import { Stat } from "src/components/Stat";
 import Time from "src/components/Time";
 import { Status } from "src/components/ui";
@@ -40,16 +42,18 @@ export const Header = ({ taskInstance }: { readonly taskInstance: TaskInstanceRe
           <div />
         </Flex>
       </HStack>
-      <ClearTaskInstanceButton taskInstance={taskInstance} />
+      <HStack>
+        {taskInstance.note === null || taskInstance.note.length === 0 ? undefined : (
+          <DisplayMarkdownButton
+            header="Task Instance Note"
+            icon={<FiMessageSquare color="black" />}
+            mdContent={taskInstance.note}
+            text="Note"
+          />
+        )}
+        <ClearTaskInstanceButton taskInstance={taskInstance} />
+      </HStack>
     </Flex>
-    {taskInstance.note === null || taskInstance.note.length === 0 ? undefined : (
-      <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
-        <MdOutlineModeComment size="3rem" />
-        <Text fontSize="sm" ml={3}>
-          {taskInstance.note}
-        </Text>
-      </Flex>
-    )}
     <SimpleGrid columns={6} gap={4} my={2}>
       <Stat label="Operator">{taskInstance.operator}</Stat>
       {taskInstance.map_index > -1 ? (