Add formatted extra to asset events

airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx

@@ -16,38 +16,34 @@
  * 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";
 
 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>
   );
 };

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"

airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx

@@ -47,7 +47,7 @@ const RenderedJsonField = ({ content, jsonProps, ...rest }: Props) => {
         {...jsonProps}
       />
       <ClipboardRoot value={contentFormatted}>
-        <ClipboardIconButton />
+        <ClipboardIconButton h={7} minW={7} />
       </ClipboardRoot>
     </Flex>
   );

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>