From 45dd91759710ddfc6f59cc2e17b24bdd4b729e5e Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Thu, 7 May 2026 16:38:14 -0400 Subject: [PATCH 1/5] Upgrade icons, spacing, and default component themes --- .../src/components/AdvancedSearchToggle.tsx | 3 +- .../ui/src/components/AssetProgressCell.tsx | 2 +- .../src/components/Assets/TriggeredRuns.tsx | 2 +- .../components/Clear/Run/ClearRunButton.tsx | 5 ++- .../components/Clear/Run/ClearRunDialog.tsx | 2 +- .../ClearGroupTaskInstanceDialog.tsx | 2 +- .../TaskInstance/ClearTaskInstanceButton.tsx | 5 ++- .../TaskInstance/ClearTaskInstanceDialog.tsx | 2 +- .../ui/src/components/DAGWarningsModal.tsx | 8 +---- .../components/DagActions/DeleteDagButton.tsx | 11 ++----- .../DagActions/FavoriteDagButton.tsx | 21 +++--------- .../components/DagActions/ParseDagButton.tsx | 4 +-- .../components/DagActions/RunBackfillForm.tsx | 17 +++------- .../ui/src/components/DataTable/DataTable.tsx | 7 ++-- .../components/DataTable/FilterMenuButton.tsx | 8 ++--- .../src/components/DisplayMarkdownButton.tsx | 5 ++- .../src/components/EditableMarkdownButton.tsx | 5 +-- .../src/components/ExpandCollapseButtons.tsx | 8 ++--- .../ui/src/components/FilterBar/FilterBar.tsx | 2 +- .../FilterBar/filters/DateInput.tsx | 4 +-- .../src/components/Graph/DownloadButton.tsx | 3 +- .../ui/src/components/GraphTaskFilters.tsx | 5 ++- .../components/MarkAs/Run/MarkRunAsButton.tsx | 5 ++- .../components/MarkAs/Run/MarkRunAsDialog.tsx | 2 +- .../TaskGroup/MarkTaskGroupAsButton.tsx | 5 ++- .../TaskGroup/MarkTaskGroupAsDialog.tsx | 2 +- .../TaskInstance/MarkTaskInstanceAsButton.tsx | 5 ++- .../TaskInstance/MarkTaskInstanceAsDialog.tsx | 2 +- .../ui/src/components/QuickFilterButton.tsx | 1 - .../airflow/ui/src/components/SearchBar.tsx | 2 +- .../ui/src/components/TaskTrySelect.tsx | 1 - .../TriggerDag/TriggerDAGButton.tsx | 6 ++-- .../components/TriggerDag/TriggerDAGForm.tsx | 7 +--- .../components/TriggerDag/TriggerDAGModal.tsx | 2 +- .../src/components/ui/ButtonGroupToggle.tsx | 6 ++-- .../ui/src/components/ui/Clipboard.tsx | 6 ++-- .../ui/src/components/ui/IconButton.tsx | 28 ++++++++++++++++ .../ui/src/components/ui/LazyClipboard.tsx | 3 +- .../components/ui/Pagination/NextTrigger.tsx | 3 +- .../components/ui/Pagination/PrevTrigger.tsx | 3 +- .../ui/src/components/ui/ResetButton.tsx | 2 +- .../src/airflow/ui/src/components/ui/index.ts | 1 + .../ui/src/layouts/Details/DetailsLayout.tsx | 12 +++---- .../Details/Grid/GridPaginationButtons.tsx | 4 ++- .../ui/src/layouts/Details/PanelButtons.tsx | 4 +-- .../src/layouts/Details/TaskStreamFilter.tsx | 18 ++--------- .../ui/src/layouts/Nav/LanguageModal.tsx | 2 +- .../ui/src/layouts/Nav/TimezoneModal.tsx | 2 +- .../src/layouts/Nav/TokenGenerationModal.tsx | 2 +- .../ui/src/pages/Asset/AssetPanelButtons.tsx | 3 +- .../ui/src/pages/Asset/CreateAssetEvent.tsx | 5 ++- .../src/pages/Asset/CreateAssetEventModal.tsx | 2 +- .../pages/AssetsList/DependencyPopover.tsx | 2 +- .../pages/Connections/AddConnectionButton.tsx | 6 ++-- .../ui/src/pages/Connections/Connections.tsx | 2 -- .../Connections/DeleteConnectionButton.tsx | 7 ++-- .../Connections/DeleteConnectionsButton.tsx | 3 +- .../Connections/EditConnectionButton.tsx | 7 ++-- .../Connections/TestConnectionButton.tsx | 4 +-- .../ui/src/pages/Dag/Calendar/Calendar.tsx | 11 ++----- .../pages/Dag/Overview/AllDeadlinesModal.tsx | 2 +- .../ui/src/pages/Dag/Overview/FailedLogs.tsx | 1 - .../src/pages/Dag/Overview/TaskLogPreview.tsx | 2 +- .../ui/src/pages/DagsList/AssetSchedule.tsx | 4 +-- .../DagsList/DagsFilters/FavoriteFilter.tsx | 32 ++++++++----------- .../DagsFilters/RequiredActionFilter.tsx | 1 - .../pages/DagsList/PartitionScheduleModal.tsx | 2 +- .../Dashboard/FavoriteDags/FavoriteDags.tsx | 4 +-- .../Dashboard/Stats/DAGImportErrorsModal.tsx | 2 +- .../Stats/PluginImportErrorsModal.tsx | 2 +- .../airflow/ui/src/pages/DeleteRunButton.tsx | 5 ++- .../src/airflow/ui/src/pages/Jobs.tsx | 3 +- .../ui/src/pages/Pools/AddPoolButton.tsx | 6 ++-- .../ui/src/pages/Pools/DeletePoolButton.tsx | 11 ++----- .../ui/src/pages/Pools/EditPoolButton.tsx | 13 +++----- .../airflow/ui/src/pages/Pools/PoolForm.tsx | 2 +- .../ui/src/pages/Run/DeadlineStatus.tsx | 2 +- .../TaskInstance/Logs/LogSearchInput.tsx | 6 ++-- .../TaskInstance/Logs/ScrollToButton.tsx | 2 +- .../pages/TaskInstance/Logs/TaskLogHeader.tsx | 16 ++-------- .../BulkClearTaskInstancesButton.tsx | 4 +-- .../BulkDeleteTaskInstancesButton.tsx | 4 +-- .../BulkMarkTaskInstancesAsButton.tsx | 4 +-- .../DeleteTaskInstanceButton.tsx | 5 ++- .../src/pages/TaskInstances/TaskInstances.tsx | 2 -- .../pages/Variables/DeleteVariablesButton.tsx | 3 +- .../pages/Variables/ImportVariablesButton.tsx | 2 +- .../ManageVariable/AddVariableButton.tsx | 6 ++-- .../ManageVariable/DeleteVariableButton.tsx | 7 ++-- .../ManageVariable/EditVariableButton.tsx | 7 ++-- .../ui/src/pages/Variables/Variables.tsx | 2 -- .../ui/src/pages/XCom/DeleteXComButton.tsx | 10 ++---- .../ui/src/pages/XCom/EditXComButton.tsx | 5 +-- airflow-core/src/airflow/ui/src/theme.ts | 26 ++++++++++++++- .../src/airflow/ui/src/utils/TrimText.tsx | 2 +- 95 files changed, 231 insertions(+), 295 deletions(-) create mode 100644 airflow-core/src/airflow/ui/src/components/ui/IconButton.tsx diff --git a/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx b/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx index 2681a295c336f..b76491092e800 100644 --- a/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx +++ b/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, IconButton, Stack, Text } from "@chakra-ui/react"; +import { Box, Stack, Text } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { LuRegex } from "react-icons/lu"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; export type AdvancedSearchToggleProps = { diff --git a/airflow-core/src/airflow/ui/src/components/AssetProgressCell.tsx b/airflow-core/src/airflow/ui/src/components/AssetProgressCell.tsx index 7d305a03fb765..7c877ba0a4620 100644 --- a/airflow-core/src/airflow/ui/src/components/AssetProgressCell.tsx +++ b/airflow-core/src/airflow/ui/src/components/AssetProgressCell.tsx @@ -51,7 +51,7 @@ export const AssetProgressCell = ({ dagId, partitionKey, totalReceived, totalReq // eslint-disable-next-line jsx-a11y/no-autofocus - diff --git a/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx b/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx index 1efb1ec8c5473..f55552123c970 100644 --- a/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx +++ b/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx @@ -50,7 +50,7 @@ export const TriggeredRuns = ({ dagRuns }: Props) => { // eslint-disable-next-line jsx-a11y/no-autofocus - diff --git a/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx b/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx index 0cc5118a86603..8b7796bb9b196 100644 --- a/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx @@ -16,12 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton, useDisclosure } from "@chakra-ui/react"; +import { useDisclosure } from "@chakra-ui/react"; import { useHotkeys } from "react-hotkeys-hook"; import { useTranslation } from "react-i18next"; import { CgRedo } from "react-icons/cg"; import type { DAGRunResponse } from "openapi/requests/types.gen"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import ClearRunDialog from "./ClearRunDialog"; @@ -58,8 +59,6 @@ const ClearRunButton = ({ dagRun, isHotkeyEnabled = false }: Props) => { aria-label={translate("dags:runAndTaskActions.clear.button", { type: translate("dagRun_one") })} colorPalette="brand" onClick={onOpen} - size="md" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx b/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx index 6c36b47849552..3a7ee62269efb 100644 --- a/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx +++ b/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx @@ -93,7 +93,7 @@ const ClearRunDialog = ({ dagRun, onClose, open }: Props) => { const shouldShowBundleVersionOption = versionsDiffer && !onlyNew; return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx index dc4acda785094..de3ceb64c58d1 100644 --- a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx +++ b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx @@ -126,7 +126,7 @@ export const ClearGroupTaskInstanceDialog = ({ onClose, open, taskInstance }: Pr }, [open, dagVersionsDiffer]); return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx index 6a6b40f802441..b0c9e40b34ee4 100644 --- a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx @@ -16,13 +16,14 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton, useDisclosure } from "@chakra-ui/react"; +import { useDisclosure } from "@chakra-ui/react"; import { useHotkeys } from "react-hotkeys-hook"; import { useTranslation } from "react-i18next"; import { CgRedo } from "react-icons/cg"; import type { LightGridTaskInstanceSummary, TaskInstanceResponse } from "openapi/requests/types.gen"; import { ClearGroupTaskInstanceDialog } from "src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import ClearTaskInstanceDialog from "./ClearTaskInstanceDialog"; @@ -93,8 +94,6 @@ const ClearTaskInstanceButton = ({ } colorPalette="brand" onClick={() => (onOpen && selectedInstance ? onOpen(selectedInstance) : onOpenInternal())} - size="md" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx index afa7773acbee6..a7e3f894e4904 100644 --- a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx +++ b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx @@ -151,7 +151,7 @@ const ClearTaskInstanceDialog = (props: Props) => { return ( <> - + diff --git a/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx b/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx index 757c93a8cc215..6c85b8d56b6e8 100644 --- a/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx +++ b/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx @@ -44,13 +44,7 @@ export const DAGWarningsModal: React.FC = ({ error, on : ""; return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/DagActions/DeleteDagButton.tsx b/airflow-core/src/airflow/ui/src/components/DagActions/DeleteDagButton.tsx index 7b277e542d85e..b9d529ab7d91a 100644 --- a/airflow-core/src/airflow/ui/src/components/DagActions/DeleteDagButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/DagActions/DeleteDagButton.tsx @@ -16,12 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton, useDisclosure } from "@chakra-ui/react"; +import { useDisclosure } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { FiTrash2 } from "react-icons/fi"; import { useLocation, useNavigate } from "react-router-dom"; import DeleteDialog from "src/components/DeleteDialog"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import { useDeleteDag } from "src/queries/useDeleteDag"; @@ -51,13 +52,7 @@ export const DeleteDagButton = ({ dagDisplayName, dagId }: DeleteDagButtonProps) return ( <> - + diff --git a/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx b/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx index c125177cfc6fa..e604351ce15c1 100644 --- a/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx @@ -16,11 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; -import { FiStar } from "react-icons/fi"; +import { MdStar, MdStarOutline } from "react-icons/md"; -import { Tooltip } from "src/components/ui"; +import { IconButton, Tooltip } from "src/components/ui"; import { useToggleFavoriteDag } from "src/queries/useToggleFavoriteDag"; type FavoriteDagButtonProps = { @@ -36,20 +35,8 @@ export const FavoriteDagButton = ({ dagId, isFavorite = false }: FavoriteDagButt return ( - toggleFavorite(isFavorite)} - size="md" - variant="ghost" - > - + toggleFavorite(isFavorite)}> + {isFavorite ? : } ); diff --git a/airflow-core/src/airflow/ui/src/components/DagActions/ParseDagButton.tsx b/airflow-core/src/airflow/ui/src/components/DagActions/ParseDagButton.tsx index 903367e118ccf..6eaf7195a4997 100644 --- a/airflow-core/src/airflow/ui/src/components/DagActions/ParseDagButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/DagActions/ParseDagButton.tsx @@ -16,10 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { AiOutlineFileSync } from "react-icons/ai"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import { useDagParsing } from "src/queries/useDagParsing.ts"; @@ -39,8 +39,6 @@ export const ParseDagButton = ({ dagId, fileToken }: Props) => { colorPalette="brand" loading={isPending} onClick={() => mutate({ fileToken })} - size="md" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/DagActions/RunBackfillForm.tsx b/airflow-core/src/airflow/ui/src/components/DagActions/RunBackfillForm.tsx index 15afb51620230..0a434b8517288 100644 --- a/airflow-core/src/airflow/ui/src/components/DagActions/RunBackfillForm.tsx +++ b/airflow-core/src/airflow/ui/src/components/DagActions/RunBackfillForm.tsx @@ -222,7 +222,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => { control={control} name="run_backwards" render={({ field }) => ( - + {translate("backfill.backwards")} )} @@ -232,7 +232,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => { control={control} name="run_on_latest_version" render={({ field }) => ( - + {translate("dags:runAndTaskActions.options.runOnLatestVersion")} )} @@ -240,22 +240,13 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => { {dag.is_paused ? ( <> - setUnpause(!unpause)} - wordBreak="break-all" - > + setUnpause(!unpause)} wordBreak="break-all"> {translate("backfill.unpause", { dag_display_name: dag.dag_display_name })} ) : undefined} - setOverrideParams(!overrideParams)} - > + setOverrideParams(!overrideParams)}> {translate("backfill.overrideExistingParams")} diff --git a/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx b/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx index 81f5b42d67133..19b058aaecd84 100644 --- a/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx +++ b/airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Heading, HStack, IconButton, Text } from "@chakra-ui/react"; +import { Box, Heading, HStack, Text } from "@chakra-ui/react"; import { getCoreRowModel, getExpandedRowModel, @@ -39,6 +39,7 @@ import { TableList } from "src/components/DataTable/TableList"; import { ToggleTableDisplay } from "src/components/DataTable/ToggleTableDisplay"; import { createSkeletonMock } from "src/components/DataTable/skeleton"; import type { CardDef, MetaColumn, TableState } from "src/components/DataTable/types"; +import { IconButton } from "src/components/ui"; import { ProgressBar, Pagination, Toaster } from "src/components/ui"; type DataTableProps = { @@ -231,8 +232,6 @@ export const DataTable = ({ onStateChange({ ...initialState, cursor: previousCursor }); } }} - size="sm" - variant="ghost" > @@ -245,8 +244,6 @@ export const DataTable = ({ onStateChange({ ...initialState, cursor: nextCursor }); } }} - size="sm" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx b/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx index 1c4c75601a4d0..00aa9b4305ee1 100644 --- a/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/DataTable/FilterMenuButton.tsx @@ -16,11 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton } from "@chakra-ui/react"; import { flexRender, type Header, type Table } from "@tanstack/react-table"; import { useTranslation } from "react-i18next"; -import { MdFilterList } from "react-icons/md"; +import { LuColumns3 } from "react-icons/lu"; +import { IconButton } from "src/components/ui"; import { Menu } from "src/components/ui"; import { Checkbox } from "src/components/ui/Checkbox"; @@ -37,8 +37,8 @@ const FilterMenuButton = ({ table }: Props) => { return ( - - + + diff --git a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx index f30acc82e5535..08d7def77fad4 100644 --- a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx @@ -16,9 +16,10 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Heading, IconButton, VStack } from "@chakra-ui/react"; +import { Box, Heading, VStack } from "@chakra-ui/react"; import { type ReactElement, useState } from "react"; +import { IconButton } from "src/components/ui"; import { Dialog, Tooltip } from "src/components/ui"; import { ResizableWrapper, MARKDOWN_DIALOG_STORAGE_KEY } from "src/components/ui/ResizableWrapper"; @@ -45,9 +46,7 @@ const DisplayMarkdownButton = ({ colorPalette="brand" data-testid="markdown-button" onClick={() => setIsDocsOpen(true)} - size="md" title={text} - variant="ghost" > {icon} diff --git a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx index c752526d65a92..325dc5a44444a 100644 --- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownButton.tsx @@ -16,11 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Button, Flex, Heading, IconButton, VStack } from "@chakra-ui/react"; +import { Box, Button, Flex, Heading, VStack } from "@chakra-ui/react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { PiNoteBold, PiNoteBlankBold } from "react-icons/pi"; +import { IconButton } from "src/components/ui"; import { Dialog, Tooltip } from "src/components/ui"; import { ResizableWrapper, MARKDOWN_DIALOG_STORAGE_KEY } from "src/components/ui/ResizableWrapper"; @@ -60,7 +61,7 @@ const EditableMarkdownButton = ({ return ( <> - + {noteIcon} diff --git a/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx b/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx index 11d2b70a28868..29f1d493f2180 100644 --- a/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx +++ b/airflow-core/src/airflow/ui/src/components/ExpandCollapseButtons.tsx @@ -16,9 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { ButtonGroup, IconButton } from "@chakra-ui/react"; +import { ButtonGroup } from "@chakra-ui/react"; import { MdCompress, MdExpand } from "react-icons/md"; +import { IconButton } from "src/components/ui"; + type Props = { readonly collapseLabel: string; readonly expandLabel: string; @@ -39,13 +41,12 @@ export const ExpandCollapseButtons = ({ onExpand, ...rest }: Props) => ( - + @@ -56,7 +57,6 @@ export const ExpandCollapseButtons = ({ data-testid="collapse-all-button" disabled={isCollapseDisabled} onClick={onCollapse} - size="sm" title={collapseLabel} variant={isExpanded === false ? "solid" : "outline"} > diff --git a/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx b/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx index eed230bc98e86..138ad02f0d1c3 100644 --- a/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx +++ b/airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx @@ -212,7 +212,7 @@ export const FilterBar = ({ )} {filters.length > 0 && ( - diff --git a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/DateInput.tsx b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/DateInput.tsx index b3a47d7bc1318..0856c80dd9d8b 100644 --- a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/DateInput.tsx +++ b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/DateInput.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, IconButton, Input, Text } from "@chakra-ui/react"; +import { Box, Input, Text } from "@chakra-ui/react"; import React from "react"; import { MdClose } from "react-icons/md"; +import { IconButton } from "src/components/ui"; import type { ValidationError } from "src/hooks/useDateRangeFilter"; type DateInputProps = { @@ -84,7 +85,6 @@ export const DateInput = ({ size="2xs" top="50%" transform="translateY(-50%)" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx b/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx index 2218e611984b7..13813f03df4a5 100644 --- a/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx @@ -16,12 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton } from "@chakra-ui/react"; import { Panel, useReactFlow } from "@xyflow/react"; import { toPng } from "html-to-image"; import { useTranslation } from "react-i18next"; import { FiDownload } from "react-icons/fi"; +import { IconButton } from "src/components/ui"; import { toaster } from "src/components/ui"; export const DownloadButton = ({ name }: { readonly name: string }) => { @@ -74,7 +74,6 @@ export const DownloadButton = ({ name }: { readonly name: string }) => { }} size="xs" title={translate("graph.downloadImage")} - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/GraphTaskFilters.tsx b/airflow-core/src/airflow/ui/src/components/GraphTaskFilters.tsx index a9d672d938457..a931c1ebbe3ac 100644 --- a/airflow-core/src/airflow/ui/src/components/GraphTaskFilters.tsx +++ b/airflow-core/src/airflow/ui/src/components/GraphTaskFilters.tsx @@ -18,7 +18,6 @@ */ import { Button, - IconButton, type NumberInputValueChangeDetails, Portal, Separator, @@ -34,6 +33,7 @@ import { useParams, useSearchParams } from "react-router-dom"; import type { TaskInstanceState } from "openapi/requests/types.gen"; import { AttrSelectFilterMulti } from "src/components/AttrSelectFilterMulti"; import { StateBadge } from "src/components/StateBadge"; +import { IconButton } from "src/components/ui"; import { Select } from "src/components/ui"; import { Menu } from "src/components/ui/Menu"; import { NumberInputField, NumberInputRoot } from "src/components/ui/NumberInput"; @@ -155,7 +155,6 @@ export const GraphTaskFilters = () => { @@ -261,7 +260,7 @@ export const GraphTaskFilters = () => { )} {hasActiveFilters ? ( - ) : undefined} diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsx index 47025709a5fd0..b78924e395aad 100644 --- a/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, HStack, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Box, HStack, useDisclosure } from "@chakra-ui/react"; import { useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { useTranslation } from "react-i18next"; @@ -25,6 +25,7 @@ import { LuCheck } from "react-icons/lu"; import type { DAGRunPatchStates, DAGRunResponse } from "openapi/requests/types.gen"; import { StateBadge } from "src/components/StateBadge"; +import { IconButton } from "src/components/ui"; import { Menu, Tooltip } from "src/components/ui"; import { allowedStates } from "../utils"; @@ -72,8 +73,6 @@ const MarkRunAsButton = ({ dagRun, isHotkeyEnabled = false }: Props) => { })} colorPalette="brand" data-testid="mark-run-as-button" - size="md" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx index da10d6a500fcd..c02d8684d751e 100644 --- a/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx +++ b/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx @@ -42,7 +42,7 @@ const MarkRunAsDialog = ({ dagRun, onClose, open, state }: Props) => { const { isPending, mutate } = usePatchDagRun({ dagId, dagRunId, onSuccess: onClose }); return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsButton.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsButton.tsx index d34370a018985..4480062b9ecdf 100644 --- a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsButton.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, HStack, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Box, HStack, useDisclosure } from "@chakra-ui/react"; import { useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { useTranslation } from "react-i18next"; @@ -25,6 +25,7 @@ import { LuCheck } from "react-icons/lu"; import type { LightGridTaskInstanceSummary, TaskInstanceState } from "openapi/requests/types.gen"; import { StateBadge } from "src/components/StateBadge"; +import { IconButton } from "src/components/ui"; import { Menu, Tooltip } from "src/components/ui"; import { allowedStates } from "../utils"; @@ -74,8 +75,6 @@ const MarkTaskGroupAsButton = ({ groupTaskInstance, isHotkeyEnabled = false }: P type: translate("taskGroup_one"), })} colorPalette="brand" - size="md" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx index 7e64f5920e65a..b56347456c4f4 100644 --- a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx +++ b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx @@ -81,7 +81,7 @@ const MarkTaskGroupAsDialog = ({ groupTaskInstance, onClose, open, state }: Prop }; return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsx index 19d1e8c75c547..28b1e96258c2c 100644 --- a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, HStack, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Box, HStack, useDisclosure } from "@chakra-ui/react"; import { useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { useTranslation } from "react-i18next"; @@ -25,6 +25,7 @@ import { LuCheck } from "react-icons/lu"; import type { TaskInstanceResponse, TaskInstanceState } from "openapi/requests/types.gen"; import { StateBadge } from "src/components/StateBadge"; +import { IconButton } from "src/components/ui"; import { Menu, Tooltip } from "src/components/ui"; import { allowedStates } from "../utils"; @@ -74,8 +75,6 @@ const MarkTaskInstanceAsButton = ({ isHotkeyEnabled = false, taskInstance }: Pro type: translate("taskInstance_one"), })} colorPalette="brand" - size="md" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx index 2e42160778029..4f5dc48686693 100644 --- a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx +++ b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx @@ -84,7 +84,7 @@ const MarkTaskInstanceAsDialog = ({ onClose, open, state, taskInstance }: Props) }; return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx b/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx index 4fa8b855edaa5..8c8205e614260 100644 --- a/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/QuickFilterButton.tsx @@ -32,7 +32,6 @@ export const QuickFilterButton = ({ children, isActive, ...rest }: QuickFilterBu color="colorPalette.fg" data-testid="quick-filter-button" fontWeight="normal" - size="sm" variant={isActive ? "solid" : "outline"} {...rest} > diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx index 938d8246173ce..a9761b7cd541a 100644 --- a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx +++ b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx @@ -123,7 +123,7 @@ export const SearchBar = ({ } return ( - + {inputGroup} diff --git a/airflow-core/src/airflow/ui/src/components/TaskTrySelect.tsx b/airflow-core/src/airflow/ui/src/components/TaskTrySelect.tsx index d2163f2d05b38..c3aae8dbec2e3 100644 --- a/airflow-core/src/airflow/ui/src/components/TaskTrySelect.tsx +++ b/airflow-core/src/airflow/ui/src/components/TaskTrySelect.tsx @@ -135,7 +135,6 @@ export const TaskTrySelect = ({ onSelectTryNumber, selectedTryNumber, taskInstan onSelectTryNumber(ti.try_number); } }} - size="sm" variant={selectedTryNumber === ti.try_number ? "surface" : "outline"} > {ti.try_number} diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx index 4ae53b0ec1024..dea3b7d929bc9 100644 --- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGButton.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Button, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Box, Button, useDisclosure } from "@chakra-ui/react"; import type { DagRunType } from "openapi-gen/requests/types.gen"; import { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -24,6 +24,7 @@ import { FiPlay } from "react-icons/fi"; import { useParams } from "react-router-dom"; import { useDagRunServiceGetDagRun } from "openapi/queries"; +import { IconButton } from "src/components/ui"; import { Menu } from "src/components/ui"; import { Tooltip } from "src/components/ui"; @@ -103,7 +104,6 @@ export const TriggerDAGButton = ({ colorPalette="brand" data-testid="trigger-dag-button" disabled={isManualRunDenied} - size="md" variant={variant} > @@ -147,7 +147,6 @@ export const TriggerDAGButton = ({ data-testid="trigger-dag-button" disabled={isManualRunDenied} onClick={handleNormalTrigger} - size="md" variant={variant} > @@ -160,7 +159,6 @@ export const TriggerDAGButton = ({ data-testid="trigger-dag-button" disabled={isManualRunDenied} onClick={onOpen} - size="md" variant={variant} > diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx index a324bf4d7df18..52a3f7eaa581e 100644 --- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx +++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx @@ -232,12 +232,7 @@ const TriggerDAGForm = ({ )} {isPaused ? ( <> - setUnpause(!unpause)} - wordBreak="break-all" - > + setUnpause(!unpause)} wordBreak="break-all"> {translate("components:triggerDag.unpause", { dagDisplayName })} diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx index 242d0f153a046..3aa26a29ebe62 100644 --- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx +++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx @@ -80,7 +80,7 @@ const TriggerDAGModal: React.FC = ({ const nameOverflowing = dagDisplayName.length > maxDisplayLength; return ( - + diff --git a/airflow-core/src/airflow/ui/src/components/ui/ButtonGroupToggle.tsx b/airflow-core/src/airflow/ui/src/components/ui/ButtonGroupToggle.tsx index 99b4b4a2826da..ff54c14cd4f03 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/ButtonGroupToggle.tsx +++ b/airflow-core/src/airflow/ui/src/components/ui/ButtonGroupToggle.tsx @@ -17,9 +17,11 @@ * under the License. */ import type { ButtonGroupProps, ButtonProps } from "@chakra-ui/react"; -import { Button, ButtonGroup, IconButton } from "@chakra-ui/react"; +import { Button, ButtonGroup } from "@chakra-ui/react"; import type { FC, ReactNode } from "react"; +import { IconButton } from "."; + export type ButtonGroupOption = { readonly dataTestId?: string; readonly disabled?: boolean; @@ -45,7 +47,7 @@ export const ButtonGroupToggle = ({ const ButtonComponent: FC = isIcon ? IconButton : Button; return ( - + {options.map((option) => { const isSelected = option.value === value; const label = typeof option.label === "function" ? option.label(isSelected) : option.label; diff --git a/airflow-core/src/airflow/ui/src/components/ui/Clipboard.tsx b/airflow-core/src/airflow/ui/src/components/ui/Clipboard.tsx index f6476144a61bf..bfe9e4db9d731 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/Clipboard.tsx +++ b/airflow-core/src/airflow/ui/src/components/ui/Clipboard.tsx @@ -17,11 +17,13 @@ * under the License. */ import type { ButtonProps, InputProps } from "@chakra-ui/react"; -import { Button, Clipboard as ChakraClipboard, IconButton, Input } from "@chakra-ui/react"; +import { Button, Clipboard as ChakraClipboard, Input } from "@chakra-ui/react"; import * as React from "react"; import { useTranslation } from "react-i18next"; import { LuCheck, LuClipboard, LuLink } from "react-icons/lu"; +import { IconButton } from "."; + const ClipboardIcon = React.forwardRef((props, ref) => ( } {...props} ref={ref}> @@ -51,7 +53,7 @@ export const ClipboardLabel = React.forwardRef((props, ref) => ( - diff --git a/airflow-core/src/airflow/ui/src/components/ui/IconButton.tsx b/airflow-core/src/airflow/ui/src/components/ui/IconButton.tsx new file mode 100644 index 0000000000000..4a26b529a01c7 --- /dev/null +++ b/airflow-core/src/airflow/ui/src/components/ui/IconButton.tsx @@ -0,0 +1,28 @@ +/*! + * 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 { IconButton as ChakraIconButton } from "@chakra-ui/react"; +import type { IconButtonProps } from "@chakra-ui/react"; +import { forwardRef } from "react"; + +// Wrapper that sets Airflow's preferred defaults. +// size="sm" is handled globally via the button recipe in theme.ts. +// variant="ghost" is set here since IconButton shares the button recipe with Button. +export const IconButton = forwardRef( + ({ variant = "ghost", ...props }, ref) => , +); diff --git a/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx b/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx index 56f8763383a4f..07981e1fb4df9 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx +++ b/airflow-core/src/airflow/ui/src/components/ui/LazyClipboard.tsx @@ -17,10 +17,11 @@ * under the License. */ import type { ButtonProps } from "@chakra-ui/react"; -import { IconButton } from "@chakra-ui/react"; import * as React from "react"; import { LuCheck, LuClipboard } from "react-icons/lu"; +import { IconButton } from "."; + type LazyClipboardProps = { readonly getValue: () => string; } & ButtonProps; diff --git a/airflow-core/src/airflow/ui/src/components/ui/Pagination/NextTrigger.tsx b/airflow-core/src/airflow/ui/src/components/ui/Pagination/NextTrigger.tsx index 5cb82c4f286e6..422b6b403e857 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/Pagination/NextTrigger.tsx +++ b/airflow-core/src/airflow/ui/src/components/ui/Pagination/NextTrigger.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Pagination as ChakraPagination, IconButton } from "@chakra-ui/react"; +import { Pagination as ChakraPagination } from "@chakra-ui/react"; import { forwardRef } from "react"; import { HiChevronRight } from "react-icons/hi2"; +import { IconButton } from ".."; import { paginationContext } from "./context"; const [, useRootProps] = paginationContext; diff --git a/airflow-core/src/airflow/ui/src/components/ui/Pagination/PrevTrigger.tsx b/airflow-core/src/airflow/ui/src/components/ui/Pagination/PrevTrigger.tsx index 2a3d3aeb3323f..0f156b14a4b90 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/Pagination/PrevTrigger.tsx +++ b/airflow-core/src/airflow/ui/src/components/ui/Pagination/PrevTrigger.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Pagination as ChakraPagination, IconButton } from "@chakra-ui/react"; +import { Pagination as ChakraPagination } from "@chakra-ui/react"; import { forwardRef } from "react"; import { HiChevronLeft } from "react-icons/hi2"; +import { IconButton } from ".."; import { paginationContext } from "./context"; const [, useRootProps] = paginationContext; diff --git a/airflow-core/src/airflow/ui/src/components/ui/ResetButton.tsx b/airflow-core/src/airflow/ui/src/components/ui/ResetButton.tsx index 0c71d1a496cb5..1228a1d29e2e9 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/ResetButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/ui/ResetButton.tsx @@ -33,7 +33,7 @@ export const ResetButton = ({ filterCount, onClearFilters }: Props) => { } return ( - diff --git a/airflow-core/src/airflow/ui/src/components/ui/index.ts b/airflow-core/src/airflow/ui/src/components/ui/index.ts index 4adadca3731ba..2c9e8edea0bfe 100644 --- a/airflow-core/src/airflow/ui/src/components/ui/index.ts +++ b/airflow-core/src/airflow/ui/src/components/ui/index.ts @@ -18,6 +18,7 @@ */ export * from "./Dialog"; +export * from "./IconButton"; export * from "./Pagination"; export * from "./Select"; export * from "./Alert"; diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx index 3e423cbc520f5..4b9e704981994 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Flex, HStack, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Box, Flex, HStack, useDisclosure } from "@chakra-ui/react"; import { useReactFlow } from "@xyflow/react"; import { useEffect, useRef, useState } from "react"; import type { PropsWithChildren, ReactNode, RefObject } from "react"; @@ -42,6 +42,7 @@ import BackfillBanner from "src/components/Banner/BackfillBanner"; import { DAGWarningsModal } from "src/components/DAGWarningsModal"; import { SearchDagsButton } from "src/components/SearchDags"; import { TriggerDAGButton } from "src/components/TriggerDag/TriggerDAGButton"; +import { IconButton } from "src/components/ui"; import { ProgressBar } from "src/components/ui"; import { Toaster } from "src/components/ui"; import { Tooltip } from "src/components/ui/Tooltip"; @@ -243,10 +244,10 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => { bg="fg.subtle" borderRadius={direction === "ltr" ? "100% 0 0 100%" : "0 100% 100% 0"} boxShadow="md" - left={direction === "rtl" ? "-5px" : undefined} + left={direction === "rtl" ? "0" : undefined} onClick={() => setIsRightPanelCollapsed(false)} position="absolute" - right={direction === "ltr" ? "-5px" : undefined} + right={direction === "ltr" ? "0" : undefined} size="2xs" top="50%" zIndex={10} @@ -376,10 +377,10 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => { bg="fg.subtle" borderRadius={direction === "ltr" ? "0 100% 100% 0" : "100% 0 0 100%"} boxShadow="md" - left={direction === "ltr" ? "-5px" : undefined} + left={direction === "ltr" ? "0" : undefined} onClick={() => setIsRightPanelCollapsed(true)} position="absolute" - right={direction === "rtl" ? "-5px" : undefined} + right={direction === "rtl" ? "0" : undefined} size="2xs" top="50%" zIndex={2} @@ -400,7 +401,6 @@ export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => { marginBottom="-1" onClick={onOpen} rounded="full" - size="md" variant="solid" > diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx index 21c9c0e41f62e..c07daaa636579 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx @@ -16,10 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { Flex, IconButton } from "@chakra-ui/react"; +import { Flex } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { FiChevronLeft, FiChevronRight, FiChevronsRight } from "react-icons/fi"; +import { IconButton } from "src/components/ui"; + type Props = { readonly hasNewerRuns: boolean; readonly hasOlderRuns: boolean; diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx index cf5e22608a80d..5e95c70186a40 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx @@ -20,7 +20,6 @@ import { Box, createListCollection, Flex, - IconButton, Popover, Portal, Select, @@ -42,6 +41,7 @@ import { useLocalStorage } from "usehooks-ts"; import { DagVersionSelect } from "src/components/DagVersionSelect"; import { DirectionDropdown } from "src/components/Graph/DirectionDropdown"; import { GraphTaskFilters } from "src/components/GraphTaskFilters"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import { type ButtonGroupOption, ButtonGroupToggle } from "src/components/ui/ButtonGroupToggle"; import type { DagView } from "src/constants/dagView"; @@ -214,9 +214,7 @@ export const PanelButtons = ({ diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx index cf670870bf703..ee791f1b25940 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx @@ -16,22 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import { - Button, - ButtonGroup, - HStack, - IconButton, - Input, - Portal, - Separator, - Text, - VStack, -} from "@chakra-ui/react"; +import { Button, ButtonGroup, HStack, Input, Portal, Separator, Text, VStack } from "@chakra-ui/react"; import { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { FiFilter, FiInfo } from "react-icons/fi"; import { useParams, useSearchParams } from "react-router-dom"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import { Menu } from "src/components/ui/Menu"; @@ -118,7 +109,6 @@ export const TaskStreamFilter = () => { @@ -183,7 +173,6 @@ export const TaskStreamFilter = () => { onClick(); } }} - size="sm" variant={active ? "solid" : "ghost"} width="100%" > @@ -240,7 +229,7 @@ export const TaskStreamFilter = () => { - + diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx index d8647fa99683b..d47195cf1c058 100644 --- a/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx @@ -18,7 +18,7 @@ */ import { Button, Heading, useDisclosure, VStack } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; -import { FiPlusCircle } from "react-icons/fi"; +import { MdAdd } from "react-icons/md"; import { Dialog } from "src/components/ui"; import { useAddConnection } from "src/queries/useAddConnection"; @@ -46,10 +46,10 @@ const AddConnectionButton = () => { return ( <> - + diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx index 4c475ca6d2824..f4442385b8dbc 100644 --- a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx @@ -73,7 +73,6 @@ const getColumns = ({ onRowSelect(row.original.connection_id, Boolean(event.checked))} /> ), @@ -83,7 +82,6 @@ const getColumns = ({ onSelectAll(Boolean(event.checked))} /> ), diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx index aca09891cf908..67a32b5c7bb47 100644 --- a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ -import { Button, Code, Flex, Heading, IconButton, Text, useDisclosure, VStack } from "@chakra-ui/react"; +import { Button, Code, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { FiTrash2 } from "react-icons/fi"; +import { IconButton } from "src/components/ui"; import { Dialog, Tooltip } from "src/components/ui"; import { useDeleteConnection } from "src/queries/useDeleteConnection"; @@ -43,14 +44,12 @@ const DeleteConnectionButton = ({ connectionId, disabled }: Props) => { colorPalette="danger" disabled={disabled} onClick={onOpen} - size="md" - variant="ghost" > - + diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx index b8c9bf4bcb324..cbf29e23b5cc6 100644 --- a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx @@ -47,13 +47,12 @@ const DeleteConnectionsButton = ({ clearSelections, deleteKeys: connectionIds }: aria-label={translate("deleteActions.button")} colorPalette="red" onClick={onOpen} - size="sm" variant="outline" > {translate("deleteActions.button")} - + diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx index 9c0257f3610f8..5a1d4cc673974 100644 --- a/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx @@ -16,11 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { Heading, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Heading, useDisclosure } from "@chakra-ui/react"; import { useTranslation } from "react-i18next"; import { FiEdit } from "react-icons/fi"; import type { ConnectionResponse } from "openapi/requests/types.gen"; +import { IconButton } from "src/components/ui"; import { Dialog, Tooltip } from "src/components/ui"; import { useEditConnection } from "src/queries/useEditConnection"; @@ -64,14 +65,12 @@ const EditConnectionButton = ({ connection, disabled }: Props) => { colorPalette="brand" disabled={disabled} onClick={onOpen} - size="md" - variant="ghost" > - + {translate("connections.edit")} diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx index e8efc9d01b437..f7851d1e2e61d 100644 --- a/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Connections/TestConnectionButton.tsx @@ -16,12 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { IconButton } from "@chakra-ui/react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { FiActivity, FiWifi, FiWifiOff } from "react-icons/fi"; import type { ConnectionResponse, ConnectionBody } from "openapi/requests/types.gen"; +import { IconButton } from "src/components/ui"; import { Tooltip } from "src/components/ui"; import { useConfig } from "src/queries/useConfig"; import { useTestConnection } from "src/queries/useTestConnection"; @@ -84,8 +84,6 @@ const TestConnectionButton = ({ connection }: Props) => { onClick={() => { mutate({ requestBody: connectionBody }); }} - size="md" - variant="ghost" > {icon} diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx index 807c3a9376991..04c04c4464eff 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, HStack, IconButton, Text } from "@chakra-ui/react"; +import { Box, HStack, Text } from "@chakra-ui/react"; import { keyframes } from "@emotion/react"; import dayjs from "dayjs"; import { useState } from "react"; @@ -27,6 +27,7 @@ import { useLocalStorage } from "usehooks-ts"; import { useCalendarServiceGetCalendar, useDagServiceGetDagDetails } from "openapi/queries"; import { ErrorAlert } from "src/components/ErrorAlert"; +import { IconButton } from "src/components/ui"; import { ButtonGroupToggle } from "src/components/ui/ButtonGroupToggle"; import { CALENDAR_GRANULARITY_KEY, CALENDAR_VIEW_MODE_KEY } from "src/constants/localStorage"; @@ -93,8 +94,6 @@ export const Calendar = () => { setSelectedDate(selectedDate.subtract(1, "year"))} - size="sm" - variant="ghost" > @@ -118,8 +117,6 @@ export const Calendar = () => { setSelectedDate(selectedDate.add(1, "year"))} - size="sm" - variant="ghost" > @@ -129,8 +126,6 @@ export const Calendar = () => { setSelectedDate(selectedDate.subtract(1, "month"))} - size="sm" - variant="ghost" > @@ -168,8 +163,6 @@ export const Calendar = () => { setSelectedDate(selectedDate.add(1, "month"))} - size="sm" - variant="ghost" > diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx index ce6fbd7e633dd..ae184c2f9fa25 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx @@ -61,7 +61,7 @@ export const AllDeadlinesModal = ({ alertMap, dagId, onClose, open }: AllDeadlin }; return ( - + {translate("overview.deadlines.title")} diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/FailedLogs.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/FailedLogs.tsx index c5ad102bbdc97..9d3bde42a6ace 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/FailedLogs.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/FailedLogs.tsx @@ -56,7 +56,6 @@ const FailedLogs = ({ bg="bg.panel" fontSize="sm" onClick={toggleWrap} - size="sm" variant="outline" > {translate(`common:wrap.${wrap ? "un" : ""}wrap`)} diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx index e4ca4e1e966fb..db3f9c3321193 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/TaskLogPreview.tsx @@ -67,7 +67,7 @@ export const TaskLogPreview = ({