(airflow) branch main updated: feat: add color support for XCom json (#51323)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi 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 6846a480a79 feat: add color support for XCom json (#51323)
6846a480a79 is described below

commit 6846a480a79ba978e7755366e658e96a683a48b8
Author: Zhen-Lun (Kevin) Hong <zhenlun.hon...@gmail.com>
AuthorDate: Thu Jun 5 01:35:19 2025 +0800

    feat: add color support for XCom json (#51323)
---
 .../airflow/ui/src/components/RenderedJsonField.tsx  | 11 +++++++----
 .../src/airflow/ui/src/pages/XCom/XComEntry.tsx      | 20 +++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx 
b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
index 5e32d8c67d7..60d2e166f1f 100644
--- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
+++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
@@ -24,10 +24,11 @@ import { ClipboardRoot, ClipboardIconButton } from 
"src/components/ui";
 
 type Props = {
   readonly content: object;
+  readonly enableClipboard?: boolean;
   readonly jsonProps?: Omit<ReactJsonViewProps, "src">;
 } & FlexProps;
 
-const RenderedJsonField = ({ content, jsonProps, ...rest }: Props) => {
+const RenderedJsonField = ({ content, enableClipboard = true, jsonProps, 
...rest }: Props) => {
   const contentFormatted = JSON.stringify(content, undefined, 4);
   const { theme } = useTheme();
 
@@ -46,9 +47,11 @@ const RenderedJsonField = ({ content, jsonProps, ...rest }: 
Props) => {
         theme={theme === "dark" ? "monokai" : "rjv-default"}
         {...jsonProps}
       />
-      <ClipboardRoot value={contentFormatted}>
-        <ClipboardIconButton h={7} minW={7} />
-      </ClipboardRoot>
+      {enableClipboard ? (
+        <ClipboardRoot value={contentFormatted}>
+          <ClipboardIconButton h={7} minW={7} />
+        </ClipboardRoot>
+      ) : undefined}
     </Flex>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/XCom/XComEntry.tsx 
b/airflow-core/src/airflow/ui/src/pages/XCom/XComEntry.tsx
index 342a0a4e909..b288937150e 100644
--- a/airflow-core/src/airflow/ui/src/pages/XCom/XComEntry.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/XCom/XComEntry.tsx
@@ -19,7 +19,8 @@
 import { Skeleton, HStack, Text } from "@chakra-ui/react";
 
 import { useXcomServiceGetXcomEntry } from "openapi/queries";
-import type { XComResponseString } from "openapi/requests/types.gen";
+import type { XComResponseNative } from "openapi/requests/types.gen";
+import RenderedJsonField from "src/components/RenderedJsonField";
 import { ClipboardIconButton, ClipboardRoot } from "src/components/ui";
 
 type XComEntryProps = {
@@ -31,14 +32,15 @@ type XComEntryProps = {
 };
 
 export const XComEntry = ({ dagId, mapIndex, runId, taskId, xcomKey }: 
XComEntryProps) => {
-  const { data, isLoading } = useXcomServiceGetXcomEntry<XComResponseString>({
+  const { data, isLoading } = useXcomServiceGetXcomEntry<XComResponseNative>({
     dagId,
     dagRunId: runId,
     mapIndex,
-    stringify: true,
+    stringify: false,
     taskId,
     xcomKey,
   });
+  const valueFormatted = JSON.stringify(data?.value, undefined, 4);
 
   return isLoading ? (
     <Skeleton
@@ -47,14 +49,18 @@ export const XComEntry = ({ dagId, mapIndex, runId, taskId, 
xcomKey }: XComEntry
       height="10px"
       width={200} // TODO: Make Skeleton take style from column definition
     />
-  ) : (data?.value?.length ?? 0) > 0 ? (
+  ) : (
     <HStack>
-      <Text>{data?.value}</Text>
       {Boolean(data?.value) ? (
-        <ClipboardRoot value={data?.value ?? ""}>
+        <ClipboardRoot value={valueFormatted}>
           <ClipboardIconButton />
         </ClipboardRoot>
       ) : undefined}
+      {["array", "object"].includes(typeof data?.value) ? (
+        <RenderedJsonField content={data?.value as object} 
enableClipboard={false} />
+      ) : (
+        <Text>{valueFormatted}</Text>
+      )}
     </HStack>
-  ) : undefined;
+  );
 };