[v3-1-test] Show asset extra in asset list (#59195)

airflow-core/src/airflow/ui/public/i18n/locales/en/assets.json

@@ -22,6 +22,7 @@
     },
     "title": "Create Asset Event for {{name}}"
   },
+  "extra": "Extra",
   "group": "Group",
   "lastAssetEvent": "Last Asset Event",
   "name": "Name",

airflow-core/src/airflow/ui/public/i18n/locales/en/browse.json

@@ -1,9 +1,5 @@
 {
   "auditLog": {
-    "actions": {
-      "collapseAllExtra": "Collapse all extra json",
-      "expandAllExtra": "Expand all extra json"
-    },
     "columns": {
       "event": "Event",
       "extra": "Extra",

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json

@@ -25,6 +25,7 @@
     "requiredActions": "Required Actions",
     "xcoms": "XComs"
   },
+  "collapseAllExtra": "Collapse all extra json",
   "collapseDetailsPanel": "Collapse Details Panel",
   "createdAssetEvent_one": "Created Asset Event",
   "createdAssetEvent_other": "Created Asset Events",
@@ -99,6 +100,7 @@
     "hotkey": "e",
     "tooltip": "Press {{hotkey}} to toggle expand"
   },
+  "expandAllExtra": "Expand all extra json",
   "expression": {
     "all": "All",
     "and": "AND",

airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, Link, VStack } from "@chakra-ui/react";
+import { Box, Flex, Heading, Link, useDisclosure, VStack } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,6 +27,8 @@ import type { AssetResponse } 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 { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
+import RenderedJsonField from "src/components/RenderedJsonField";
 import { SearchBar } from "src/components/SearchBar";
 import Time from "src/components/Time";
 import { SearchParamsKeys } from "src/constants/searchParams";
@@ -36,7 +38,10 @@ import { DependencyPopover } from "./DependencyPopover";
 
 type AssetRow = { row: { original: AssetResponse } };
 
-const createColumns = (translate: (key: string) => string): Array<ColumnDef<AssetResponse>> => [
+const createColumns = (
+  translate: (key: string) => string,
+  open?: boolean,
+): Array<ColumnDef<AssetResponse>> => [
   {
     accessorKey: "name",
     cell: ({ row: { original } }: AssetRow) => (
@@ -90,6 +95,21 @@ const createColumns = (translate: (key: string) => string): Array<ColumnDef<Asse
     enableSorting: false,
     header: "",
   },
+  {
+    accessorKey: "extra",
+    cell: ({ row: { original } }) => {
+      if (original.extra !== null) {
+        return <RenderedJsonField content={original.extra ?? {}} jsonProps={{ collapsed: !open }} />;
+      }
+
+      return undefined;
+    },
+    enableSorting: false,
+    header: translate("extra"),
+    meta: {
+      skeletonWidth: 200,
+    },
+  },
 ];
 
 const NAME_PATTERN_PARAM = SearchParamsKeys.NAME_PATTERN;
@@ -105,14 +125,16 @@ export const AssetsList = () => {
   const [sort] = sorting;
   const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : undefined;
 
+  const { onClose, onOpen, open } = useDisclosure();
+
   const { data, error, isLoading } = useAssetServiceGetAssets({
     limit: pagination.pageSize,
     namePattern,
     offset: pagination.pageIndex * pagination.pageSize,
     orderBy,
   });
 
-  const columns = useMemo(() => createColumns(translate), [translate]);
+  const columns = useMemo(() => createColumns(translate, open), [translate, open]);
 
   const handleSearchChange = (value: string) => {
     setTableURLState({
@@ -137,9 +159,18 @@ export const AssetsList = () => {
           placeHolder={translate("searchPlaceholder")}
         />
 
-        <Heading py={3} size="md">
-          {data?.total_entries} {translate("common:asset", { count: data?.total_entries })}
-        </Heading>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Heading py={3} size="md">
+            {data?.total_entries} {translate("common:asset", { count: data?.total_entries })}
+          </Heading>
+
+          <ExpandCollapseButtons
+            collapseLabel={translate("collapseAllExtra")}
+            expandLabel={translate("expandAllExtra")}
+            onCollapse={onClose}
+            onExpand={onOpen}
+          />
+        </Flex>
       </VStack>
       <Box overflow="auto">
         <DataTable

airflow-core/src/airflow/ui/src/pages/Events/Events.tsx

@@ -159,7 +159,7 @@ const {
 }: SearchParamsKeysType = SearchParamsKeys;
 
 export const Events = () => {
-  const { t: translate } = useTranslation("browse");
+  const { t: translate } = useTranslation(["browse", "common"]);
   const { dagId, runId, taskId } = useParams();
   const [searchParams] = useSearchParams();
   const { setTableURLState, tableURLState } = useTableURLState();
@@ -221,8 +221,8 @@ export const Events = () => {
       <Flex alignItems="center" justifyContent="space-between">
         <EventsFilters urlDagId={dagId} urlRunId={runId} urlTaskId={taskId} />
         <ExpandCollapseButtons
-          collapseLabel={translate("auditLog.actions.collapseAllExtra")}
-          expandLabel={translate("auditLog.actions.expandAllExtra")}
+          collapseLabel={translate("collapseAllExtra")}
+          expandLabel={translate("expandAllExtra")}
           onCollapse={onClose}
           onExpand={onOpen}
         />

airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx

@@ -173,8 +173,8 @@ export const XCom = () => {
       <Flex alignItems="center" justifyContent="space-between">
         <XComFilters />
         <ExpandCollapseButtons
-          collapseLabel={translate("auditLog.actions.collapseAllExtra")}
-          expandLabel={translate("auditLog.actions.expandAllExtra")}
+          collapseLabel={translate("collapseAllExtra")}
+          expandLabel={translate("expandAllExtra")}
           onCollapse={onClose}
           onExpand={onOpen}
         />