You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by pi...@apache.org on 2025/10/03 08:08:16 UTC
(airflow) branch v3-1-test updated: [v3-1-test] Expand and collapse group component (#56293) (#56334)
This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new 1e450303e3a [v3-1-test] Expand and collapse group component (#56293) (#56334)
1e450303e3a is described below
commit 1e450303e3ae4e3113459fae152a157967c0fc59
Author: github-actions[bot] <41...@users.noreply.github.com>
AuthorDate: Fri Oct 3 10:08:09 2025 +0200
[v3-1-test] Expand and collapse group component (#56293) (#56334)
* Extract component for expand and collapse button group
* Refactor toggle groups buttons
(cherry picked from commit 6d1991d2c84309a719c8e50f74dd25510ce6d47d)
Co-authored-by: Pierre Jeambrun <pi...@gmail.com>
---
.../ui/src/components/ExpandCollapseButtons.tsx | 60 ++++++++++++++++++++++
.../ui/src/layouts/Details/ToggleGroups.tsx | 33 ++++--------
.../src/airflow/ui/src/pages/Events/Events.tsx | 28 +++-------
.../src/airflow/ui/src/pages/XCom/XCom.tsx | 26 +++-------
4 files changed, 87 insertions(+), 60 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx b/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx
new file mode 100644
index 00000000000..fac305a7624
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx
@@ -0,0 +1,60 @@
+/*!
+ * 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 { ButtonGroup, IconButton } from "@chakra-ui/react";
+import { MdCompress, MdExpand } from "react-icons/md";
+
+type Props = {
+ readonly collapseLabel: string;
+ readonly expandLabel: string;
+ readonly isCollapseDisabled?: boolean;
+ readonly isExpandDisabled?: boolean;
+ readonly onCollapse: () => void;
+ readonly onExpand: () => void;
+};
+
+export const ExpandCollapseButtons = ({
+ collapseLabel,
+ expandLabel,
+ isCollapseDisabled,
+ isExpandDisabled,
+ onCollapse,
+ onExpand,
+ ...rest
+}: Props) => (
+ <ButtonGroup attached size="sm" variant="surface" {...rest}>
+ <IconButton
+ aria-label={expandLabel}
+ disabled={isExpandDisabled}
+ onClick={onExpand}
+ size="sm"
+ title={expandLabel}
+ >
+ <MdExpand />
+ </IconButton>
+ <IconButton
+ aria-label={collapseLabel}
+ disabled={isCollapseDisabled}
+ onClick={onCollapse}
+ size="sm"
+ title={collapseLabel}
+ >
+ <MdCompress />
+ </IconButton>
+ </ButtonGroup>
+);
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/ToggleGroups.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/ToggleGroups.tsx
index c55446c1c56..8abaa3cca3e 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/ToggleGroups.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/ToggleGroups.tsx
@@ -16,10 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { type ButtonGroupProps, IconButton, ButtonGroup } from "@chakra-ui/react";
+import type { ButtonGroupProps } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
-import { MdExpand, MdCompress } from "react-icons/md";
+import { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
import { useOpenGroups } from "src/context/openGroups";
export const ToggleGroups = (props: ButtonGroupProps) => {
@@ -46,25 +46,14 @@ export const ToggleGroups = (props: ButtonGroupProps) => {
const collapseLabel = translate("dag:taskGroups.collapseAll");
return (
- <ButtonGroup attached size="sm" variant="outline" {...props}>
- <IconButton
- aria-label={expandLabel}
- disabled={isExpandDisabled}
- onClick={onExpand}
- size="sm"
- title={expandLabel}
- >
- <MdExpand />
- </IconButton>
- <IconButton
- aria-label={collapseLabel}
- disabled={isCollapseDisabled}
- onClick={onCollapse}
- size="sm"
- title={collapseLabel}
- >
- <MdCompress />
- </IconButton>
- </ButtonGroup>
+ <ExpandCollapseButtons
+ collapseLabel={collapseLabel}
+ expandLabel={expandLabel}
+ isCollapseDisabled={isCollapseDisabled}
+ isExpandDisabled={isExpandDisabled}
+ onCollapse={onCollapse}
+ onExpand={onExpand}
+ {...props}
+ />
);
};
diff --git a/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx b/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
index ca19dd36534..2a3bbefbb3a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Events/Events.tsx
@@ -16,11 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ButtonGroup, Code, Flex, Heading, IconButton, useDisclosure, VStack } from "@chakra-ui/react";
+import { Code, Flex, Heading, useDisclosure, VStack } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";
-import { MdCompress, MdExpand } from "react-icons/md";
import { useParams, useSearchParams } from "react-router-dom";
import { useEventLogServiceGetEventLogs } from "openapi/queries";
@@ -28,6 +27,7 @@ import type { EventLogResponse } 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 Time from "src/components/Time";
import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams";
@@ -214,24 +214,12 @@ export const Events = () => {
) : undefined}
<Flex alignItems="center" justifyContent="space-between">
<EventsFilters urlDagId={dagId} urlRunId={runId} urlTaskId={taskId} />
- <ButtonGroup attached mt="1" size="sm" variant="surface">
- <IconButton
- aria-label={translate("auditLog.actions.expandAllExtra")}
- onClick={onOpen}
- size="sm"
- title={translate("auditLog.actions.expandAllExtra")}
- >
- <MdExpand />
- </IconButton>
- <IconButton
- aria-label={translate("auditLog.actions.collapseAllExtra")}
- onClick={onClose}
- size="sm"
- title={translate("auditLog.actions.collapseAllExtra")}
- >
- <MdCompress />
- </IconButton>
- </ButtonGroup>
+ <ExpandCollapseButtons
+ collapseLabel={translate("auditLog.actions.collapseAllExtra")}
+ expandLabel={translate("auditLog.actions.expandAllExtra")}
+ onCollapse={onClose}
+ onExpand={onOpen}
+ />
</Flex>
<ErrorAlert error={error} />
diff --git a/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx b/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx
index 68f3fa7f4df..0e669884376 100644
--- a/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx
@@ -16,10 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Heading, Link, Flex, ButtonGroup, IconButton, useDisclosure } from "@chakra-ui/react";
+import { Box, Heading, Link, Flex, useDisclosure } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import { useTranslation } from "react-i18next";
-import { MdCompress, MdExpand } from "react-icons/md";
import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
import { useXcomServiceGetXcomEntries } from "openapi/queries";
@@ -27,6 +26,7 @@ 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 { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
import { TruncatedText } from "src/components/TruncatedText";
import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams";
import { getTaskInstanceLink } from "src/utils/links";
@@ -162,22 +162,12 @@ export const XCom = () => {
<Flex alignItems="center" justifyContent="space-between">
<XComFilters />
- <ButtonGroup attached mt="1" size="sm" variant="surface">
- <IconButton
- aria-label={translate("auditLog.actions.expandAllExtra")}
- onClick={onOpen}
- title={translate("auditLog.actions.expandAllExtra")}
- >
- <MdExpand />
- </IconButton>
- <IconButton
- aria-label={translate("auditLog.actions.collapseAllExtra")}
- onClick={onClose}
- title={translate("auditLog.actions.collapseAllExtra")}
- >
- <MdCompress />
- </IconButton>
- </ButtonGroup>
+ <ExpandCollapseButtons
+ collapseLabel={translate("auditLog.actions.collapseAllExtra")}
+ expandLabel={translate("auditLog.actions.expandAllExtra")}
+ onCollapse={onClose}
+ onExpand={onOpen}
+ />
</Flex>
<ErrorAlert error={error} />