Search Function Not Working in Airflow UI

[buu-nguyen]

Apache Airflow version

2.7.0

What happened

Actual Behavior:
Upon entering a keyword in the search bar, no search results are shown, and the UI remains unchanged. The search function seems to be non-responsive.
You can see in the address bar, undefined appears instead of valid value.

What you think should happen instead

Expected Behavior:
When I use the search function in the Airflow UI, I expect to see a list of results that match the entered keyword. This should help me quickly locate specific DAGs or tasks within the UI.

How to reproduce

Steps to Reproduce:

1. Log in to the Airflow UI.
2. Navigate to the "Connections" list view by clicking on the "Connections" link in the navigation menu or by directly visiting the URL: <your_airflow_ui_url>/connection/list/.
3. Attempt to use the search function by entering a keyword.
4. Observe that no search results are displayed, and the search appears to do nothing.

Operating System

MacOS

Versions of Apache Airflow Providers

No response

Deployment

Other

Deployment details

Standalone Airflow via official Quickstart documentation

Anything else

I encounter this issue since Airflow 2.6.0. It was fine on Airflow 2.5.3.

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[boring-cyborg]

Thanks for opening your first issue here! Be sure to follow the issue template! If you are willing to raise PR to address this issue please do so, no need to wait for approval.

[SamWheating]

I have replicated this issue in Breeze on main, it looks like the contains and equal to filters are broken on both connections and dagruns page (likely others too, but I didn't check everywhere).

Feel free to assign to me and I'll keep investigating.

[Usiel]

In the meantime, here's a workaround for people who depend on this: Replace the undefined part with the corresponding filter op index. For example, to do "run_id contains needle" you replace the invalid query param "_flt_undefined_dag_id=needle" with "_flt_2_dag_id=needle". Why 2 in this case? Because "contains" is the 2nd operation in the list (0 based index).

[SamWheating]

I have done some looking and I think that this is due to this change:
https://github.com/dpgaspar/Flask-AppBuilder/pull/2039/files

Which was created in response to another airflow issue:
#31156

So anytime we change the filter (i.e, selecting the non-default filter type) the changeOperation function returns undefined rather than a correct filter index, which is why we end up with _flt_undefined_ in the form data.

Verified this by setting a breakpoint and then getting the index the old way and the new way:

e.value
> '2'
$(e.target).val()
> undefined

We could just open a revert in FAB, but I want to ensure that we don't re-introduce the original issue.

[SamWheating]

Ah, looks like this was fixed in dpgaspar/Flask-AppBuilder#2079, which was released in 4.3.4

I have confirmed that this fixes things by upgrading FAB in breeze and then restarting the webserver.