Add expand/collapse all for Dag Run conf JSON in Dag Runs list

airflow-core/src/airflow/ui/src/mocks/handlers/dag_runs.ts

@@ -38,7 +38,7 @@ const dagRunBeforeFilter = {
 };
 
 const dagRunInRange = {
-  conf: null,
+  conf: { batch: 42, env: "prod" },
   dag_display_name: "test_dag",
   dag_id: "test_dag",
   dag_run_id: "run_in_range",

airflow-core/src/airflow/ui/src/pages/DagRuns/DagRuns.test.tsx

@@ -17,11 +17,19 @@
  * under the License.
  */
 import "@testing-library/jest-dom";
-import { render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { AppWrapper } from "src/utils/AppWrapper";
 
+// Stand in for the Monaco-backed JSON viewer so the test can assert the collapse
+// state without loading the editor.
+vi.mock("src/components/RenderedJsonField", () => ({
+  default: ({ collapsed }: { readonly collapsed?: boolean }) => (
+    <div data-collapsed={collapsed} data-testid="rendered-json-field" />
+  ),
+}));
+
 // The dag_runs mock handler (see src/mocks/handlers/dag_runs.ts) returns:
 //   - run_before_filter (logical_date: 2024-12-31) — excluded when filtering Jan 2025
 //   - run_in_range      (logical_date: 2025-01-15) — included when filtering Jan 2025
@@ -46,3 +54,35 @@ describe("DagRuns logical date filter", () => {
     expect(screen.queryByText("run_before_filter")).not.toBeInTheDocument();
   });
 });
+
+describe("DagRuns conf expand/collapse", () => {
+  beforeEach(() => {
+    // The conf column is hidden by default; reveal it so the JSON viewer renders.
+    globalThis.localStorage.setItem(
+      "dataTable:common:dagRun:columnVisibility",
+      JSON.stringify({ conf: true }),
+    );
+  });
+
+  afterEach(() => {
+    globalThis.localStorage.clear();
+  });
+
+  it("toggles conf JSON collapse state via the expand/collapse all buttons", async () => {
+    render(<AppWrapper initialEntries={["/dag_runs"]} />);
+
+    await waitFor(() => expect(screen.getByTestId("rendered-json-field")).toBeInTheDocument());
+
+    expect(screen.getByTestId("rendered-json-field")).toHaveAttribute("data-collapsed", "true");
+
+    fireEvent.click(screen.getByTestId("expand-all-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("rendered-json-field")).toHaveAttribute("data-collapsed", "false"),
+    );
+
+    fireEvent.click(screen.getByTestId("collapse-all-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("rendered-json-field")).toHaveAttribute("data-collapsed", "true"),
+    );
+  });
+});

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Flex, HStack, Text } from "@chakra-ui/react";
+import { Flex, HStack, Text, useDisclosure } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
@@ -36,6 +36,7 @@ import {
 } from "src/components/DataTable/useRowSelection";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
 import { LimitedItemsList } from "src/components/LimitedItemsList";
 import { MarkRunAsButton } from "src/components/MarkAs";
 import RenderedJsonField from "src/components/RenderedJsonField";
@@ -86,10 +87,11 @@ const {
 
 type ColumnProps = {
   readonly dagId?: string;
+  readonly open: boolean;
   readonly translate: TFunction;
 } & GetColumnsParams;
 
-const runColumns = ({ dagId, translate }: ColumnProps): Array<ColumnDef<DAGRunResponse>> => [
+const runColumns = ({ dagId, open, translate }: ColumnProps): Array<ColumnDef<DAGRunResponse>> => [
   {
     accessorKey: "select",
     cell: ({ row }) => <SelectionRowCheckbox colorPalette="brand" rowKey={getRowKey(row.original)} />,
@@ -196,7 +198,7 @@ const runColumns = ({ dagId, translate }: ColumnProps): Array<ColumnDef<DAGRunRe
     accessorKey: "conf",
     cell: ({ row: { original } }) =>
       original.conf && Object.keys(original.conf).length > 0 ? (
-        <RenderedJsonField collapsed content={original.conf} />
+        <RenderedJsonField collapsed={!open} content={original.conf} />
       ) : undefined,
     header: translate("dagRun.conf"),
   },
@@ -222,6 +224,7 @@ export const DagRuns = () => {
   const { t: translate } = useTranslation();
   const { dagId } = useParams();
   const [searchParams] = useSearchParams();
+  const { onClose, onOpen, open } = useDisclosure();
 
   const { setTableURLState, tableURLState } = useTableURLState({
     columnVisibility: {
@@ -334,6 +337,7 @@ export const DagRuns = () => {
   const columns = runColumns({
     dagId,
     multiTeam: false,
+    open,
     translate,
   });
 
@@ -344,7 +348,16 @@ export const DagRuns = () => {
       onSelectAll={handleSelectAll}
       selectedRows={selectedRows}
     >
-      <DagRunsFilters dagId={dagId} />
+      <Flex alignItems="center" justifyContent="space-between">
+        <DagRunsFilters dagId={dagId} />
+        <ExpandCollapseButtons
+          collapseLabel={translate("common:collapseAllExtra")}
+          expandLabel={translate("common:expandAllExtra")}
+          isExpanded={open}
+          onCollapse={onClose}
+          onExpand={onOpen}
+        />
+      </Flex>
       <DataTable
         columns={columns}
         data={data?.dag_runs ?? []}