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

[CloudsDocker]

Under which category would you file this issue?

Airflow Core

Apache Airflow version

3.0.x /WMAA

What happened and how to reproduce it?

Description

In Airflow v2, opening a DAG detail page showed the DAG name in the browser tab (e.g. DUMMY__INTRADAY__JOBS - Airflow). In v3 the tab
always shows Airflow regardless of which page you're on.

This is a regression from the React SPA rewrite. The root cause is that index.html has a single static title:

<title>Airflow</title>

and no route component calls document.title dynamically, so the title never changes as you navigate between DAGs, runs, or tasks.

Steps to reproduce

1. Open any Airflow v3 instance
2. Navigate to a DAG detail page (e.g. /dags/MY_DAG_ID/)
3. Observe the browser tab — it shows Airflow, not the DAG name
4. Open two DAG tabs side-by-side — impossible to tell them apart
   ## Expected behaviour

Browser tab shows <dag_display_name> - Airflow (or <dag_id> - Airflow as fallback), matching v2 behaviour.

What you think should happen instead?

Actual behaviour

Browser tab always shows Airflow.

Proposed fix

Add a small useDocumentTitle hook and call it from the DAG detail layout/header.

airflow-core/src/airflow/ui/src/utils/useDocumentTitle.ts (new file):

import { useEffect } from "react";

const BASE_TITLE = "Airflow";

export const useDocumentTitle = (pageTitle?: string | null) => {
  useEffect(() => {
    document.title = pageTitle ? `${pageTitle} - ${BASE_TITLE}` : BASE_TITLE;
    return () => {
      document.title = BASE_TITLE;
    };
  }, [pageTitle]);
};

airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx — add one call:

import { useDocumentTitle } from "src/utils/useDocumentTitle";

// inside the component, after dag is loaded:
useDocumentTitle(dag?.dag_display_name ?? dagId);

This gives:

Page	Tab title
DAG list	Airflow
DAG detail	DUMMY__INTRADAY__JOBS - Airflow
On unmount / navigate away	resets to Airflow

The same pattern can be extended to run detail pages, task instance pages, etc. by passing the relevant identifier.

Operating System

No response

Deployment

None

Apache Airflow Provider(s)

No response

Versions of Apache Airflow Providers

Environment

• Apache Airflow version: 3.x (confirmed on 3.0.x / MWAA)
• Browser: any
• Airflow v2 behaviour: tab showed DAG name ✓

Official Helm Chart version

Not Applicable

Kubernetes Version

No response

Helm Chart configuration

No response

Docker Image customizations

No response

Anything else?

** ## Additional context

The instance_name config ([api] instance_name) only sets a static site-wide title and does not solve per-DAG tab naming.**

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.

[Subham-KRLX]

I have fixed this issue in PR #67169 The fix wraps the default title setter in BaseLayout.tsx in a useEffect hook and introduces a useDocumentTitle hook in the DAG detail page to dynamically set the tab title to the DAG name.