This is an automated email from the ASF dual-hosted git repository.
vatsrahul1001 pushed a commit to branch v3-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit adba4e458ff8a34faa04869195bb3821c0d95f40
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Wed Aug 12 12:52:16 2026 -0400
[v3-3-test] Refactor AdvancedSearchToggle and SearchBar components for
improved clarity and functionality (#71470) (#71501)
(cherry picked from commit a23f773fb7cb98caa6c57d6c39332cb22dfe1d2a)
Co-authored-by: Ryan Hamilton <[email protected]>
---
.../ui/src/components/AdvancedSearchToggle.tsx | 73 +++++++++++-----------
.../src/airflow/ui/src/components/SearchBar.tsx | 56 +++++++----------
2 files changed, 58 insertions(+), 71 deletions(-)
diff --git
a/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx
b/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx
index 3a3053c319a..1656ebf263b 100644
--- a/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx
+++ b/airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx
@@ -39,43 +39,6 @@ export const AdvancedSearchToggle = ({
}: AdvancedSearchToggleProps) => {
const { t: translate } = useTranslation("common");
- const button =
- variant === "addon" ? (
- <Box
- alignItems="center"
- alignSelf="stretch"
- aria-label="Toggle match-anywhere search"
- aria-pressed={enabled}
- as="button"
- bg={enabled ? "colorPalette.solid" : "gray.muted"}
- borderRightRadius="full"
- color={enabled ? "colorPalette.contrast" : "colorPalette.fg"}
- colorPalette={enabled ? "brand" : "gray"}
- cursor="pointer"
- data-testid="advanced-search-toggle"
- display="flex"
- onClick={() => onToggle(!enabled)}
- // Keep focus on the FilterPill input so toggling does not collapse
the pill.
- onMouseDown={(event) => event.preventDefault()}
- px={3}
- >
- <LuRegex />
- </Box>
- ) : (
- <IconButton
- aria-label="Toggle match-anywhere search"
- aria-pressed={enabled}
- data-testid="advanced-search-toggle"
- flexShrink={0}
- onClick={() => onToggle(!enabled)}
- onMouseDown={(event) => event.preventDefault()}
- size={size}
- variant={enabled ? "solid" : "outline"}
- >
- <LuRegex />
- </IconButton>
- );
-
return (
<Tooltip
content={
@@ -88,7 +51,41 @@ export const AdvancedSearchToggle = ({
portalled
showArrow
>
- {button}
+ {variant === "addon" ? (
+ <Box
+ alignItems="center"
+ alignSelf="stretch"
+ aria-label="Toggle match-anywhere search"
+ aria-pressed={enabled}
+ as="button"
+ bg={enabled ? "colorPalette.solid" : "gray.muted"}
+ borderRightRadius="full"
+ color={enabled ? "colorPalette.contrast" : "colorPalette.fg"}
+ colorPalette={enabled ? "brand" : "gray"}
+ cursor="pointer"
+ data-testid="advanced-search-toggle"
+ display="flex"
+ onClick={() => onToggle(!enabled)}
+ // Keep focus on the FilterPill input so toggling does not collapse
the pill.
+ onMouseDown={(event) => event.preventDefault()}
+ px={3}
+ >
+ <LuRegex />
+ </Box>
+ ) : (
+ <IconButton
+ aria-label="Toggle match-anywhere search"
+ aria-pressed={enabled}
+ data-testid="advanced-search-toggle"
+ flexShrink={0}
+ onClick={() => onToggle(!enabled)}
+ onMouseDown={(event) => event.preventDefault()}
+ size={size}
+ variant={enabled ? "solid" : "ghost"}
+ >
+ <LuRegex />
+ </IconButton>
+ )}
</Tooltip>
);
};
diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
index 57981808c62..d16251af8e3 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
+++ b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
@@ -16,10 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { CloseButton, HStack, Input, InputGroup, Kbd, type InputGroupProps }
from "@chakra-ui/react";
+import { Box, Icon, Input, InputGroup, type InputGroupProps } from
"@chakra-ui/react";
import { useEffect, useRef, useState, type ChangeEvent } from "react";
import { useTranslation } from "react-i18next";
-import { FiSearch } from "react-icons/fi";
+import { FiSearch, FiX } from "react-icons/fi";
import { useDebouncedCallback } from "use-debounce";
import { AdvancedSearchToggle, type AdvancedSearchToggleProps } from
"src/components/AdvancedSearchToggle";
@@ -27,6 +27,8 @@ import { SHORTCUTS } from "src/context/keyboardShortcuts";
import { useShortcut } from "src/hooks/useShortcut";
import { getMetaKey } from "src/utils";
+import { IconButton } from "./ui";
+
const debounceDelay = 200;
type AdvancedSearchProps = Omit<AdvancedSearchToggleProps, "size">;
@@ -83,49 +85,37 @@ export const SearchBar = ({
options: { enabled: !hotkeyDisabled, preventDefault: true },
});
- const inputGroup = (
+ return (
<InputGroup
colorPalette="brand"
{...props}
endElement={
- <>
- {Boolean(value) ? (
- <CloseButton
- aria-label={translate("search.clear")}
- data-testid="clear-search"
- onClick={clearSearch}
- size="xs"
- />
- ) : undefined}
- {!hotkeyDisabled && (
- <Kbd size="sm">
- {metaKey}
- {translate("search.hotkey")}
- </Kbd>
- )}
- </>
+ Boolean(value) || advancedSearch ? (
+ <Box alignItems="center" bg="bg" display="flex" gap={1} mr={-2}>
+ {Boolean(value) ? (
+ <IconButton
+ data-testid="clear-search"
+ label={translate("search.clear")}
+ onClick={clearSearch}
+ size="xs"
+ variant="ghost"
+ >
+ <FiX />
+ </IconButton>
+ ) : undefined}
+ {advancedSearch ? <AdvancedSearchToggle size="xs"
{...advancedSearch} /> : undefined}
+ </Box>
+ ) : undefined
}
- startElement={<FiSearch />}
+ startElement={<Icon as={FiSearch} color="fg.subtle" />}
>
<Input
data-testid="search-dags"
onChange={onSearchChange}
- placeholder={placeholder}
- pr={150}
+ placeholder={`${placeholder}${hotkeyDisabled ? undefined : `
(${metaKey}${translate("search.hotkey")})`}`}
ref={searchRef}
value={value}
/>
</InputGroup>
);
-
- if (!advancedSearch) {
- return inputGroup;
- }
-
- return (
- <HStack alignItems="center" gap={2}>
- {inputGroup}
- <AdvancedSearchToggle {...advancedSearch} />
- </HStack>
- );
};
