Refactor documentation modal component to use it for dag and task. (apache#44863)

* Refactor documentation modal component to use it for dag and task.

* Refactor to pass doc type directly instead of using a boolean.

Author: tirkarthi

airflow/ui/src/components/DagDocumentation.tsx airflow/ui/src/components/DocumentationModal.tsx

@@ -23,14 +23,20 @@ import Markdown from "react-markdown";
 
 import { Button, Dialog } from "src/components/ui";
 
-const DagDocumentation = ({ docMd }: { readonly docMd: string }) => {
+const DocumentationModal = ({
+  docMd,
+  docType,
+}: {
+  readonly docMd: string;
+  readonly docType: string;
+}) => {
   const [isDocsOpen, setIsDocsOpen] = useState(false);
 
   return (
     <Box>
       <Button onClick={() => setIsDocsOpen(true)} variant="outline">
         <FiBookOpen height={5} width={5} />
-        Dag Docs
+        {docType} Docs
       </Button>
       <Dialog.Root
         onOpenChange={() => setIsDocsOpen(false)}
@@ -39,7 +45,7 @@ const DagDocumentation = ({ docMd }: { readonly docMd: string }) => {
       >
         <Dialog.Content backdrop>
           <Dialog.Header bg="blue.muted">
-            <Heading size="xl">Dag Documentation</Heading>
+            <Heading size="xl">{docType} Documentation</Heading>
             <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
           </Dialog.Header>
           <Dialog.Body display="flex">
@@ -51,4 +57,4 @@ const DagDocumentation = ({ docMd }: { readonly docMd: string }) => {
   );
 };
 
-export default DagDocumentation;
+export default DocumentationModal;

airflow/ui/src/pages/Dag/Header.tsx

@@ -24,8 +24,8 @@ import type {
   DAGRunResponse,
 } from "openapi/requests/types.gen";
 import { DagIcon } from "src/assets/DagIcon";
-import DagDocumentation from "src/components/DagDocumentation";
 import DagRunInfo from "src/components/DagRunInfo";
+import DocumentationModal from "src/components/DocumentationModal";
 import ParseDag from "src/components/ParseDag";
 import { Stat } from "src/components/Stat";
 import { TogglePause } from "src/components/TogglePause";
@@ -61,7 +61,7 @@ export const Header = ({
           {dag ? (
             <HStack>
               {dag.doc_md === null ? undefined : (
-                <DagDocumentation docMd={dag.doc_md} />
+                <DocumentationModal docMd={dag.doc_md} docType="Dag" />
               )}
               <ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
               <TriggerDAGTextButton dag={dag} />

airflow/ui/src/pages/Task/Header.tsx

@@ -20,7 +20,7 @@ import { Box, Flex, Heading, HStack, SimpleGrid, Text } from "@chakra-ui/react";
 
 import type { TaskResponse } from "openapi/requests/types.gen";
 import { TaskIcon } from "src/assets/TaskIcon";
-import DagDocumentation from "src/components/DagDocumentation";
+import DocumentationModal from "src/components/DocumentationModal";
 import { Stat } from "src/components/Stat";
 
 export const Header = ({ task }: { readonly task: TaskResponse }) => (
@@ -38,7 +38,7 @@ export const Header = ({ task }: { readonly task: TaskResponse }) => (
         </Flex>
       </HStack>
       {task.doc_md === null ? undefined : (
-        <DagDocumentation docMd={task.doc_md} />
+        <DocumentationModal docMd={task.doc_md} docType="Task" />
       )}
     </Flex>
     <SimpleGrid columns={4} gap={4}>