This is an automated email from the ASF dual-hosted git repository.
guanmingchiu pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new efa434ec27c feat: add resize function to dag run / TI notes (#57897)
efa434ec27c is described below
commit efa434ec27cdc46b753fab316e3881830dd63d81
Author: LI,JHE-CHEN <[email protected]>
AuthorDate: Fri Nov 7 22:29:00 2025 -0500
feat: add resize function to dag run / TI notes (#57897)
* feat: add resize funtion to notes
* refactor: deduplicate markdown dialog storage key constant
---
.../ui/src/components/DisplayMarkdownButton.tsx | 5 +-
.../ui/src/components/EditableMarkdownArea.tsx | 7 +--
.../ui/src/components/EditableMarkdownButton.tsx | 56 ++++++++++++----------
.../ui/src/components/ui/ResizableWrapper.tsx | 2 +
4 files changed, 40 insertions(+), 30 deletions(-)
diff --git
a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
index 3eab57b6581..3cb73562994 100644
--- a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
@@ -20,11 +20,10 @@ import { Box, Heading, VStack } from "@chakra-ui/react";
import { type ReactElement, useState } from "react";
import { Button, Dialog } from "src/components/ui";
-import { ResizableWrapper } from "src/components/ui/ResizableWrapper";
+import { ResizableWrapper, MARKDOWN_DIALOG_STORAGE_KEY } from
"src/components/ui/ResizableWrapper";
import ReactMarkdown from "./ReactMarkdown";
-const STORAGE_KEY = "airflow-markdown-dialog-size";
const DisplayMarkdownButton = ({
header,
@@ -52,7 +51,7 @@ const DisplayMarkdownButton = ({
size="md"
>
<Dialog.Content backdrop maxHeight="none" maxWidth="none" padding={0}
width="auto">
- <ResizableWrapper storageKey={STORAGE_KEY}>
+ <ResizableWrapper storageKey={MARKDOWN_DIALOG_STORAGE_KEY}>
<Dialog.Header bg="brand.muted" flexShrink={0}>
<Heading size="xl">{header}</Heading>
<Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
diff --git
a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
index 1b8c3c7d649..5c24c5a9943 100644
--- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
+++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
@@ -43,7 +43,7 @@ const EditableMarkdownArea = ({
}
return (
- <Box mt={4} px={4} width="100%">
+ <Box p={4} width="100%" height="100%">
<Editable.Root
onBlur={onBlur}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
@@ -53,13 +53,14 @@ const EditableMarkdownArea = ({
setMdContent(value);
}}
value={currentValue}
+ height="100%"
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
- height="200px"
+ height="100%"
overflowY="auto"
width="100%"
>
@@ -71,7 +72,7 @@ const EditableMarkdownArea = ({
</Editable.Preview>
<Editable.Textarea
data-testid="markdown-input"
- height="200px"
+ height="100%"
overflowY="auto"
placeholder={placeholder ?? ""}
resize="none"
diff --git
a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
index 239720f61f2..3ac31c71d55 100644
--- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
@@ -22,10 +22,12 @@ import { useTranslation } from "react-i18next";
import { PiNoteBlankLight, PiNoteLight } from "react-icons/pi";
import { Button, Dialog } from "src/components/ui";
+import { ResizableWrapper, MARKDOWN_DIALOG_STORAGE_KEY } from
"src/components/ui/ResizableWrapper";
import EditableMarkdownArea from "./EditableMarkdownArea";
import ActionButton from "./ui/ActionButton";
+
const EditableMarkdownButton = ({
header,
isPending,
@@ -88,30 +90,36 @@ const EditableMarkdownButton = ({
size="md"
unmountOnExit={true}
>
- <Dialog.Content backdrop>
- <Dialog.Header bg="brand.muted">
- <Heading size="xl">{header}</Heading>
- <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
- </Dialog.Header>
- <Dialog.Body alignItems="flex-start" as={VStack} gap="0">
- <EditableMarkdownArea
- mdContent={mdContent}
- placeholder={placeholder}
- setMdContent={setMdContent}
- />
- <Flex justifyContent="end" mt={3} width="100%">
- <Button
- colorPalette="brand"
- loading={isPending}
- onClick={() => {
- onConfirm();
- setIsOpen(false);
- }}
- >
- {noteIcon} {translate("modal.confirm")}
- </Button>
- </Flex>
- </Dialog.Body>
+ <Dialog.Content backdrop maxHeight="90vh" maxWidth="90vw" padding={0}
width="auto">
+ <ResizableWrapper storageKey={MARKDOWN_DIALOG_STORAGE_KEY}>
+ <Dialog.Header bg="brand.muted" flexShrink={0}>
+ <Heading size="xl">{header}</Heading>
+ <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
+ </Dialog.Header>
+ <Dialog.Body alignItems="flex-start" as={VStack} flex="1" gap="0"
overflow="hidden" p={0}>
+ <Box flex="1" overflow="hidden" width="100%">
+ <EditableMarkdownArea
+ mdContent={mdContent}
+ placeholder={placeholder}
+ setMdContent={setMdContent}
+ />
+ </Box>
+ <Box bg="bg.panel" flexShrink={0} width="100%">
+ <Flex justifyContent="end" p={4}>
+ <Button
+ colorPalette="brand"
+ loading={isPending}
+ onClick={() => {
+ onConfirm();
+ setIsOpen(false);
+ }}
+ >
+ {noteIcon} {translate("modal.confirm")}
+ </Button>
+ </Flex>
+ </Box>
+ </Dialog.Body>
+ </ResizableWrapper>
</Dialog.Content>
</Dialog.Root>
</Box>
diff --git a/airflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
b/airflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
index d666f9aea9a..2dd40bb6fd3 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@@ -48,6 +48,8 @@ type ResizableWrapperProps = {
const DEFAULT_SIZE = { height: 400, width: 500 };
const MAX_SIZE: [number, number] = [1200, 800];
+export const MARKDOWN_DIALOG_STORAGE_KEY = "airflow-markdown-dialog-size";
+
export const ResizableWrapper = ({
children,
defaultSize = DEFAULT_SIZE,
