[v3-1-test] Expand and collapse group component (#56293)

pierrejeambrun · Your friendly bot · commit 46860abfed43 · 2025-10-02T15:30:50.000Z
* Extract component for expand and collapse button group * Refactor toggle groups buttons (cherry picked from commit 6d1991d) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
diff --git a/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx 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
@@ -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
@@ -16,18 +16,18 @@
  * 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";
 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
@@ -16,17 +16,17 @@
  * 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";
 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} />
