From eded21afe0a1eb1d66981ceebcc6b6f8895df01e Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Fri, 2 May 2025 12:07:02 -0400
Subject: [PATCH 1/2] Always show asset event extra, as json

---
 .../ui/src/components/Assets/AssetEvent.tsx    | 18 ++++++++----------
 .../ui/src/components/Assets/AssetEvents.tsx   |  8 +++-----
 .../ui/src/components/RenderedJsonField.tsx    |  8 +++++---
 .../src/airflow/ui/src/pages/Asset/Asset.tsx   |  1 -
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
index 6c97c648de5a7..1cb0817964e28 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Text, HStack, Code } from "@chakra-ui/react";
+import { Box, Text, HStack } from "@chakra-ui/react";
 import { FiDatabase } from "react-icons/fi";
 import { Link } from "react-router-dom";
 
@@ -24,30 +24,26 @@ import type { AssetEventResponse } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
 import { Tooltip } from "src/components/ui";
 
+import RenderedJsonField from "../RenderedJsonField";
 import { TriggeredRuns } from "./TriggeredRuns";
 
 export const AssetEvent = ({
   assetId,
   event,
-  showExtra,
 }: {
   readonly assetId?: number;
   readonly event: AssetEventResponse;
-  readonly showExtra?: boolean;
 }) => {
   let source = "";
 
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { from_rest_api, from_trigger, ...extra } = event.extra ?? {};
+  const { from_rest_api: fromRestAPI, from_trigger: fromTrigger, ...extra } = event.extra ?? {};
 
-  if (from_rest_api === true) {
+  if (fromRestAPI === true) {
     source = "API";
-  } else if (from_trigger === true) {
+  } else if (fromTrigger === true) {
     source = "Trigger";
   }
 
-  const extraString = JSON.stringify(extra);
-
   return (
     <Box borderBottomWidth={1} fontSize={13} mt={1} p={2}>
       <Text fontWeight="bold">
@@ -86,7 +82,9 @@ export const AssetEvent = ({
       <HStack>
         <TriggeredRuns dagRuns={event.created_dagruns} />
       </HStack>
-      {showExtra && extraString !== "{}" ? <Code>{extraString}</Code> : undefined}
+      {Object.keys(extra).length >= 1 ? (
+        <RenderedJsonField content={extra} jsonProps={{ collapsed: true }} />
+      ) : undefined}
     </Box>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
index f06f55185c917..4becd16cc9544 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
@@ -29,8 +29,8 @@ import { DataTable } from "../DataTable";
 import type { CardDef, TableState } from "../DataTable/types";
 import { AssetEvent } from "./AssetEvent";
 
-const cardDef = (assetId?: number, showExtra?: boolean): CardDef<AssetEventResponse> => ({
-  card: ({ row }) => <AssetEvent assetId={assetId} event={row} showExtra={showExtra} />,
+const cardDef = (assetId?: number): CardDef<AssetEventResponse> => ({
+  card: ({ row }) => <AssetEvent assetId={assetId} event={row} />,
   meta: {
     customSkeleton: <Skeleton height="120px" width="100%" />,
   },
@@ -42,7 +42,6 @@ type AssetEventProps = {
   readonly isLoading?: boolean;
   readonly setOrderBy?: (order: string) => void;
   readonly setTableUrlState?: (state: TableState) => void;
-  readonly showExtra?: boolean;
   readonly tableUrlState?: TableState;
   readonly title?: string;
 };
@@ -53,7 +52,6 @@ export const AssetEvents = ({
   isLoading,
   setOrderBy,
   setTableUrlState,
-  showExtra,
   tableUrlState,
   title,
 }: AssetEventProps) => {
@@ -100,7 +98,7 @@ export const AssetEvents = ({
         )}
       </Flex>
       <DataTable
-        cardDef={cardDef(assetId, showExtra)}
+        cardDef={cardDef(assetId)}
         columns={[]}
         data={data?.asset_events ?? []}
         displayMode="card"
diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
index 132a57116a6ce..66f5c951790f8 100644
--- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
+++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
@@ -46,9 +46,11 @@ const RenderedJsonField = ({ content, jsonProps, ...rest }: Props) => {
         theme={theme === "dark" ? "monokai" : "rjv-default"}
         {...jsonProps}
       />
-      <ClipboardRoot value={contentFormatted}>
-        <ClipboardIconButton />
-      </ClipboardRoot>
+      {jsonProps?.collapsed === true ? undefined : (
+        <ClipboardRoot value={contentFormatted}>
+          <ClipboardIconButton />
+        </ClipboardRoot>
+      )}
     </Flex>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx b/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx
index 9f8ff4555043f..0a961d19d2c58 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx
@@ -109,7 +109,6 @@ export const Asset = () => {
                 isLoading={isLoadingEvents}
                 setOrderBy={setOrderBy}
                 setTableUrlState={setTableURLState}
-                showExtra
                 tableUrlState={tableURLState}
               />
             </Box>

From 92c97383089ca6f0b59b25ba9d8ed28a5123341f Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Fri, 2 May 2025 12:13:35 -0400
Subject: [PATCH 2/2] Change clipboard icon size

---
 .../src/airflow/ui/src/components/RenderedJsonField.tsx   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
index 66f5c951790f8..5e32d8c67d7a9 100644
--- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
+++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
@@ -46,11 +46,9 @@ const RenderedJsonField = ({ content, jsonProps, ...rest }: Props) => {
         theme={theme === "dark" ? "monokai" : "rjv-default"}
         {...jsonProps}
       />
-      {jsonProps?.collapsed === true ? undefined : (
-        <ClipboardRoot value={contentFormatted}>
-          <ClipboardIconButton />
-        </ClipboardRoot>
-      )}
+      <ClipboardRoot value={contentFormatted}>
+        <ClipboardIconButton h={7} minW={7} />
+      </ClipboardRoot>
     </Flex>
   );
 };