Skip to content

Add resize function for Dag Documentation #56344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 16, 2025
Merged

Add resize function for Dag Documentation #56344

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6f2b6f5
feat: Add dialog resize function
RoyLee1224 Oct 2, 2025
381b515
Merge branch 'main' into doc-resize
RoyLee1224 Oct 2, 2025
32c9d54
feat: Memorize resize state
RoyLee1224 Oct 2, 2025
948a645
refactor: replace inline style and use useLocalStorage
RoyLee1224 Oct 3, 2025
47dcc9f
fix: remove redundent style
RoyLee1224 Oct 3, 2025
e85f4cb
refactor: optimize state management
RoyLee1224 Oct 3, 2025
ea94f96
Merge branch 'main' into doc-resize
RoyLee1224 Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions airflow-core/src/airflow/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@tanstack/react-table": "^8.21.3",
"@tanstack/react-virtual": "^3.13.8",
"@types/debounce-promise": "^3.1.9",
"@types/react-resizable": "^3.0.8",
"@uiw/codemirror-themes-all": "^4.23.12",
"@uiw/react-codemirror": "^4.23.12",
"@visx/group": "^3.12.0",
Expand Down Expand Up @@ -56,6 +57,7 @@
"react-innertext": "^1.1.5",
"react-json-view": "^1.21.3",
"react-markdown": "^9.1.0",
"react-resizable": "^3.0.5",
"react-resizable-panels": "^2.1.7",
"react-router-dom": "^6.30.0",
"react-syntax-highlighter": "^15.6.1",
Expand Down
45 changes: 45 additions & 0 deletions airflow-core/src/airflow/ui/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 44 additions & 8 deletions airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
*/
import { Box, Heading, VStack } from "@chakra-ui/react";
import { type ReactElement, useState } from "react";
import { ResizableBox } from "react-resizable";
import "react-resizable/css/styles.css";

import { Button, Dialog } from "src/components/ui";

Expand Down Expand Up @@ -48,14 +50,48 @@ const DisplayMarkdownButton = ({
open={isDocsOpen}
size="md"
>
<Dialog.Content backdrop>
<Dialog.Header bg="info.muted">
<Heading size="xl">{header}</Heading>
<Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
</Dialog.Header>
<Dialog.Body alignItems="flex-start" as={VStack} gap="0">
<ReactMarkdown>{mdContent}</ReactMarkdown>
</Dialog.Body>
<Dialog.Content
backdrop
style={{
maxHeight: "none",
maxWidth: "none",
padding: 0,
width: "auto",
}}
>
<ResizableBox
height={600}
maxConstraints={[1200, 800]}
minConstraints={[512, 600]}
resizeHandles={["se"]}
style={{
backgroundColor: "inherit",
borderRadius: "inherit",
overflow: "hidden",
position: "relative",
}}
width={512}
>
<style>
{`
.react-resizable-handle-se {
width: 20px !important;
height: 20px !important;
bottom: 0 !important;
right: 0 !important;
background: linear-gradient(-45deg, transparent 6px, #ccc 6px, #ccc 8px, transparent 8px, transparent 12px, #ccc 12px, #ccc 14px, transparent 14px) !important;
cursor: se-resize !important;
}
`}
</style>
<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="auto">
<ReactMarkdown>{mdContent}</ReactMarkdown>
</Dialog.Body>
</ResizableBox>
</Dialog.Content>
</Dialog.Root>
</Box>
Expand Down
Loading