Add reusable FilterBar component for date, number, text input

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json

@@ -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.",

airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx

@@ -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>
+  );
+};

airflow-core/src/airflow/ui/src/components/FilterBar/FilterPill.tsx

@@ -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>
+  );
+};

airflow-core/src/airflow/ui/src/components/FilterBar/defaultIcons.tsx

@@ -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];