apache · bbovenzi · Sep 10, 2025 · Aug 25, 2025 · Aug 25, 2025 · Aug 25, 2025
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];
@@ -99,18 +99,7 @@
  "any": "Any",
  "or": "OR"
  },
- "filters": {
- "dagDisplayNamePlaceholder": "Filter by Dag",
- "keyPlaceholder": "Filter by XCom key",
- "logicalDateFromPlaceholder": "Logical Date From",
- "logicalDateToPlaceholder": "Logical Date To",
- "mapIndexPlaceholder": "Filter by Map Index",
- "runAfterFromPlaceholder": "Run After From",
- "runAfterToPlaceholder": "Run After To",
- "runIdPlaceholder": "Filter by Run ID",
- "taskIdPlaceholder": "Filter by Task ID",
- "triggeringUserPlaceholder": "Filter by triggering user"
- },
+ "filter": "Filter",
  "logicalDate": "Logical Date",
  "logout": "Logout",
  "logoutConfirmation": "You are about to logout from the application.",

@@ -0,0 +1,172 @@
+/*!
+ * 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 { Button, HStack } from "@chakra-ui/react";
+import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { MdAdd, MdClear } from "react-icons/md";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Menu } from "src/components/ui";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import { DateFilter } from "./filters/DateFilter";
+import { NumberFilter } from "./filters/NumberFilter";
+import { TextSearchFilter } from "./filters/TextSearchFilter";
+import type { FilterBarProps, FilterConfig, FilterState, FilterValue } from "./types";
+
+const defaultInitialValues: Record<string, FilterValue> = {};
+
+const getFilterIcon = (config: FilterConfig) => config.icon ?? getDefaultFilterIcon(config.type);
+
+export const FilterBar = ({
+ configs,
+ initialValues = defaultInitialValues,
+ maxVisibleFilters = 10,
+ onFiltersChange,
+}: FilterBarProps) => {
+ const { t: translate } = useTranslation(["admin", "common"]);
+ const [filters, setFilters] = useState<Array<FilterState>>(() =>
+ Object.entries(initialValues)
+ .filter(([, value]) => value !== null && value !== undefined && value !== "")
+ .map(([key, value]) => {
+ const config = configs.find((con) => con.key === key);
+
+ if (!config) {
+ throw new Error(`Filter config not found for key: ${key}`);
+ }
+
+ return {
+ config,
+ id: `${key}-${Date.now()}`,
+ value,
+ };
+ }),
+ );
+
+ const debouncedOnFiltersChange = useDebouncedCallback((filtersRecord: Record<string, FilterValue>) => {
+ onFiltersChange(filtersRecord);
+ }, 100);
+
+ const updateFiltersRecord = useCallback(
+ (updatedFilters: Array<FilterState>) => {
+ const filtersRecord = updatedFilters.reduce<Record<string, FilterValue>>((accumulator, filter) => {
+ if (filter.value !== null && filter.value !== undefined && filter.value !== "") {
+ accumulator[filter.config.key] = filter.value;
+ }
+
+ return accumulator;
+ }, {});
+
+ debouncedOnFiltersChange(filtersRecord);
+ },
+ [debouncedOnFiltersChange],
+ );
+
+ const addFilter = (config: FilterConfig) => {
+ const newFilter: FilterState = {
+ config,
+ id: `${config.key}-${Date.now()}`,
+ value: config.defaultValue ?? "",
+ };
+
+ const updatedFilters = [...filters, newFilter];
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const updateFilter = (id: string, value: FilterValue) => {
+ const updatedFilters = filters.map((filter) => (filter.id === id ? { ...filter, value } : filter));
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const removeFilter = (id: string) => {
+ const updatedFilters = filters.filter((filter) => filter.id !== id);
+
+ setFilters(updatedFilters);
+ updateFiltersRecord(updatedFilters);
+ };
+
+ const resetFilters = () => {
+ setFilters([]);
+ onFiltersChange({});
+ };
+
+ const availableConfigs = configs.filter(
+ (config) => !filters.some((filter) => filter.config.key === config.key),
+ );
+
+ const renderFilter = (filter: FilterState) => {
+ const props = {
+ filter,
+ onChange: (value: FilterValue) => updateFilter(filter.id, value),
+ onRemove: () => removeFilter(filter.id),
+ };
+
+ switch (filter.config.type) {
+ case "date":
+ return <DateFilter key={filter.id} {...props} />;
+ case "number":
+ return <NumberFilter key={filter.id} {...props} />;
+ case "text":
+ return <TextSearchFilter key={filter.id} {...props} />;
+ default:
+ return undefined;
+ }
+ };
+
+ return (
+ <HStack gap={2} wrap="wrap">
+ {filters.slice(0, maxVisibleFilters).map(renderFilter)}
+ {availableConfigs.length > 0 && (
+ <Menu.Root>
+ <Menu.Trigger asChild>
+ <Button
+ _hover={{ bg: "colorPalette.subtle" }}
+ bg="gray.muted"
+ borderRadius="full"
+ variant="outline"
+ >
+ <MdAdd />
+ {translate("common:filter")}
+ </Button>
+ </Menu.Trigger>
+ <Menu.Content>
+ {availableConfigs.map((config) => (
+ <Menu.Item key={config.key} onClick={() => addFilter(config)} value={config.key}>
+ <HStack gap={2}>
+ {getFilterIcon(config)}
+ {config.label}
+ </HStack>
+ </Menu.Item>
+ ))}
+ </Menu.Content>
+ </Menu.Root>
+ )}
+ {filters.length > 0 && (
+ <Button borderRadius="full" colorPalette="gray" onClick={resetFilters} size="sm" variant="outline">
+ <MdClear />
+ {translate("admin:formActions.reset")}
+ </Button>
+ )}
+ </HStack>
+ );
+};
@@ -0,0 +1,161 @@
+/*!
+ * 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 { Box, HStack } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
+
+import { getDefaultFilterIcon } from "./defaultIcons";
+import type { FilterState, FilterValue } from "./types";
+
+type FilterPillProps = {
+ readonly children: React.ReactNode;
+ readonly displayValue: string;
+ readonly filter: FilterState;
+ readonly hasValue: boolean;
+ readonly onChange: (value: FilterValue) => void;
+ readonly onRemove: () => void;
+};
+
+export const FilterPill = ({
+ children,
+ displayValue,
+ filter,
+ hasValue,
+ onChange,
+ onRemove,
+}: FilterPillProps) => {
+ const isEmpty = filter.value === null || filter.value === undefined || String(filter.value).trim() === "";
+ const [isEditing, setIsEditing] = useState(isEmpty);
+ const inputRef = useRef<HTMLInputElement>(null);
+ const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+ const handlePillClick = () => setIsEditing(true);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === "Escape") {
+ setIsEditing(false);
+ }
+ };
+
+ const handleBlur = () => {
+ blurTimeoutRef.current = setTimeout(() => setIsEditing(false), 150);
+ };
+
+ const handleFocus = () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ blurTimeoutRef.current = undefined;
+ }
+ };
+
+ useEffect(() => {
+ if (isEditing && inputRef.current) {
+ const input = inputRef.current;
+ const focusInput = () => {
+ input.focus();
+ try {
+ input.select();
+ } catch {
+ // NumberInputField doesn't support select()
+ }
+ };
+
+ requestAnimationFrame(focusInput);
+ }
+ }, [isEditing]);
+
+ useEffect(
+ () => () => {
+ if (blurTimeoutRef.current) {
+ clearTimeout(blurTimeoutRef.current);
+ }
+ },
+ [],
+ );
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onBlur: handleBlur,
+ onChange,
+ onFocus: handleFocus,
+ onKeyDown: handleKeyDown,
+ ref: inputRef,
+ ...child.props,
+ } as Record<string, unknown>);
+ }
+
+ return child;
+ });
+
+ if (isEditing) {
+ return childrenWithProps;
+ }
+
+ return (
+ <Box
+ _hover={{ bg: "colorPalette.subtle" }}
+ as="button"
+ bg={hasValue ? "blue.muted" : "gray.muted"}
+ borderRadius="full"
+ color="colorPalette.fg"
+ colorPalette={hasValue ? "blue" : "gray"}
+ cursor="pointer"
+ display="flex"
+ fontSize="sm"
+ fontWeight="medium"
+ h="10"
+ onClick={handlePillClick}
+ px={4}
+ >
+ <HStack align="center" gap={1}>
+ {filter.config.icon ?? getDefaultFilterIcon(filter.config.type)}
+ <Box flex="1" px={2} py={2}>
+ {filter.config.label}: {displayValue}
+ </Box>
+
+ <Box
+ _hover={{
+ bg: "gray.100",
+ color: "gray.600",
+ }}
+ alignItems="center"
+ aria-label={`Remove ${filter.config.label} filter`}
+ bg="transparent"
+ borderRadius="full"
+ color="gray.400"
+ cursor="pointer"
+ display="flex"
+ h={6}
+ justifyContent="center"
+ mr={1}
+ onClick={(event) => {
+ event.stopPropagation();
+ onRemove();
+ }}
+ transition="all 0.2s"
+ w={6}
+ >
+ <MdClose size={16} />
+ </Box>
+ </HStack>
+ </Box>
+ );
+};
@@ -0,0 +1,29 @@
+/*!
+ * 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 { MdCalendarToday, MdNumbers, MdTextFields } from "react-icons/md";
+
+import type { FilterConfig } from "./types";
+
+export const defaultFilterIcons = {
+ date: <MdCalendarToday />,
+ number: <MdNumbers />,
+ text: <MdTextFields />,
+} as const;
+
+export const getDefaultFilterIcon = (type: FilterConfig["type"]) => defaultFilterIcons[type];