From d3e40c07dce0fdcccadeabfa980bb5c989d9c47c Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Thu, 12 Dec 2024 14:45:47 +0530
Subject: [PATCH 1/6] Add support for XCom tab in Task Instance detail page.

---
 airflow/ui/src/components/ui/clipboard.tsx    | 112 ++++++++++++++++++
 .../ui/src/pages/TaskInstance/XCom/XCom.tsx   |  88 ++++++++++++++
 .../src/pages/TaskInstance/XCom/XComEntry.tsx |  69 +++++++++++
 .../ui/src/pages/TaskInstance/XCom/index.ts   |  20 ++++
 airflow/ui/src/router.tsx                     |   3 +-
 5 files changed, 291 insertions(+), 1 deletion(-)
 create mode 100644 airflow/ui/src/components/ui/clipboard.tsx
 create mode 100644 airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
 create mode 100644 airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx
 create mode 100644 airflow/ui/src/pages/TaskInstance/XCom/index.ts

diff --git a/airflow/ui/src/components/ui/clipboard.tsx b/airflow/ui/src/components/ui/clipboard.tsx
new file mode 100644
index 0000000000000..639d437200bb9
--- /dev/null
+++ b/airflow/ui/src/components/ui/clipboard.tsx
@@ -0,0 +1,112 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { ButtonProps, InputProps } from "@chakra-ui/react";
+import {
+  Button,
+  Clipboard as ChakraClipboard,
+  IconButton,
+  Input,
+} from "@chakra-ui/react";
+import * as React from "react";
+import { LuCheck, LuClipboard, LuLink } from "react-icons/lu";
+
+const ClipboardIcon = React.forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>((props, ref) => (
+  <ChakraClipboard.Indicator copied={<LuCheck />} {...props} ref={ref}>
+    <LuClipboard />
+  </ChakraClipboard.Indicator>
+));
+
+const ClipboardCopyText = React.forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>((props, ref) => (
+  <ChakraClipboard.Indicator copied="Copied" {...props} ref={ref}>
+    Copy
+  </ChakraClipboard.Indicator>
+));
+
+export const ClipboardLabel = React.forwardRef<
+  HTMLLabelElement,
+  ChakraClipboard.LabelProps
+>((props, ref) => (
+  <ChakraClipboard.Label
+    display="inline-block"
+    fontWeight="medium"
+    mb="1"
+    textStyle="sm"
+    {...props}
+    ref={ref}
+  />
+));
+
+export const ClipboardButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => (
+    <ChakraClipboard.Trigger asChild>
+      <Button ref={ref} size="sm" variant="surface" {...props}>
+        <ClipboardIcon />
+        <ClipboardCopyText />
+      </Button>
+    </ChakraClipboard.Trigger>
+  ),
+);
+
+export const ClipboardLink = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => (
+    <ChakraClipboard.Trigger asChild>
+      <Button
+        alignItems="center"
+        display="inline-flex"
+        gap="2"
+        ref={ref}
+        size="xs"
+        unstyled
+        variant="plain"
+        {...props}
+      >
+        <LuLink />
+        <ClipboardCopyText />
+      </Button>
+    </ChakraClipboard.Trigger>
+  ),
+);
+
+export const ClipboardIconButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>((props, ref) => (
+  <ChakraClipboard.Trigger asChild>
+    <IconButton ref={ref} size="xs" variant="subtle" {...props}>
+      <ClipboardIcon />
+      <ClipboardCopyText srOnly />
+    </IconButton>
+  </ChakraClipboard.Trigger>
+));
+
+export const ClipboardInput = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => (
+    <ChakraClipboard.Input asChild>
+      <Input ref={ref} {...props} />
+    </ChakraClipboard.Input>
+  ),
+);
+
+export const ClipboardRoot = ChakraClipboard.Root;
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx b/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
new file mode 100644
index 0000000000000..9ec67cbe04819
--- /dev/null
+++ b/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
@@ -0,0 +1,88 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { useParams, useSearchParams } from "react-router-dom";
+
+import { useXcomServiceGetXcomEntries } from "openapi/queries";
+import type { XComResponse } from "openapi/requests/types.gen";
+import { DataTable } from "src/components/DataTable";
+import { ErrorAlert } from "src/components/ErrorAlert";
+
+import { XComEntry } from "./XComEntry";
+
+const XComColumn = ({
+  runId,
+}: {
+  runId: string;
+}): Array<ColumnDef<XComResponse>> => [
+  {
+    accessorKey: "key",
+    enableSorting: true,
+    header: "Key",
+    meta: {
+      skeletonWidth: 10,
+    },
+  },
+  {
+    cell: ({ row: { original } }) => (
+      <XComEntry
+        dagId={original.dag_id}
+        mapIndex={original.map_index}
+        runId={runId}
+        taskId={original.task_id}
+        xcomKey={original.key}
+      />
+    ),
+    header: "Value",
+    meta: {
+      skeletonWidth: 10,
+    },
+  },
+];
+
+export const XCom = () => {
+  const { dagId = "", runId = "", taskId = "" } = useParams();
+  const [searchParams] = useSearchParams();
+  const mapIndexParam = searchParams.get("map_index");
+  const mapIndex = parseInt(mapIndexParam ?? "-1", 10);
+
+  const { data, error, isFetching, isLoading } = useXcomServiceGetXcomEntries({
+    dagId,
+    dagRunId: runId,
+    mapIndex,
+    taskId,
+  });
+
+  return (
+    <Box>
+      <ErrorAlert error={error} />
+      <DataTable
+        columns={XComColumn({ runId })}
+        data={data ? data.xcom_entries : []}
+        displayMode="table"
+        isFetching={isFetching}
+        isLoading={isLoading}
+        modelName="XCom"
+        skeletonCount={undefined}
+        total={data ? data.total_entries : 0}
+      />
+    </Box>
+  );
+};
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx b/airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx
new file mode 100644
index 0000000000000..303a45fc92475
--- /dev/null
+++ b/airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx
@@ -0,0 +1,69 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Skeleton, HStack, Text } from "@chakra-ui/react";
+
+import { useXcomServiceGetXcomEntry } from "openapi/queries";
+import type { XComResponseString } from "openapi/requests/types.gen";
+import {
+  ClipboardIconButton,
+  ClipboardRoot,
+} from "src/components/ui/clipboard";
+
+type XComEntryProps = {
+  readonly dagId: string;
+  readonly mapIndex: number;
+  readonly runId: string;
+  readonly taskId: string;
+  readonly xcomKey: string;
+};
+
+export const XComEntry = ({
+  dagId,
+  mapIndex,
+  runId,
+  taskId,
+  xcomKey,
+}: XComEntryProps) => {
+  const { data, isLoading } = useXcomServiceGetXcomEntry<XComResponseString>({
+    dagId,
+    dagRunId: runId,
+    mapIndex,
+    stringify: true,
+    taskId,
+    xcomKey,
+  });
+
+  return isLoading ? (
+    <Skeleton
+      data-testid="skeleton"
+      display="inline-block"
+      height={4}
+      width={300}
+    />
+  ) : (data?.value?.length ?? 0) > 0 ? (
+    <HStack>
+      <Text>{data?.value}</Text>
+      {Boolean(data?.value) ? (
+        <ClipboardRoot value={data?.value ?? ""}>
+          <ClipboardIconButton />
+        </ClipboardRoot>
+      ) : undefined}
+    </HStack>
+  ) : undefined;
+};
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/index.ts b/airflow/ui/src/pages/TaskInstance/XCom/index.ts
new file mode 100644
index 0000000000000..1430290d8c56c
--- /dev/null
+++ b/airflow/ui/src/pages/TaskInstance/XCom/index.ts
@@ -0,0 +1,20 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { XCom } from "./XCom";
diff --git a/airflow/ui/src/router.tsx b/airflow/ui/src/router.tsx
index cd8da392dbc6f..679a98dc81749 100644
--- a/airflow/ui/src/router.tsx
+++ b/airflow/ui/src/router.tsx
@@ -32,6 +32,7 @@ import { Run } from "src/pages/Run";
 import { TaskInstances } from "src/pages/Run/TaskInstances";
 import { Task, Instances } from "src/pages/Task";
 import { TaskInstance } from "src/pages/TaskInstance";
