Add reusable FilterBar component for date, number, text input #54895

RoyLee1224 · 2025-08-25T04:31:32Z

Why

As mentioned in #54049 (comment), the filters take up too much screen space. To address this, this PR introduces a new, reusable "filter pill" component design for date, number, text input.

I would appreciate any early feedback on the overall design and direction. All comments and suggestions are welcome.

What

Add & Edit: Click + Filter to select a filter type from the dropdown menu. A new filter pill appears and is automatically focused. You can also click on any existing pill to edit its value.
Confirm & Cancel: Once you're done typing, you can:
- Press Enter to confirm the value and apply the filter.
- Press Esc or click anywhere outside the input area to cancel and exit editing mode.
Delete:
- Click the x icon on any pill to remove that specific filter.
- Click Reset button to clear all active filters at once.

Screenshots

filterPill.mp4

TO-DO

Working on resolving an issue with the NumberFilter where inputting a minus sign (-) causes UI bug.

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

guan404ming

Looks really really good to me! The design not only improves UX also enhances extensibility. Still need more iteration and discussion but like it very much. 👍

airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx

airflow-core/src/airflow/ui/src/components/FilterBar/types.ts

airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx

Lee-W

translation looks good

RoyLee1224 · 2025-08-26T04:15:53Z

@guan404ming thanks for super helpful feedback. You're so great at code review !

bbovenzi

Really exciting! Let's just clean up a few details. Its ok to just change XComFilters in this PR and then we can change others in subsequent PRs

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

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

airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx

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

airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx

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

RoyLee1224 · 2025-09-02T06:08:02Z

UI Update Screenshots

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

airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx

bbovenzi

This is looking great. We're very close, just a few suggestions here and there

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

kaxil · 2025-09-11T06:14:31Z

@bbovenzi Do we want this in 3.1.0?

kaxil · 2025-09-11T06:21:41Z

@bbovenzi Do we want this in 3.1.0?

Ok Saw the message on i18n on Slack, cherry-picking it

…#54895) * feat(ui): add reusable FilterBar component for date, number, text input * fix(ui): improve FilterPill focus and blur handling * refactor(ui): create useFiltersHandler hook for FilterBar * refactor(ui):Support negative number input & fix FilterPill DOM nesting * feat(ui): create centralized filter config * fix(ui): apply style feedback to FilterBar * refactor(ui): move getFilterConfig calls into useFiltersHandler & remove placeholder translation fallback * refactor: simplify DateFilter with dayjs * fix(ui): Add FilterTypes enum to avoid type casting * fix(i18n): add missing translation keys * fix(i18n): move filter translation key to free exemptions * fix(i18n): Replace dagName translation with dag ID * fix(i18n): simplify filter translations with fallbacks * fix: modify reset button translation key --------- Co-authored-by: Brent Bovenzi <brent@astronomer.io> (cherry picked from commit 2a1c686)

RoyLee1224 · 2025-09-16T19:34:00Z

Follow up PR

Add number range filter
Add date range filter
Add tag filter

…#54895) * feat(ui): add reusable FilterBar component for date, number, text input * fix(ui): improve FilterPill focus and blur handling * refactor(ui): create useFiltersHandler hook for FilterBar * refactor(ui):Support negative number input & fix FilterPill DOM nesting * feat(ui): create centralized filter config * fix(ui): apply style feedback to FilterBar * refactor(ui): move getFilterConfig calls into useFiltersHandler & remove placeholder translation fallback * refactor: simplify DateFilter with dayjs * fix(ui): Add FilterTypes enum to avoid type casting * fix(i18n): add missing translation keys * fix(i18n): move filter translation key to free exemptions * fix(i18n): Replace dagName translation with dag ID * fix(i18n): simplify filter translations with fallbacks * fix: modify reset button translation key --------- Co-authored-by: Brent Bovenzi <brent@astronomer.io>

RoyLee1224 requested review from Lee-W, bbovenzi, jason810496, jscheffl, pierrejeambrun, ryanahamilton and shubhamraj-git as code owners August 25, 2025 04:31

boring-cyborg bot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default translation:zh-TW labels Aug 25, 2025

RoyLee1224 marked this pull request as draft August 25, 2025 04:31

guan404ming reviewed Aug 25, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx Outdated Show resolved Hide resolved

airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx Outdated Show resolved Hide resolved

airflow-core/src/airflow/ui/src/components/FilterBar/types.ts Show resolved Hide resolved

guan404ming reviewed Aug 25, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx Outdated Show resolved Hide resolved

Lee-W reviewed Aug 26, 2025

View reviewed changes

RoyLee1224 requested a review from guan404ming August 26, 2025 04:53

bbovenzi reviewed Aug 28, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx Outdated Show resolved Hide resolved

RoyLee1224 force-pushed the filterPill branch from 89f8050 to df6583e Compare September 1, 2025 18:17

guan404ming reviewed Sep 2, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/components/FilterBar/filters/DateFilter.tsx Outdated Show resolved Hide resolved

RoyLee1224 marked this pull request as ready for review September 2, 2025 05:58

RoyLee1224 changed the title ~~[WIP] Add reusable FilterBar component for date, number, text input~~ Add reusable FilterBar component for date, number, text input Sep 2, 2025

bbovenzi reviewed Sep 2, 2025

View reviewed changes

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json Outdated Show resolved Hide resolved

bbovenzi reviewed Sep 2, 2025

View reviewed changes

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json Outdated Show resolved Hide resolved

bbovenzi reviewed Sep 2, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx Outdated Show resolved Hide resolved

bbovenzi reviewed Sep 2, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/components/FilterBar/FilterBar.tsx Outdated Show resolved Hide resolved

RoyLee1224 force-pushed the filterPill branch from a15f183 to 42651dd Compare September 3, 2025 15:49

This was referenced Sep 10, 2025

feat: Implemented Filters UI for Asset Events View #54640

Merged

Fix missing reset and filter translations #55471

Merged

Lee-W mentioned this pull request Sep 10, 2025

fix(i18n): move the filter translation for Taiwanese Mandarin nad Mandarin Chinese #55472

Merged

RoyLee1224 deleted the filterPill branch September 11, 2025 13:34

RoyLee1224 mentioned this pull request Sep 11, 2025

Implement FilterBar component for Asset Events and Audit logs #55520

Open

5 tasks

KatalKavya96 mentioned this pull request Sep 14, 2025

feat(ui): Audit Logs → use FilterBar (parity with XCom) #55647

Closed

potiuk mentioned this pull request Nov 8, 2025

Add missing translations for PL for 3.1.3 #58076

Merged

Add reusable FilterBar component for date, number, text input #54895

Add reusable FilterBar component for date, number, text input #54895

Uh oh!

Conversation

RoyLee1224 commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What

Screenshots

TO-DO

Uh oh!

guan404ming left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Lee-W left a comment

Choose a reason for hiding this comment

Uh oh!

RoyLee1224 commented Aug 26, 2025

Uh oh!

bbovenzi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RoyLee1224 commented Sep 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

UI Update Screenshots

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bbovenzi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kaxil commented Sep 11, 2025

Uh oh!

kaxil commented Sep 11, 2025

Uh oh!

RoyLee1224 commented Sep 16, 2025

Follow up PR

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

RoyLee1224 commented Aug 25, 2025 •

edited

Loading

guan404ming left a comment •

edited

Loading

RoyLee1224 commented Sep 2, 2025 •

edited

Loading