CloudsDocker opened a new issue, #67145:
URL: https://github.com/apache/airflow/issues/67145
### 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:
```html
<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):
```ts
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:
```ts
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?
- [x] Yes I am willing to submit a PR!
### Code of Conduct
- [x] I agree to follow this project's [Code of
Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
