Fix Link to Dag in Plugin

[jscheffl]

There is a teething problem that the React Router DOM "Link" component (similar like #55641) is not working in Edge React UI - pointers to outside the plugins do not work. I need some React Expertise to fix it seems.

@shubhamraj-git / @bbovenzi / @pierrejeambrun HELP :-D

To make this reproducible I made small modifications to revert my current workaround:
Switch back to the "right" internal link from "react-router-dom"

How to see the error:

1. Take this branch
2. Run it locally via breeze start-airflow --python 3.12 --backend postgres --executor EdgeExecutor --load-example-dags
3. Start a Dag to have some workload
4. Navigate to "Admin" -> "Edge Worker Jobs" (Which is the React Plugin)
5. Click on the task list in the column on the worker, see that the UI navigates to "Edge Worker Hosts" tab and ... if you have many would scroll to the right one
6. Flip back to "Edge Worker Jobs" and click on a Task/Dag or Run entry
7. See the page flips to a empty content. But see the URL is correct. If you take the URL and reload the target is correct

Is this a limitation of the plugin concept or a bug in my Plugin? How can the Toaster be made working?
On main I use an "external link" with href from Chakra which leads to a full page realod which is nasty and slow.
Is there a way from within the Plugin to link to the Dag run/grid view w/o page reload?

[pierrejeambrun]

@jscheffl I just pushed a commit that should solve your problems

Screen.Recording.2025-09-29.at.12.59.41.mov

I'm creating a PR for the 'bootstraping tool'. (pre-commit hook is not happy, but the error message seems unrelated to my change, let me know if you manage to fix it)

[pierrejeambrun]

Here is main PR: #56205

[jscheffl]

Here is main PR: #56205

Cool!

I was thinking about we probably also need to pseudo assume/build the bootstrapping tool and have dependabot running over it such that packages are upgraded regularly... still one of my items on my bcuket list...

[jscheffl]

@pierrejeambrun thanks for the hints! I attempted to apply your proposals to Edge Executor UI Plugin and it seems to work.... but also needed to realize that https://github.com/apache/airflow/pull/55642/files#diff-72d1ca6b75418dccf2e70084d6d3b9840da702fa127e3848f7fd66198f9d406eR68 was missing on the PR to main.

Unfortunately w/o this it is still not working with main.

As proposed in https://apache-airflow.slack.com/archives/C0809U4S1Q9/p1759237779941759?thread_ts=1759181599.821269&cid=C0809U4S1Q9 I implemented a detection in "InternalLink" component which captures the diff.

...unfortunately I assume due to missing property in airflow-core/src/airflow/ui/src/router.tsx the changes break the functionality in 3.1.0, if I start via breeze start-airflow --python 3.12 --load-example-dags --backend postgres --executor EdgeExecutor --answer y --use-airflow-version 3.1.0 --use-distributions-from-dist then I get the following error navigating into plugin. So the changes fix the link in 3.1.1/3.2++ but it breaks with 3.1.0 :-(

Any idea how I can model a workaround keeping compatibility with 3.1.0 and later versions?

UPDATE: After fiddeling and triaging for ~2 hours it seems this is a real breaking change, mainly caused by https://github.com/apache/airflow/pull/55642/files#diff-11195c94c2a05c1187b0517dfe1437a2914f4b22a5b2a9d721cb253ba16e4f79R41 - I can make it either working on 3.1.0 or 3.1.0++ but not on both because the vite.config.ts seems to be mutually exclusive?

[pierrejeambrun]

As discussed, I think it will be a substantial effort to make it work between new/old plugins version and <=3.1.1 >=3.1.1 core versions

I think we should leverage the experimental tag of the react app plugin feature, and add a lower bound on airflow core for the new edge provider version plugin. (have airflow >=3.1.1 in new edge provider version) if that's acceptable. That would save us some ugly backward compatibility code. (if we manage to make it work)

[potiuk]

if that's acceptable.

Yep. We can make such exception and our tooling support it, though, it's rather uncommon to have >= patchlevel. More likely >= 3.2.0 ?

[jscheffl]

@pierrejeambrun@kaxil@eladkal FYI seems this is needed to make Edge UI Plugin working in 3.1.1 release. The previous releases (incl 1.4.0rc1) are "broken" as UI routes are having a breaking change... good that the tagged the React plugins "experimental" :-D

[pierrejeambrun]

Nice thanks, just a couple of comments.

[dheerajturaga]

@jscheffl I texted this PR with base url sub path and a nginx redirect. Its working as expected.
Also, looks like this PR is now critical to have edge3 working on 3.1.1 as 1.3.1 and 1.4.0rc1/2 are NOT working with 3.1.1

[jscheffl]

Thanks for testing as well!

...this PR is now critical to have edge3 working on 3.1.1 as 1.3.1 and 1.4.0rc1

Not working "at all" or just UI Plugin broken? I saw it working in general just w/o proper UI plugin support.

[dheerajturaga]

Thanks for testing as well!

...this PR is now critical to have edge3 working on 3.1.1 as 1.3.1 and 1.4.0rc1

Not working "at all" or just UI Plugin broken? I saw it working in general just w/o proper UI plugin support.

You are right! I shall correct myself, egde executor and workers are working. The UI plugin is broken

[pierrejeambrun]

Sounds good to me, thanks Jens.