This is an automated email from the ASF dual-hosted git repository.
guanmingchiu pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new 82a9d53c993 [v3-1-test] feat: add resize function to dag run / TI
notes (#57897) (#58068)
82a9d53c993 is described below
commit 82a9d53c993f2a5223e5be973539353fcb7c6761
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Mon Nov 10 14:55:56 2025 +0800
[v3-1-test] feat: add resize function to dag run / TI notes (#57897)
(#58068)
* [v3-1-test] feat: add resize function to dag run / TI notes (#57897)
* feat: add resize funtion to notes
* refactor: deduplicate markdown dialog storage key constant
(cherry picked from commit efa434ec27cdc46b753fab316e3881830dd63d81)
Co-authored-by: LI,JHE-CHEN <[email protected]>
* Fix static checks
---------
Co-authored-by: LI,JHE-CHEN <[email protected]>
Co-authored-by: Guan-Ming (Wesley) Chiu
<[email protected]>
---
.../ui/src/components/DisplayMarkdownButton.tsx | 6 +--
.../ui/src/components/EditableMarkdownArea.tsx | 7 +--
.../ui/src/components/EditableMarkdownButton.tsx | 55 ++++++++++++----------
.../ui/src/components/ui/ResizableWrapper.tsx | 2 +
4 files changed, 39 insertions(+), 31 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..2ca528c9e15 100644
--- a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
@@ -20,12 +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,
icon,
@@ -52,7 +50,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..3b467734a09 100644
--- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
+++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
@@ -43,8 +43,9 @@ const EditableMarkdownArea = ({
}
return (
- <Box mt={4} px={4} width="100%">
+ <Box height="100%" p={4} width="100%">
<Editable.Root
+ height="100%"
onBlur={onBlur}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
@@ -59,7 +60,7 @@ const EditableMarkdownArea = ({
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..3b07c7edc7b 100644
--- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx
@@ -22,6 +22,7 @@ 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";
@@ -88,30 +89,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,
