codeant-ai-for-open-source[bot] commented on code in PR #40730:
URL: https://github.com/apache/superset/pull/40730#discussion_r3362968988
##########
superset-frontend/src/dashboard/containers/DashboardPage.tsx:
##########
@@ -152,6 +153,14 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }:
PageProps) => {
const readyToRender = Boolean(dashboard && charts);
const { dashboard_title, id = 0 } = dashboard || {};
+ // The live title is edited in Redux and persisted via an in-SPA save with no
+ // full reload, so the useDashboard() API result can be stale. Track the live
+ // title so the browser tab stays in sync after a rename.
+ const liveDashboardTitle = useSelector<RootState, string | undefined>(
+ state => state.dashboardLayout?.present?.[DASHBOARD_HEADER_ID]?.meta?.text,
+ );
+ const pageTitle = liveDashboardTitle || dashboard_title;
Review Comment:
**Suggestion:** `pageTitle` always prefers
`dashboardLayout.present[DASHBOARD_HEADER_ID].meta.text` when it is truthy, but
`dashboardLayout` persists until the next `HYDRATE_DASHBOARD` dispatch. During
dashboard-to-dashboard navigation in the SPA, this can temporarily use the
previous dashboard's header text and set the wrong browser tab title before the
new dashboard hydrates. Gate the live-layout title to the current hydrated
dashboard (or current dashboard id) and only then prefer it; otherwise fall
back to the API title. [incorrect condition logic]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Dashboard route shows wrong tab title during dashboard switches.
- ⚠️ Embedded dashboard route momentarily shows previous dashboard title.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open any dashboard via the main route `/superset/dashboard/:idOrSlug/`
defined in
`superset-frontend/src/views/routes.tsx:52-53`, which renders
`DashboardRoute` from
`src/pages/Dashboard/index.tsx:8-10`, returning `<DashboardPage
idOrSlug={idOrSlug} />`
from `src/dashboard/containers/DashboardPage.tsx:128-133`. Wait for initial
load so
`hydrateDashboard` is dispatched in the `useEffect` at
`DashboardPage.tsx:192-290`, which
hydrates `dashboardLayout` via the `HYDRATE_DASHBOARD` handler in
`src/dashboard/reducers/dashboardLayout.ts:106-113`, and `document.title` is
set to the
live header title by the effect at `DashboardPage.tsx:313-318`.
2. In the same SPA session, navigate to a different dashboard (e.g. from
`/superset/dashboard/1/` to `/superset/dashboard/2/`) so `DashboardRoute`
still renders
`DashboardPage` with a new `idOrSlug` (`src/pages/Dashboard/index.tsx:8-10`)
but the
component instance and Redux store are reused. On this navigation, the hooks
`useDashboard(idOrSlug)` and `useDashboardCharts(idOrSlug)` in
`DashboardPage.tsx:141-149`
start fetching new data for dashboard 2 using the API hooks in
`src/hooks/apiResources/dashboards.ts:52-70` and `apiResources.ts:87-137`,
while
`state.dashboardLayout.present` still contains the previous dashboard 1
layout (including
header meta.text) as last hydrated by `HYDRATE_DASHBOARD`
(`dashboardLayout.ts:106-113`).
3. When the API call for the new dashboard 2 completes, `useDashboard`
updates `dashboard`
with result including `dashboard_title` for dashboard 2
(`dashboards.ts:52-66`), but
`dashboardLayout` is still from dashboard 1 because the hydration effect at
`DashboardPage.tsx:192-290` only dispatches `hydrateDashboard` once
`readyToRender =
Boolean(dashboard && charts)` becomes true. On this intermediate render,
`liveDashboardTitle` is still read from
`state.dashboardLayout.present[DASHBOARD_HEADER_ID].meta.text`
(`DashboardPage.tsx:159-161`, with `DASHBOARD_HEADER_ID` defined in
`src/dashboard/util/constants.ts`), so `pageTitle` is computed as
`liveDashboardTitle ||
dashboard_title` (`DashboardPage.tsx:162`) and remains set to dashboard 1's
title even
though the API has returned dashboard 2's `dashboard_title`. Because
`pageTitle` stays
equal to the previous value, the `useEffect` at `DashboardPage.tsx:313-318`
does not
rerun, and `document.title` continues to show dashboard 1's name while
dashboard 2 is now
loading.
4. Only after both the new dashboard and its charts have finished loading
does
`readyToRender` become true (`DashboardPage.tsx:152-154`), triggering the
hydration effect
(`DashboardPage.tsx:192-290`) which dispatches `HYDRATE_DASHBOARD` with the
new
`dashboardLayout` for dashboard 2 (`actions/hydrate.ts:320-399` →
`reducers/dashboardLayout.ts:106-113`). At that point `liveDashboardTitle`
switches from
dashboard 1's header text to dashboard 2's header text, `pageTitle` finally
changes, and
the `useEffect` at `DashboardPage.tsx:313-318` updates `document.title` to
the correct
dashboard 2 title. Between steps 2 and 4 the browser tab title is wrong,
showing the
previous dashboard's name because `pageTitle` always prefers the stale
`dashboardLayout.present[DASHBOARD_HEADER_ID].meta.text` over the
already-available API
`dashboard_title`, matching the issue described in the suggestion.
```
</details>
[Fix in
Cursor](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=2f80bc6df62247558bcb57e4e9e87017&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
| [Fix in VSCode
Claude](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=2f80bc6df62247558bcb57e4e9e87017&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/src/dashboard/containers/DashboardPage.tsx
**Line:** 162:162
**Comment:**
*Incorrect Condition Logic: `pageTitle` always prefers
`dashboardLayout.present[DASHBOARD_HEADER_ID].meta.text` when it is truthy, but
`dashboardLayout` persists until the next `HYDRATE_DASHBOARD` dispatch. During
dashboard-to-dashboard navigation in the SPA, this can temporarily use the
previous dashboard's header text and set the wrong browser tab title before the
new dashboard hydrates. Gate the live-layout title to the current hydrated
dashboard (or current dashboard id) and only then prefer it; otherwise fall
back to the API title.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F40730&comment_hash=63c0765f4c31098e4b4baa08cba192a9f9a5b30f36d4cd90d5784be70f2d9f90&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F40730&comment_hash=63c0765f4c31098e4b4baa08cba192a9f9a5b30f36d4cd90d5784be70f2d9f90&reaction=dislike'>👎</a>
--
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]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
