This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new e0b02c9bb3a Cleanup input components (#59287)
e0b02c9bb3a is described below
commit e0b02c9bb3aa4e0bf991d85ef1a6df4fe8e6bdcd
Author: Brent Bovenzi <[email protected]>
AuthorDate: Thu Dec 11 16:50:25 2025 +0100
Cleanup input components (#59287)
* Cleanup SearchBar component
* Remove InputGroup and FileUpload components
* Fix tests
* Move to use chakras closebutton
---
.../airflow/ui/src/components/SearchBar.test.tsx | 3 +-
.../src/airflow/ui/src/components/SearchBar.tsx | 26 +++------
.../ui/src/components/ui/FileUpload/Dropzone.tsx | 43 ---------------
.../ui/src/components/ui/FileUpload/FileInput.tsx | 54 -------------------
.../ui/src/components/ui/FileUpload/Item.tsx | 61 ----------------------
.../ui/src/components/ui/FileUpload/List.tsx | 51 ------------------
.../ui/src/components/ui/FileUpload/Root.tsx | 35 -------------
.../ui/src/components/ui/FileUpload/index.ts | 34 ------------
.../airflow/ui/src/components/ui/InputGroup.tsx | 57 --------------------
.../src/airflow/ui/src/components/ui/index.ts | 1 -
.../ui/src/layouts/Details/PanelButtons.tsx | 3 +-
.../airflow/ui/src/pages/AssetsList/AssetsList.tsx | 3 +-
.../ui/src/pages/Connections/Connections.tsx | 3 +-
.../pages/Dag/Tasks/TaskFilters/TaskFilters.tsx | 3 +-
.../src/airflow/ui/src/pages/DagsList/DagsList.tsx | 3 +-
.../pages/Dashboard/Stats/DAGImportErrorsModal.tsx | 4 +-
.../Dashboard/Stats/PluginImportErrorsModal.tsx | 4 +-
.../src/airflow/ui/src/pages/Pools/Pools.tsx | 3 +-
.../ui/src/pages/TaskInstance/AssetEvents.tsx | 6 +--
.../ui/src/pages/Variables/ImportVariablesForm.tsx | 56 ++++++++++----------
.../airflow/ui/src/pages/Variables/Variables.tsx | 3 +-
21 files changed, 49 insertions(+), 407 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
b/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
index 629400ad6ee..0b149d37db6 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
+++ b/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
@@ -25,13 +25,12 @@ import { SearchBar } from "./SearchBar";
describe("Test SearchBar", () => {
it("Renders and clear button works", async () => {
- render(<SearchBar defaultValue="" onChange={vi.fn()} placeHolder="Search
Dags" />, {
+ render(<SearchBar defaultValue="" onChange={vi.fn()} placeholder="Search
Dags" />, {
wrapper: Wrapper,
});
const input = screen.getByTestId("search-dags");
- expect(screen.getByText("search.advanced")).toBeDefined();
expect(screen.queryByTestId("clear-search")).toBeNull();
fireEvent.change(input, { target: { value: "search" } });
diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
index b0200a74040..21bfca4bf50 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
+++ b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Button, Input, Kbd, type ButtonProps } from "@chakra-ui/react";
+import { CloseButton, Input, InputGroup, Kbd, type InputGroupProps } from
"@chakra-ui/react";
import { useState, useRef, type ChangeEvent } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { useTranslation } from "react-i18next";
@@ -25,28 +25,21 @@ import { useDebouncedCallback } from "use-debounce";
import { getMetaKey } from "src/utils";
-import { CloseButton, InputGroup, type InputGroupProps } from "./ui";
-
const debounceDelay = 200;
type Props = {
- readonly buttonProps?: ButtonProps;
readonly defaultValue: string;
- readonly groupProps?: InputGroupProps;
- readonly hideAdvanced?: boolean;
readonly hotkeyDisabled?: boolean;
readonly onChange: (value: string) => void;
- readonly placeHolder: string;
-};
+ readonly placeholder: string;
+} & Omit<InputGroupProps, "children" | "onChange">;
export const SearchBar = ({
- buttonProps,
defaultValue,
- groupProps,
- hideAdvanced = false,
hotkeyDisabled = false,
onChange,
- placeHolder,
+ placeholder,
+ ...props
}: Props) => {
const handleSearchChange = useDebouncedCallback((val: string) =>
onChange(val), debounceDelay);
const searchRef = useRef<HTMLInputElement>(null);
@@ -68,8 +61,8 @@ export const SearchBar = ({
return (
<InputGroup
- {...groupProps}
colorPalette="brand"
+ {...props}
endElement={
<>
{Boolean(value) ? (
@@ -84,11 +77,6 @@ export const SearchBar = ({
size="xs"
/>
) : undefined}
- {Boolean(hideAdvanced) ? undefined : (
- <Button fontWeight="normal" height={28} variant="ghost"
{...buttonProps}>
- {translate("search.advanced")}
- </Button>
- )}
{!hotkeyDisabled && (
<Kbd size="sm">
{metaKey}
@@ -102,7 +90,7 @@ export const SearchBar = ({
<Input
data-testid="search-dags"
onChange={onSearchChange}
- placeholder={placeHolder}
+ placeholder={placeholder}
pr={150}
ref={searchRef}
value={value}
diff --git
a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Dropzone.tsx
b/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Dropzone.tsx
deleted file mode 100644
index d509e37c651..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Dropzone.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*!
- * 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 { FileUpload as ChakraFileUpload, Icon, Text } from "@chakra-ui/react";
-import { forwardRef } from "react";
-import { LuUpload } from "react-icons/lu";
-
-export type FileUploadDropzoneProps = {
- readonly description?: React.ReactNode;
- readonly label: React.ReactNode;
-} & ChakraFileUpload.DropzoneProps;
-
-export const Dropzone = forwardRef<HTMLInputElement,
FileUploadDropzoneProps>((props, ref) => {
- const { children, description, label, ...rest } = props;
-
- return (
- <ChakraFileUpload.Dropzone ref={ref} {...rest}>
- <Icon color="fg.muted" fontSize="xl">
- <LuUpload />
- </Icon>
- <ChakraFileUpload.DropzoneContent>
- <div>{label}</div>
- {description ?? <Text color="fg.muted">{description}</Text>}
- </ChakraFileUpload.DropzoneContent>
- {children}
- </ChakraFileUpload.Dropzone>
- );
-});
diff --git
a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/FileInput.tsx
b/airflow-core/src/airflow/ui/src/components/ui/FileUpload/FileInput.tsx
deleted file mode 100644
index d49f6e006c6..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/FileInput.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*!
- * 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 type { ButtonProps, RecipeProps } from "@chakra-ui/react";
-import { Button, FileUpload as ChakraFileUpload, Span, useRecipe } from
"@chakra-ui/react";
-import { forwardRef } from "react";
-import { useTranslation } from "react-i18next";
-
-type Assign<T, U> = Omit<T, keyof U> & U;
-
-type FileInputProps = {
- readonly placeholder?: React.ReactNode;
-} & Assign<ButtonProps, RecipeProps<"input">>;
-
-export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>((props,
ref) => {
- const { t: translate } = useTranslation("components");
- const inputRecipe = useRecipe({ key: "input" });
- const [recipeProps, restProps] = inputRecipe.splitVariantProps(props);
- const { placeholder = "Select file(s)", ...rest } = restProps;
-
- return (
- <ChakraFileUpload.Trigger asChild>
- <Button py="0" ref={ref} unstyled {...rest}
css={[inputRecipe(recipeProps), props.css]}>
- <ChakraFileUpload.Context>
- {({ acceptedFiles }) => {
- if (acceptedFiles.length === 1) {
- return <span>{acceptedFiles[0]?.name}</span>;
- }
- if (acceptedFiles.length > 1) {
- return <span>{translate("fileUpload.files_other", { count:
acceptedFiles.length })}</span>;
- }
-
- return <Span color="fg.subtle">{placeholder}</Span>;
- }}
- </ChakraFileUpload.Context>
- </Button>
- </ChakraFileUpload.Trigger>
- );
-});
diff --git a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Item.tsx
b/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Item.tsx
deleted file mode 100644
index e6dd5846113..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Item.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/*!
- * 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 { FileUpload as ChakraFileUpload, Icon, IconButton } from
"@chakra-ui/react";
-import { forwardRef } from "react";
-import { LuFile, LuX } from "react-icons/lu";
-
-type VisibilityProps = {
- readonly clearable?: boolean;
- readonly showSize?: boolean;
-};
-
-type FileUploadItemProps = {
- readonly file: File;
-} & VisibilityProps;
-
-export const Item = forwardRef<HTMLLIElement, FileUploadItemProps>((props,
ref) => {
- const { clearable, file, showSize } = props;
-
- return (
- <ChakraFileUpload.Item file={file} ref={ref}>
- <ChakraFileUpload.ItemPreview asChild>
- <Icon color="fg.muted" fontSize="lg">
- <LuFile />
- </Icon>
- </ChakraFileUpload.ItemPreview>
-
- {showSize ? (
- <ChakraFileUpload.ItemContent>
- <ChakraFileUpload.ItemName />
- <ChakraFileUpload.ItemSizeText />
- </ChakraFileUpload.ItemContent>
- ) : (
- <ChakraFileUpload.ItemName flex="1" />
- )}
-
- {clearable ? (
- <ChakraFileUpload.ItemDeleteTrigger asChild>
- <IconButton color="fg.muted" size="xs" variant="ghost">
- <LuX />
- </IconButton>
- </ChakraFileUpload.ItemDeleteTrigger>
- ) : undefined}
- </ChakraFileUpload.Item>
- );
-});
diff --git a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/List.tsx
b/airflow-core/src/airflow/ui/src/components/ui/FileUpload/List.tsx
deleted file mode 100644
index 57f8e11e723..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/List.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*!
- * 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 { FileUpload as ChakraFileUpload, useFileUploadContext } from
"@chakra-ui/react";
-import { forwardRef } from "react";
-
-import { Item } from "./Item";
-
-type VisibilityProps = {
- readonly clearable?: boolean;
- readonly showSize?: boolean;
-};
-
-type FileUploadListProps = {
- readonly files?: Array<File>;
-} & ChakraFileUpload.ItemGroupProps &
- VisibilityProps;
-
-export const List = forwardRef<HTMLUListElement, FileUploadListProps>((props,
ref) => {
- const { clearable, files, showSize, ...rest } = props;
-
- const fileUpload = useFileUploadContext();
- const acceptedFiles = files ?? fileUpload.acceptedFiles;
-
- if (acceptedFiles.length === 0) {
- return undefined;
- }
-
- return (
- <ChakraFileUpload.ItemGroup ref={ref} {...rest}>
- {acceptedFiles.map((file) => (
- <Item clearable={clearable} file={file} key={file.name}
showSize={showSize} />
- ))}
- </ChakraFileUpload.ItemGroup>
- );
-});
diff --git a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Root.tsx
b/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Root.tsx
deleted file mode 100644
index 5eca9ad9c70..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/Root.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*!
- * 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 { FileUpload as ChakraFileUpload } from "@chakra-ui/react";
-import { forwardRef } from "react";
-
-export type FileUploadRootProps = {
- readonly inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-} & ChakraFileUpload.RootProps;
-
-export const Root = forwardRef<HTMLInputElement, FileUploadRootProps>((props,
ref) => {
- const { children, inputProps, ...rest } = props;
-
- return (
- <ChakraFileUpload.Root {...rest}>
- <ChakraFileUpload.HiddenInput ref={ref} {...inputProps} />
- {children}
- </ChakraFileUpload.Root>
- );
-});
diff --git a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/index.ts
b/airflow-core/src/airflow/ui/src/components/ui/FileUpload/index.ts
deleted file mode 100644
index c5bf20214be..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/FileUpload/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*!
- * 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 { FileUpload as ChakraFileUpload } from "@chakra-ui/react";
-
-import { Dropzone } from "./Dropzone";
-import { FileInput } from "./FileInput";
-import { Item } from "./Item";
-import { List } from "./List";
-import { Root } from "./Root";
-
-export const FileUpload = {
- ...ChakraFileUpload,
- Dropzone,
- FileInput,
- Item,
- List,
- Root,
-};
diff --git a/airflow-core/src/airflow/ui/src/components/ui/InputGroup.tsx
b/airflow-core/src/airflow/ui/src/components/ui/InputGroup.tsx
deleted file mode 100644
index ff8bdf9d662..00000000000
--- a/airflow-core/src/airflow/ui/src/components/ui/InputGroup.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*!
- * 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.
- */
-
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
-
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-import type { BoxProps, InputElementProps } from "@chakra-ui/react";
-import { Group, InputElement } from "@chakra-ui/react";
-import { cloneElement, forwardRef } from "react";
-
-export type InputGroupProps = {
- readonly children: React.ReactElement;
- readonly endElement?: React.ReactNode;
- readonly endElementProps?: InputElementProps;
- readonly startElement?: React.ReactNode;
- readonly startElementProps?: InputElementProps;
-} & BoxProps;
-
-export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>((props,
ref) => {
- const { children, endElement, endElementProps, startElement,
startElementProps, ...rest } = props;
-
- return (
- <Group ref={ref} {...rest}>
- {startElement ? (
- <InputElement pointerEvents="none" {...startElementProps}>
- {startElement}
- </InputElement>
- ) : undefined}
- {cloneElement(children, {
- ...(startElement && { ps: "calc(var(--input-height) - 6px)" }),
- ...(endElement && { pe: "calc(var(--input-height) - 6px)" }),
- ...children.props,
- })}
- {endElement ? (
- <InputElement placement="end" {...endElementProps}>
- {endElement}
- </InputElement>
- ) : undefined}
- </Group>
- );
-});
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 e39d15dd09d..352a3626e81 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/index.ts
+++ b/airflow-core/src/airflow/ui/src/components/ui/index.ts
@@ -22,7 +22,6 @@ export * from "./Pagination";
export * from "./Select";
export * from "./Alert";
export * from "./CloseButton";
-export * from "./InputGroup";
export * from "./Switch";
export * from "./Tooltip";
export * from "./ProgressBar";
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 c0ca83fa70e..f6d72f0ab5f 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
@@ -464,10 +464,9 @@ export const PanelButtons = ({
</Text>
<SearchBar
defaultValue={triggeringUserFilter ?? ""}
- hideAdvanced
hotkeyDisabled
onChange={handleTriggeringUserChange}
-
placeHolder={translate("common:dagRun.triggeringUser")}
+
placeholder={translate("common:dagRun.triggeringUser")}
/>
</VStack>
{shouldShowToggleButtons ? (
diff --git a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
index 0d041b23a0d..d17ed7c14e4 100644
--- a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx
@@ -153,10 +153,9 @@ export const AssetsList = () => {
<>
<VStack alignItems="none">
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={namePattern}
onChange={handleSearchChange}
- placeHolder={translate("searchPlaceholder")}
+ placeholder={translate("searchPlaceholder")}
/>
<Flex alignItems="center" justifyContent="space-between">
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 0a32dc613a9..771ee24b0a5 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx
@@ -179,10 +179,9 @@ export const Connections = () => {
<>
<VStack alignItems="none">
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={connectionIdPattern ?? ""}
onChange={handleSearchChange}
- placeHolder={translate("connections.searchPlaceholder")}
+ placeholder={translate("connections.searchPlaceholder")}
/>
<HStack gap={4} mt={2}>
<Spacer />
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx
index 3abd8b9e238..9cbc141a0da 100644
---
a/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx
@@ -93,10 +93,9 @@ export const TaskFilters = ({ tasksData }: { readonly
tasksData: TaskCollectionR
<HStack justifyContent="space-between" style={{ marginBottom: "5px" }}>
<SearchBar
defaultValue={taskNamePattern}
- hideAdvanced
hotkeyDisabled
onChange={handleSearchChange}
- placeHolder={translate("searchTasks")}
+ placeholder={translate("searchTasks")}
/>
<Box>
<ResetButton filterCount={searchParams.size}
onClearFilters={onClearFilters} />
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
index 264964afa68..7acb69a4c1e 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -291,10 +291,9 @@ export const DagsList = () => {
<DagsLayout>
<VStack alignItems="none">
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={dagDisplayNamePattern}
onChange={handleSearchChange}
- placeHolder={translate("dags:search.dags")}
+ placeholder={translate("dags:search.dags")}
/>
<DagsFilters />
<HStack justifyContent="space-between">
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
index f27756003fb..b178415f672 100644
---
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
@@ -71,11 +71,9 @@ export const DAGImportErrorsModal:
React.FC<ImportDAGErrorModalProps> = ({ onClo
<Heading>{translate("importErrors.dagImportError", { count:
data?.total_entries ?? 0 })}</Heading>
</HStack>
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={searchQuery}
- hideAdvanced
onChange={handleSearchChange}
- placeHolder={translate("importErrors.searchByFile")}
+ placeholder={translate("importErrors.searchByFile")}
/>
</Dialog.Header>
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
index 905a023a22c..2f2c2f90394 100644
---
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
@@ -72,11 +72,9 @@ export const PluginImportErrorsModal:
React.FC<PluginImportErrorsModalProps> = (
<Heading>{translate("plugins.importError_one")}</Heading>
</HStack>
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={searchQuery}
- hideAdvanced
onChange={setSearchQuery}
- placeHolder={translate("plugins.searchPlaceholder")}
+ placeholder={translate("plugins.searchPlaceholder")}
/>
</Dialog.Header>
diff --git a/airflow-core/src/airflow/ui/src/pages/Pools/Pools.tsx
b/airflow-core/src/airflow/ui/src/pages/Pools/Pools.tsx
index 8ab1cbfb493..132cb3ed298 100644
--- a/airflow-core/src/airflow/ui/src/pages/Pools/Pools.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Pools/Pools.tsx
@@ -93,10 +93,9 @@ export const Pools = () => {
<>
<ErrorAlert error={error} />
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={poolNamePattern ?? ""}
onChange={handleSearchChange}
- placeHolder={translate("pools.searchPlaceholder")}
+ placeholder={translate("pools.searchPlaceholder")}
/>
<HStack gap={4} mt={4}>
<Select.Root
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstance/AssetEvents.tsx
b/airflow-core/src/airflow/ui/src/pages/TaskInstance/AssetEvents.tsx
index 0794021fa0f..67ec62e894e 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/AssetEvents.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/AssetEvents.tsx
@@ -18,6 +18,7 @@
*/
import { Box } from "@chakra-ui/react";
import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
import { useParams, useSearchParams } from "react-router-dom";
import { useAssetServiceGetAssetEvents,
useTaskInstanceServiceGetMappedTaskInstance } from "openapi/queries";
@@ -30,6 +31,7 @@ import { isStatePending, useAutoRefresh } from "src/utils";
export const AssetEvents = () => {
const { dagId = "", mapIndex = "-1", runId = "", taskId = "" } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
+ const { t: translate } = useTranslation(["assets"]);
const [assetNameSearch, setAssetNameSearch] = useState(
searchParams.get(SearchParamsKeys.NAME_PATTERN) ?? "",
@@ -107,12 +109,10 @@ export const AssetEvents = () => {
<Box>
<Box maxWidth="500px" mb={4}>
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={assetNameSearch}
- hideAdvanced
hotkeyDisabled
onChange={handleSearchChange}
- placeHolder="Search assets by name..."
+ placeholder={translate("searchPlaceholder")}
/>
</Box>
<AssetEventsTable
diff --git
a/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
b/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
index 5f863f356ef..d296b00215c 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Center, HStack, Spinner } from "@chakra-ui/react";
+import { Box, Center, FileUpload, HStack, Spinner } from "@chakra-ui/react";
import type { TFunction } from "i18next";
import { useState } from "react";
import { useTranslation } from "react-i18next";
@@ -25,9 +25,7 @@ import { LuFileUp } from "react-icons/lu";
import type { BulkBody_VariableBody_ } from "openapi/requests/types.gen";
import { ErrorAlert } from "src/components/ErrorAlert";
-import { Button, CloseButton, InputGroup } from "src/components/ui";
-import { FileUpload } from "src/components/ui/FileUpload";
-import { FileInput } from "src/components/ui/FileUpload/FileInput";
+import { Button, CloseButton } from "src/components/ui";
import { RadioCardItem, RadioCardLabel, RadioCardRoot } from
"src/components/ui/RadioCard";
import { useImportVariables } from "src/queries/useImportVariables";
@@ -126,32 +124,36 @@ const ImportVariablesForm = ({ onClose }:
ImportVariablesFormProps) => {
}}
required
>
+ <FileUpload.HiddenInput />
<FileUpload.Label fontSize="md" mb={3}>
{translate("variables.import.upload")}
</FileUpload.Label>
- <InputGroup
- endElement={
- <FileUpload.ClearTrigger asChild>
- <CloseButton
- color="fg.subtle"
- focusRingWidth="2px"
- focusVisibleRing="inside"
- me="-1"
- onClick={() => {
- setError(undefined);
- setFileContent(undefined);
- }}
- pointerEvents="auto"
- size="xs"
- variant="plain"
- />
- </FileUpload.ClearTrigger>
- }
- startElement={<LuFileUp />}
- w="full"
- >
- <FileInput
placeholder={translate("variables.import.uploadPlaceholder")} />
- </InputGroup>
+ <FileUpload.Trigger asChild>
+ <Button variant="outline">
+ <LuFileUp /> {translate("variables.import.uploadPlaceholder")}
+ </Button>
+ </FileUpload.Trigger>
+ <FileUpload.ItemGroup>
+ <FileUpload.Context>
+ {({ acceptedFiles }) =>
+ acceptedFiles.map((file) => (
+ <FileUpload.Item file={file} key={file.name}>
+ <FileUpload.ItemName />
+ <FileUpload.ItemSizeText />
+ <FileUpload.ItemDeleteTrigger
+ asChild
+ onClick={() => {
+ setError(undefined);
+ setFileContent(undefined);
+ }}
+ >
+ <CloseButton size="xs" variant="ghost" />
+ </FileUpload.ItemDeleteTrigger>
+ </FileUpload.Item>
+ ))
+ }
+ </FileUpload.Context>
+ </FileUpload.ItemGroup>
{isParsing ? (
<Center mt={2}>
<Spinner color="brand.solid" marginRight={2} size="sm" /> Parsing
file...
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
index 9f9bc885276..4271ebbc8d8 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
@@ -166,10 +166,9 @@ export const Variables = () => {
<>
<VStack alignItems="none">
<SearchBar
- buttonProps={{ disabled: true }}
defaultValue={variableKeyPattern ?? ""}
onChange={handleSearchChange}
- placeHolder={translate("variables.searchPlaceholder")}
+ placeholder={translate("variables.searchPlaceholder")}
/>
<HStack gap={4} mt={2}>
<ImportVariablesButton disabled={selectedRows.size > 0} />
