Skip to content

UI: Update browser tab title dynamically with DAG name#67169

Merged
choo121600 merged 1 commit into
apache:mainfrom
Subham-KRLX:fix/ui-browser-tab-title
May 24, 2026
Merged

UI: Update browser tab title dynamically with DAG name#67169
choo121600 merged 1 commit into
apache:mainfrom
Subham-KRLX:fix/ui-browser-tab-title

Conversation

@Subham-KRLX

@Subham-KRLX Subham-KRLX commented May 19, 2026

Copy link
Copy Markdown
Contributor

The browser tab title always showed Airflow in the new React UI because BaseLayout.tsx set it synchronously on every render.

We wrapped the default title logic in a useEffect hook so that it only sets the fallback title on mount. We also added a useDocumentTitle hook and called it in the DAG detail page to show the DAG name dynamically.

closes: #67145

Was generative AI tooling used to co-author this PR?
Yes — Claude (For PR description)

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label May 19, 2026
@Subham-KRLX Subham-KRLX mentioned this pull request May 19, 2026
Closed
2 tasks
bbovenzi
bbovenzi reviewed May 19, 2026
View reviewed changes

@bbovenzi bbovenzi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call.

We probably want to expand this to every page. But that can be a follow-up PR

Comment thread airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx Outdated
@Subham-KRLX Subham-KRLX force-pushed the fix/ui-browser-tab-title branch from a6a0c23 to ddb08df Compare May 20, 2026 03:43
@Subham-KRLX

Subham-KRLX commented May 20, 2026

Copy link
Copy Markdown
Contributor Author

Good call.

We probably want to expand this to every page. But that can be a follow-up PR

Agreed. Let's handle expanding this to all other pages in a follow up PR.

choo121600
choo121600 approved these changes May 20, 2026
View reviewed changes

@choo121600 choo121600 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool :)

@bbovenzi bbovenzi added this to the Airflow 3.2.2 milestone May 20, 2026
@choo121600

choo121600 commented May 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

I think there may be an effect ordering issue here between BaseLayout and Header.

On a hard refresh of /dags/<dag_id>, both useDocumentTitle() hooks mount in the same commit, and React runs effects child → parent:

  1. Header sets "examole Dag - Airflow"
  2. BaseLayout overwrites it with "Airflow"
Screen.Recording.2026-05-20.at.11.30.26.PM.mov

Could you double-check the hard-refresh case?

bbovenzi
bbovenzi reviewed May 20, 2026
View reviewed changes
Comment thread airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx Outdated
@Subham-KRLX

Subham-KRLX commented May 21, 2026

Copy link
Copy Markdown
Contributor Author

I think there may be an effect ordering issue here between BaseLayout and Header.

On a hard refresh of /dags/<dag_id>, both useDocumentTitle() hooks mount in the same commit, and React runs effects child → parent:

  1. Header sets "examole Dag - Airflow"
  2. BaseLayout overwrites it with "Airflow"

Screen.Recording.2026-05-20.at.11.30.26.PM.mov
Could you double-check the hard-refresh case?

I removed the hook from BaseLayout to fix the effect ordering issue and simplify the logic

@bbovenzi

bbovenzi commented May 21, 2026

Copy link
Copy Markdown
Contributor

looks good. Let's fix the static checks

@Subham-KRLX Subham-KRLX force-pushed the fix/ui-browser-tab-title branch from 0fc1ac3 to 85f63a6 Compare May 22, 2026 03:41
@Subham-KRLX Subham-KRLX force-pushed the fix/ui-browser-tab-title branch from 85f63a6 to 99caa2f Compare May 22, 2026 03:43
@Subham-KRLX Subham-KRLX requested a review from bbovenzi May 22, 2026 09:11
@choo121600

choo121600 commented May 24, 2026

Copy link
Copy Markdown
Member

It looks like this CI failure is unrelated to this PR :)

@choo121600 choo121600 merged commit ea7481d into apache:main May 24, 2026
224 of 233 checks passed
@github-actions

github-actions Bot commented May 24, 2026

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
✅ v3-2-test PR Link

github-actions Bot pushed a commit to aws-mwaa/upstream-to-airflow that referenced this pull request May 24, 2026
@Subham-KRLX
[v3-2-test] UI: Show DAG name in browser tab title (apache#67169)
1398a3b 
(cherry picked from commit ea7481d)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
aws-airflow-bot pushed a commit to aws-mwaa/upstream-to-airflow that referenced this pull request May 24, 2026
@Subham-KRLX
[v3-2-test] UI: Show DAG name in browser tab title (apache#67169)
38fd2a7 
(cherry picked from commit ea7481d)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
@choo121600 choo121600 mentioned this pull request May 24, 2026
Closed
1 task
choo121600 pushed a commit that referenced this pull request May 24, 2026
@github-actions @Subham-KRLX
[v3-2-test] UI: Show DAG name in browser tab title (#67169) (#67399)
42f2e4e 
(cherry picked from commit ea7481d)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
vatsrahul1001 pushed a commit that referenced this pull request May 25, 2026
@github-actions @Subham-KRLX @vatsrahul1001
[v3-2-test] UI: Show DAG name in browser tab title (#67169) (#67399)
abff4c4 
(cherry picked from commit ea7481d)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
vatsrahul1001 pushed a commit that referenced this pull request May 25, 2026
@github-actions @Subham-KRLX @vatsrahul1001
[v3-2-test] UI: Show DAG name in browser tab title (#67169) (#67399)
4c2f99a 
(cherry picked from commit ea7481d)

Co-authored-by: Subham <subhamsangwan26@gmail.com>
@sandrahoang686 sandrahoang686 mentioned this pull request Jul 1, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzi bbovenzi bbovenzi approved these changes
@choo121600 choo121600 choo121600 approved these changes
@pierrejeambrun pierrejeambrun Awaiting requested review from pierrejeambrun pierrejeambrun is a code owner
@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton ryanahamilton is a code owner
@shubhamraj-git shubhamraj-git Awaiting requested review from shubhamraj-git shubhamraj-git is a code owner
@guan404ming guan404ming Awaiting requested review from guan404ming guan404ming is a code owner
@vatsrahul1001 vatsrahul1001 Awaiting requested review from vatsrahul1001 vatsrahul1001 is a code owner

Assignees

No one assigned

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug] Browser tab title always shows "Airflow" in v3 UI — DAG name no longer reflected

4 participants

@Subham-KRLX @choo121600 @bbovenzi @vatsrahul1001