This is an automated email from the ASF dual-hosted git repository.
choo121600 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 1a6bfd8753c Unify Dag Code tab toolbar with Logs toolbar style (#68449)
1a6bfd8753c is described below
commit 1a6bfd8753c6364751658dae8777b29c121dfc18
Author: Yeonguk Choo <[email protected]>
AuthorDate: Mon Jun 15 10:58:56 2026 +0900
Unify Dag Code tab toolbar with Logs toolbar style (#68449)
---
.../airflow/ui/public/i18n/locales/en/common.json | 3 +
.../src/airflow/ui/public/i18n/locales/en/dag.json | 4 --
.../airflow/ui/src/components/ui/LazyClipboard.tsx | 5 +-
.../src/airflow/ui/src/pages/Dag/Code/Code.tsx | 79 ++++++++++++----------
.../src/pages/TaskInstance/Logs/TaskLogHeader.tsx | 8 +--
5 files changed, 50 insertions(+), 49 deletions(-)
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
b/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
index cc27c1faf54..32f9988a239 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
@@ -145,6 +145,9 @@
"selectDateRange": "Select Date Range",
"startTime": "Start Time"
},
+ "fullscreen": {
+ "tooltip": "Press {{hotkey}} for fullscreen"
+ },
"generateToken": "Generate Token",
"key": "Key",
"logicalDate": "Logical Date",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
index fdb3e941a1a..b51add8d5ec 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
@@ -91,10 +91,6 @@
"critical": "CRITICAL",
"debug": "DEBUG",
"error": "ERROR",
- "fullscreen": {
- "button": "Full screen",
- "tooltip": "Press {{hotkey}} for fullscreen"
- },
"info": "INFO",
"noTryNumber": "No try number",
"search": {
diff --git a/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx
b/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx
index 07981e1fb4d..67a727ff136 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx
@@ -24,11 +24,12 @@ import { IconButton } from ".";
type LazyClipboardProps = {
readonly getValue: () => string;
+ readonly label?: string;
} & ButtonProps;
/** Clipboard button that lazily computes the value only when clicked */
export const LazyClipboard = React.forwardRef<HTMLButtonElement,
LazyClipboardProps>(
- ({ getValue, ...props }, ref) => {
+ ({ getValue, label, ...props }, ref) => {
const [copied, setCopied] = React.useState(false);
const handleClick = () => {
@@ -40,7 +41,7 @@ export const LazyClipboard =
React.forwardRef<HTMLButtonElement, LazyClipboardPr
};
return (
- <IconButton onClick={handleClick} ref={ref} size="xs" variant="subtle"
{...props}>
+ <IconButton label={label} onClick={handleClick} ref={ref} size="xs"
variant="subtle" {...props}>
{copied ? <LuCheck /> : <LuClipboard />}
</IconButton>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
index 1aed44b7ee7..65622d58239 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
@@ -20,7 +20,7 @@ import { Box, Button, Heading, HStack, Link, VStack } from
"@chakra-ui/react";
import { useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { useTranslation } from "react-i18next";
-import { MdOutlineOpenInFull } from "react-icons/md";
+import { MdOutlineDifference, MdOutlineOpenInFull, MdWrapText } from
"react-icons/md";
import { useParams } from "react-router-dom";
import {
@@ -35,7 +35,8 @@ import { DagVersionSelect } from
"src/components/DagVersionSelect";
import { ErrorAlert } from "src/components/ErrorAlert";
import Editor, { type EditorProps } from "src/components/MonacoEditor";
import Time from "src/components/Time";
-import { ClipboardRoot, ClipboardButton, Dialog, IconButton, Tooltip,
ProgressBar } from "src/components/ui";
+import { Dialog, IconButton, ProgressBar } from "src/components/ui";
+import { LazyClipboard } from "src/components/ui/LazyClipboard";
import { useMonacoTheme } from "src/context/colorMode";
import useSelectedVersion from "src/hooks/useSelectedVersion";
import { useConfig } from "src/queries/useConfig";
@@ -46,7 +47,7 @@ import { FileLocation } from "./FileLocation";
import { VersionCompareSelect } from "./VersionCompareSelect";
export const Code = () => {
- const { t: translate } = useTranslation(["dag", "common"]);
+ const { t: translate } = useTranslation(["dag", "common", "components"]);
const { dagId } = useParams();
const selectedVersion = useSelectedVersion();
@@ -202,6 +203,43 @@ export const Code = () => {
</Box>
);
+ const actionButtons = (
+ <HStack gap={1}>
+ <IconButton
+ aria-label={translate(`common:wrap.${wrap ? "un" : ""}wrap`)}
+ label={translate("common:wrap.tooltip", { hotkey: "w" })}
+ onClick={toggleWrap}
+ variant={wrap ? "solid" : "ghost"}
+ >
+ <MdWrapText />
+ </IconButton>
+ {hasMultipleVersions ? (
+ <IconButton
+ aria-label={translate("common:diff")}
+ label={translate("common:diff")}
+ onClick={toggleCompareDropdown}
+ variant={isCompareDropdownOpen || isDiffMode ? "solid" : "ghost"}
+ >
+ <MdOutlineDifference />
+ </IconButton>
+ ) : undefined}
+ {isFullscreen ? undefined : (
+ <IconButton
+ label={translate("common:fullscreen.tooltip", { hotkey: "f" })}
+ onClick={toggleFullscreen}
+ >
+ <MdOutlineOpenInFull />
+ </IconButton>
+ )}
+ <LazyClipboard
+ getValue={() => code?.content ?? ""}
+ label={translate("components:clipboard.copy")}
+ size="md"
+ variant="ghost"
+ />
+ </HStack>
+ );
+
const codeHeader = (
<HStack justifyContent="space-between" mt={2}>
<HStack gap={5}>
@@ -239,40 +277,7 @@ export const Code = () => {
<VStack gap={2} position="relative">
<HStack flexWrap="wrap" gap={2}>
<DagVersionSelect showLabel={false} />
- <ClipboardRoot value={code?.content ?? ""}>
- <ClipboardButton />
- </ClipboardRoot>
- <Tooltip
- closeDelay={100}
- content={translate("common:wrap.tooltip", { hotkey: "w" })}
- openDelay={100}
- >
- <Button
- aria-label={translate(`common:wrap.${wrap ? "un" : ""}wrap`)}
- onClick={toggleWrap}
- variant="outline"
- >
- {translate(`common:wrap.${wrap ? "un" : ""}wrap`)}
- </Button>
- </Tooltip>
- {isFullscreen ? undefined : (
- <IconButton
- label={translate("logs.fullscreen.tooltip", { hotkey: "f" })}
- onClick={toggleFullscreen}
- variant="outline"
- >
- <MdOutlineOpenInFull />
- </IconButton>
- )}
- {hasMultipleVersions ? (
- <Button
- aria-label={translate("common:diff")}
- onClick={toggleCompareDropdown}
- variant={isCompareDropdownOpen ? "solid" : "outline"}
- >
- {translate("common:diff")}
- </Button>
- ) : undefined}
+ {actionButtons}
{isDiffMode ? (
<Button aria-label={translate("common:diffExit")}
onClick={exitDiffMode} variant="solid">
{translate("common:diffExit")}
diff --git
a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
index 8e50660314e..dc5992df507 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
@@ -234,19 +234,15 @@ export const TaskLogHeader = ({
</Menu.Content>
</Menu.Root>
{!isFullscreen && (
- <IconButton
- label={translate("dag:logs.fullscreen.tooltip", { hotkey: "f" })}
- onClick={toggleFullscreen}
- >
+ <IconButton label={translate("fullscreen.tooltip", { hotkey: "f"
})} onClick={toggleFullscreen}>
<MdOutlineOpenInFull />
</IconButton>
)}
<LazyClipboard
- aria-label={translate("components:clipboard.copy")}
getValue={getLogString}
+ label={translate("components:clipboard.copy")}
size="md"
- title={translate("components:clipboard.copy")}
variant="ghost"
/>