+import { XCom } from "src/pages/TaskInstance/XCom";
 
 import { Variables } from "./pages/Variables";
 
@@ -79,7 +80,7 @@ export const router = createBrowserRouter(
           children: [
             { element: <div>Logs</div>, index: true },
             { element: <Events />, path: "events" },
-            { element: <div>Xcom</div>, path: "xcom" },
+            { element: <XCom />, path: "xcom" },
             { element: <Code />, path: "code" },
             { element: <div>Details</div>, path: "details" },
           ],

From 1549810a3231cddfa525d886fca18328c31b7e23 Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Thu, 12 Dec 2024 15:06:44 +0530
Subject: [PATCH 2/6] Add support for XCom page in browse section.

---
 .../api_fastapi/core_api/datamodels/xcom.py   |  1 +
 .../core_api/openapi/v1-generated.yaml        | 20 +++++++++++++++++-
 .../ui/openapi-gen/requests/schemas.gen.ts    | 17 ++++++++++++++-
 airflow/ui/openapi-gen/requests/types.gen.ts  |  3 +++
 airflow/ui/src/layouts/Nav/BrowseButton.tsx   |  4 ++++
 .../ui/src/pages/TaskInstance/XCom/XCom.tsx   | 21 +++++++++++--------
 airflow/ui/src/router.tsx                     |  4 ++++
 7 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/airflow/api_fastapi/core_api/datamodels/xcom.py b/airflow/api_fastapi/core_api/datamodels/xcom.py
index 4e3c6f54a7a4f..3a819b317d760 100644
--- a/airflow/api_fastapi/core_api/datamodels/xcom.py
+++ b/airflow/api_fastapi/core_api/datamodels/xcom.py
@@ -33,6 +33,7 @@ class XComResponse(BaseModel):
     map_index: int
     task_id: str
     dag_id: str
+    run_id: str
 
 
 class XComResponseNative(XComResponse):
diff --git a/airflow/api_fastapi/core_api/openapi/v1-generated.yaml b/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
index a36e45d4241a9..59480fd655df6 100644
--- a/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
+++ b/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
@@ -2222,6 +2222,8 @@ paths:
         in: path
         required: true
         schema:
+          enum:
+          - '~'
           const: '~'
           type: string
           title: Dag Id
@@ -5133,6 +5135,8 @@ paths:
         in: path
         required: true
         schema:
+          enum:
+          - '~'
           const: '~'
           type: string
           title: Dag Id
@@ -5140,6 +5144,8 @@ paths:
         in: path
         required: true
         schema:
+          enum:
+          - '~'
           const: '~'
           type: string
           title: Dag Run Id
@@ -9252,7 +9258,7 @@ components:
       properties:
         __type:
           type: string
-          title: Type
+          title: '  Type'
           default: TimeDelta
         days:
           type: integer
@@ -9481,6 +9487,9 @@ components:
         dag_id:
           type: string
           title: Dag Id
+        run_id:
+          type: string
+          title: Run Id
       type: object
       required:
       - key
@@ -9489,6 +9498,7 @@ components:
       - map_index
       - task_id
       - dag_id
+      - run_id
       title: XComResponse
       description: Serializer for a xcom item.
     XComResponseNative:
@@ -9513,6 +9523,9 @@ components:
         dag_id:
           type: string
           title: Dag Id
+        run_id:
+          type: string
+          title: Run Id
         value:
           title: Value
       type: object
@@ -9523,6 +9536,7 @@ components:
       - map_index
       - task_id
       - dag_id
+      - run_id
       - value
       title: XComResponseNative
       description: XCom response serializer with native return type.
@@ -9548,6 +9562,9 @@ components:
         dag_id:
           type: string
           title: Dag Id
+        run_id:
+          type: string
+          title: Run Id
         value:
           anyOf:
           - type: string
@@ -9561,6 +9578,7 @@ components:
       - map_index
       - task_id
       - dag_id
+      - run_id
       - value
       title: XComResponseString
       description: XCom response serializer with string return type.
diff --git a/airflow/ui/openapi-gen/requests/schemas.gen.ts b/airflow/ui/openapi-gen/requests/schemas.gen.ts
index 41e309d694c9b..0e4fccb9e8316 100644
--- a/airflow/ui/openapi-gen/requests/schemas.gen.ts
+++ b/airflow/ui/openapi-gen/requests/schemas.gen.ts
@@ -5039,7 +5039,7 @@ export const $TimeDelta = {
   properties: {
     __type: {
       type: "string",
-      title: "Type",
+      title: "  Type",
       default: "TimeDelta",
     },
     days: {
@@ -5380,6 +5380,10 @@ export const $XComResponse = {
       type: "string",
       title: "Dag Id",
     },
+    run_id: {
+      type: "string",
+      title: "Run Id",
+    },
   },
   type: "object",
   required: [
@@ -5389,6 +5393,7 @@ export const $XComResponse = {
     "map_index",
     "task_id",
     "dag_id",
+    "run_id",
   ],
   title: "XComResponse",
   description: "Serializer for a xcom item.",
@@ -5422,6 +5427,10 @@ export const $XComResponseNative = {
       type: "string",
       title: "Dag Id",
     },
+    run_id: {
+      type: "string",
+      title: "Run Id",
+    },
     value: {
       title: "Value",
     },
@@ -5434,6 +5443,7 @@ export const $XComResponseNative = {
     "map_index",
     "task_id",
     "dag_id",
+    "run_id",
     "value",
   ],
   title: "XComResponseNative",
@@ -5468,6 +5478,10 @@ export const $XComResponseString = {
       type: "string",
       title: "Dag Id",
     },
+    run_id: {
+      type: "string",
+      title: "Run Id",
+    },
     value: {
       anyOf: [
         {
@@ -5488,6 +5502,7 @@ export const $XComResponseString = {
     "map_index",
     "task_id",
     "dag_id",
+    "run_id",
     "value",
   ],
   title: "XComResponseString",
diff --git a/airflow/ui/openapi-gen/requests/types.gen.ts b/airflow/ui/openapi-gen/requests/types.gen.ts
index c178f78608e30..bac010ef3d28c 100644
--- a/airflow/ui/openapi-gen/requests/types.gen.ts
+++ b/airflow/ui/openapi-gen/requests/types.gen.ts
@@ -1286,6 +1286,7 @@ export type XComResponse = {
   map_index: number;
   task_id: string;
   dag_id: string;
+  run_id: string;
 };
 
 /**
@@ -1298,6 +1299,7 @@ export type XComResponseNative = {
   map_index: number;
   task_id: string;
   dag_id: string;
+  run_id: string;
   value: unknown;
 };
 
@@ -1311,6 +1313,7 @@ export type XComResponseString = {
   map_index: number;
   task_id: string;
   dag_id: string;
+  run_id: string;
   value: string | null;
 };
 
diff --git a/airflow/ui/src/layouts/Nav/BrowseButton.tsx b/airflow/ui/src/layouts/Nav/BrowseButton.tsx
index de58ecff2f3f2..3c50ed6b8a27b 100644
--- a/airflow/ui/src/layouts/Nav/BrowseButton.tsx
+++ b/airflow/ui/src/layouts/Nav/BrowseButton.tsx
@@ -28,6 +28,10 @@ const links = [
     href: "/events",
     title: "Events",
   },
+  {
+    href: "/xcoms",
+    title: "XComs",
+  },
 ];
 
 export const BrowseButton = () => (
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx b/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
index 9ec67cbe04819..40d3d2299f6e5 100644
--- a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
+++ b/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
@@ -23,18 +23,14 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { useXcomServiceGetXcomEntries } from "openapi/queries";
 import type { XComResponse } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
+import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
 
 import { XComEntry } from "./XComEntry";
 
-const XComColumn = ({
-  runId,
-}: {
-  runId: string;
-}): Array<ColumnDef<XComResponse>> => [
+const XComColumn = (): Array<ColumnDef<XComResponse>> => [
   {
     accessorKey: "key",
-    enableSorting: true,
     header: "Key",
     meta: {
       skeletonWidth: 10,
@@ -45,7 +41,7 @@ const XComColumn = ({
       <XComEntry
         dagId={original.dag_id}
         mapIndex={original.map_index}
-        runId={runId}
+        runId={original.run_id}
         taskId={original.task_id}
         xcomKey={original.key}
       />
@@ -58,15 +54,20 @@ const XComColumn = ({
 ];
 
 export const XCom = () => {
-  const { dagId = "", runId = "", taskId = "" } = useParams();
+  const { dagId = "~", runId = "~", taskId = "~" } = useParams();
   const [searchParams] = useSearchParams();
   const mapIndexParam = searchParams.get("map_index");
   const mapIndex = parseInt(mapIndexParam ?? "-1", 10);
 
+  const { setTableURLState, tableURLState } = useTableURLState();
+  const { pagination } = tableURLState;
+
   const { data, error, isFetching, isLoading } = useXcomServiceGetXcomEntries({
     dagId,
     dagRunId: runId,
+    limit: pagination.pageSize,
     mapIndex,
+    offset: pagination.pageIndex * pagination.pageSize,
     taskId,
   });
 
@@ -74,12 +75,14 @@ export const XCom = () => {
     <Box>
       <ErrorAlert error={error} />
       <DataTable
-        columns={XComColumn({ runId })}
+        columns={XComColumn()}
         data={data ? data.xcom_entries : []}
         displayMode="table"
+        initialState={tableURLState}
         isFetching={isFetching}
         isLoading={isLoading}
         modelName="XCom"
+        onStateChange={setTableURLState}
         skeletonCount={undefined}
         total={data ? data.total_entries : 0}
       />
diff --git a/airflow/ui/src/router.tsx b/airflow/ui/src/router.tsx
index 679a98dc81749..759dd7003dc5e 100644
--- a/airflow/ui/src/router.tsx
+++ b/airflow/ui/src/router.tsx
@@ -52,6 +52,10 @@ export const router = createBrowserRouter(
           element: <Events />,
           path: "events",
         },
+        {
+          element: <XCom />,
+          path: "xcoms",
+        },
         {
           element: <Variables />,
           path: "variables",

From 26591171b3b8685c2710220ab13e58b29a413348 Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Thu, 12 Dec 2024 15:12:03 +0530
Subject: [PATCH 3/6] Disable sorting since API doesn't support it.

---
 airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx b/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
index 40d3d2299f6e5..f95bf55e4f704 100644
--- a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
+++ b/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
@@ -31,6 +31,7 @@ import { XComEntry } from "./XComEntry";
 const XComColumn = (): Array<ColumnDef<XComResponse>> => [
   {
     accessorKey: "key",
+    enableSorting: false,
     header: "Key",
     meta: {
       skeletonWidth: 10,
@@ -46,6 +47,7 @@ const XComColumn = (): Array<ColumnDef<XComResponse>> => [
         xcomKey={original.key}
       />
     ),
+    enableSorting: false,
     header: "Value",
     meta: {
       skeletonWidth: 10,

From 4be21f5df4b00e282dbe04030412b9f10f15e9b5 Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Thu, 12 Dec 2024 16:28:26 +0530
Subject: [PATCH 4/6] Fix run_id in xcom tests.

---
 .../api_fastapi/core_api/routes/public/test_xcom.py  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/tests/api_fastapi/core_api/routes/public/test_xcom.py b/tests/api_fastapi/core_api/routes/public/test_xcom.py
index 022987125fb7a..b61b22a239898 100644
--- a/tests/api_fastapi/core_api/routes/public/test_xcom.py
+++ b/tests/api_fastapi/core_api/routes/public/test_xcom.py
@@ -118,6 +118,7 @@ def test_should_respond_200_stringify(self, test_client):
         assert current_data == {
             "dag_id": TEST_DAG_ID,
             "logical_date": logical_date_parsed.strftime("%Y-%m-%dT%H:%M:%SZ"),
+            "run_id": run_id,
             "key": TEST_XCOM_KEY,
             "task_id": TEST_TASK_ID,
             "map_index": -1,
@@ -136,6 +137,7 @@ def test_should_respond_200_native(self, test_client):
         assert current_data == {
             "dag_id": TEST_DAG_ID,
             "logical_date": logical_date_parsed.strftime("%Y-%m-%dT%H:%M:%SZ"),
+            "run_id": run_id,
             "key": TEST_XCOM_KEY,
             "task_id": TEST_TASK_ID,
             "map_index": -1,
@@ -230,6 +232,7 @@ def test_should_respond_200(self, test_client):
                 {
                     "dag_id": TEST_DAG_ID,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": f"{TEST_XCOM_KEY}-0",
                     "task_id": TEST_TASK_ID,
                     "timestamp": "TIMESTAMP",
@@ -238,6 +241,7 @@ def test_should_respond_200(self, test_client):
                 {
                     "dag_id": TEST_DAG_ID,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": f"{TEST_XCOM_KEY}-1",
                     "task_id": TEST_TASK_ID,
                     "timestamp": "TIMESTAMP",
@@ -263,6 +267,7 @@ def test_should_respond_200_with_tilde(self, test_client):
                 {
                     "dag_id": TEST_DAG_ID,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": f"{TEST_XCOM_KEY}-0",
                     "task_id": TEST_TASK_ID,
                     "timestamp": "TIMESTAMP",
@@ -271,6 +276,7 @@ def test_should_respond_200_with_tilde(self, test_client):
                 {
                     "dag_id": TEST_DAG_ID,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": f"{TEST_XCOM_KEY}-1",
                     "task_id": TEST_TASK_ID,
                     "timestamp": "TIMESTAMP",
@@ -279,6 +285,7 @@ def test_should_respond_200_with_tilde(self, test_client):
                 {
                     "dag_id": TEST_DAG_ID_2,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": f"{TEST_XCOM_KEY}-0",
                     "task_id": TEST_TASK_ID_2,
                     "timestamp": "TIMESTAMP",
@@ -287,6 +294,7 @@ def test_should_respond_200_with_tilde(self, test_client):
                 {
                     "dag_id": TEST_DAG_ID_2,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": f"{TEST_XCOM_KEY}-1",
                     "task_id": TEST_TASK_ID_2,
                     "timestamp": "TIMESTAMP",
@@ -313,6 +321,7 @@ def test_should_respond_200_with_map_index(self, map_index, test_client):
                 {
                     "dag_id": TEST_DAG_ID,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": TEST_XCOM_KEY,
                     "task_id": TEST_TASK_ID,
                     "timestamp": "TIMESTAMP",
@@ -325,6 +334,7 @@ def test_should_respond_200_with_map_index(self, map_index, test_client):
                 {
                     "dag_id": TEST_DAG_ID,
                     "logical_date": logical_date_formatted,
+                    "run_id": run_id,
                     "key": TEST_XCOM_KEY,
                     "task_id": TEST_TASK_ID,
                     "timestamp": "TIMESTAMP",
@@ -347,6 +357,7 @@ def test_should_respond_200_with_map_index(self, map_index, test_client):
                     {
                         "dag_id": TEST_DAG_ID,
                         "logical_date": logical_date_formatted,
+                        "run_id": run_id,
                         "key": TEST_XCOM_KEY,
                         "task_id": TEST_TASK_ID,
                         "timestamp": "TIMESTAMP",
@@ -355,6 +366,7 @@ def test_should_respond_200_with_map_index(self, map_index, test_client):
                     {
                         "dag_id": TEST_DAG_ID,
                         "logical_date": logical_date_formatted,
+                        "run_id": run_id,
                         "key": TEST_XCOM_KEY,
                         "task_id": TEST_TASK_ID,
                         "timestamp": "TIMESTAMP",

From 243752c4f570792f334db6a75b457b27060cf8c3 Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Thu, 12 Dec 2024 17:21:31 +0530
Subject: [PATCH 5/6] Fix generated files.

---
 airflow/api_fastapi/core_api/openapi/v1-generated.yaml | 8 +-------
 airflow/ui/openapi-gen/requests/schemas.gen.ts         | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/airflow/api_fastapi/core_api/openapi/v1-generated.yaml b/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
index 59480fd655df6..a10960a2c4634 100644
--- a/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
+++ b/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
@@ -2222,8 +2222,6 @@ paths:
         in: path
         required: true
         schema:
-          enum:
-          - '~'
           const: '~'
           type: string
           title: Dag Id
@@ -5135,8 +5133,6 @@ paths:
         in: path
         required: true
         schema:
-          enum:
-          - '~'
           const: '~'
           type: string
           title: Dag Id
@@ -5144,8 +5140,6 @@ paths:
         in: path
         required: true
         schema:
-          enum:
-          - '~'
           const: '~'
           type: string
           title: Dag Run Id
@@ -9258,7 +9252,7 @@ components:
       properties:
         __type:
           type: string
-          title: '  Type'
+          title: Type
           default: TimeDelta
         days:
           type: integer
diff --git a/airflow/ui/openapi-gen/requests/schemas.gen.ts b/airflow/ui/openapi-gen/requests/schemas.gen.ts
index 0e4fccb9e8316..c8bf77fde2328 100644
--- a/airflow/ui/openapi-gen/requests/schemas.gen.ts
+++ b/airflow/ui/openapi-gen/requests/schemas.gen.ts
@@ -5039,7 +5039,7 @@ export const $TimeDelta = {
   properties: {
     __type: {
       type: "string",
-      title: "  Type",
+      title: "Type",
       default: "TimeDelta",
     },
     days: {

From 20599c88b7ff15b7cf815810238db890fcfdbbcd Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Fri, 13 Dec 2024 11:58:49 +0530
Subject: [PATCH 6/6] Refactor XCom page and XCom columns.

---
 .../src/components/ui/{clipboard.tsx => Clipboard.tsx} |  0
 airflow/ui/src/components/ui/index.ts                  |  1 +
 airflow/ui/src/pages/{TaskInstance => }/XCom/XCom.tsx  | 10 ++--------
 .../ui/src/pages/{TaskInstance => }/XCom/XComEntry.tsx |  9 +++------
 airflow/ui/src/pages/{TaskInstance => }/XCom/index.ts  |  0
 airflow/ui/src/router.tsx                              |  2 +-
 6 files changed, 7 insertions(+), 15 deletions(-)
 rename airflow/ui/src/components/ui/{clipboard.tsx => Clipboard.tsx} (100%)
 rename airflow/ui/src/pages/{TaskInstance => }/XCom/XCom.tsx (93%)
 rename airflow/ui/src/pages/{TaskInstance => }/XCom/XComEntry.tsx (91%)
 rename airflow/ui/src/pages/{TaskInstance => }/XCom/index.ts (100%)

diff --git a/airflow/ui/src/components/ui/clipboard.tsx b/airflow/ui/src/components/ui/Clipboard.tsx
similarity index 100%
rename from airflow/ui/src/components/ui/clipboard.tsx
rename to airflow/ui/src/components/ui/Clipboard.tsx
diff --git a/airflow/ui/src/components/ui/index.ts b/airflow/ui/src/components/ui/index.ts
index add5c4b355038..950be1e910d73 100644
--- a/airflow/ui/src/components/ui/index.ts
+++ b/airflow/ui/src/components/ui/index.ts
@@ -35,3 +35,4 @@ export * from "./Status";
 export * from "./Button";
 export * from "./Toaster";
 export * from "./Breadcrumb";
+export * from "./Clipboard";
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx b/airflow/ui/src/pages/XCom/XCom.tsx
similarity index 93%
rename from airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
rename to airflow/ui/src/pages/XCom/XCom.tsx
index f95bf55e4f704..13fa99b1021d3 100644
--- a/airflow/ui/src/pages/TaskInstance/XCom/XCom.tsx
+++ b/airflow/ui/src/pages/XCom/XCom.tsx
@@ -28,14 +28,11 @@ import { ErrorAlert } from "src/components/ErrorAlert";
 
 import { XComEntry } from "./XComEntry";
 
-const XComColumn = (): Array<ColumnDef<XComResponse>> => [
+const columns: Array<ColumnDef<XComResponse>> = [
   {
     accessorKey: "key",
     enableSorting: false,
     header: "Key",
-    meta: {
-      skeletonWidth: 10,
-    },
   },
   {
     cell: ({ row: { original } }) => (
@@ -49,9 +46,6 @@ const XComColumn = (): Array<ColumnDef<XComResponse>> => [
     ),
     enableSorting: false,
     header: "Value",
-    meta: {
-      skeletonWidth: 10,
-    },
   },
 ];
 
@@ -77,7 +71,7 @@ export const XCom = () => {
     <Box>
       <ErrorAlert error={error} />
       <DataTable
-        columns={XComColumn()}
+        columns={columns}
         data={data ? data.xcom_entries : []}
         displayMode="table"
         initialState={tableURLState}
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx b/airflow/ui/src/pages/XCom/XComEntry.tsx
similarity index 91%
rename from airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx
rename to airflow/ui/src/pages/XCom/XComEntry.tsx
index 303a45fc92475..13247d284204a 100644
--- a/airflow/ui/src/pages/TaskInstance/XCom/XComEntry.tsx
+++ b/airflow/ui/src/pages/XCom/XComEntry.tsx
@@ -20,10 +20,7 @@ import { Skeleton, HStack, Text } from "@chakra-ui/react";
 
 import { useXcomServiceGetXcomEntry } from "openapi/queries";
 import type { XComResponseString } from "openapi/requests/types.gen";
-import {
-  ClipboardIconButton,
-  ClipboardRoot,
-} from "src/components/ui/clipboard";
+import { ClipboardIconButton, ClipboardRoot } from "src/components/ui";
 
 type XComEntryProps = {
   readonly dagId: string;
@@ -53,8 +50,8 @@ export const XComEntry = ({
     <Skeleton
       data-testid="skeleton"
       display="inline-block"
-      height={4}
-      width={300}
+      height="10px"
+      width={200} // TODO: Make Skeleton take style from column definition
     />
   ) : (data?.value?.length ?? 0) > 0 ? (
     <HStack>
diff --git a/airflow/ui/src/pages/TaskInstance/XCom/index.ts b/airflow/ui/src/pages/XCom/index.ts
similarity index 100%
rename from airflow/ui/src/pages/TaskInstance/XCom/index.ts
rename to airflow/ui/src/pages/XCom/index.ts
diff --git a/airflow/ui/src/router.tsx b/airflow/ui/src/router.tsx
index 759dd7003dc5e..d1f66c15e4cd6 100644
--- a/airflow/ui/src/router.tsx
+++ b/airflow/ui/src/router.tsx
@@ -32,7 +32,7 @@ import { Run } from "src/pages/Run";
 import { TaskInstances } from "src/pages/Run/TaskInstances";
 import { Task, Instances } from "src/pages/Task";
 import { TaskInstance } from "src/pages/TaskInstance";
-import { XCom } from "src/pages/TaskInstance/XCom";
+import { XCom } from "src/pages/XCom";
 
 import { Variables } from "./pages/Variables";