diff --git a/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx b/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx index ea1bea52c83d..1ff789ab6120 100644 --- a/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx +++ b/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx @@ -41,6 +41,7 @@ import { useDashboardOutcomeValidation } from './hooks/use_dashboard_outcome_val import { loadDashboardHistoryLocationState } from './locator/load_dashboard_history_location_state'; import type { DashboardCreationOptions } from '../dashboard_container/embeddable/dashboard_container_factory'; import { DashboardTopNav } from '../dashboard_top_nav'; +import { DashboardTabTitleSetter } from './tab_title_setter/dashboard_tab_title_setter'; export interface DashboardAppProps { history: History; @@ -200,15 +201,17 @@ export function DashboardApp({ {!showNoDataPage && ( <> {dashboardAPI && ( - + <> + + + )} {getLegacyConflictWarning?.()} - { + const { + chrome: { docTitle: chromeDocTitle }, + } = pluginServices.getServices(); + const title = dashboardContainer.select((state) => state.explicitInput.title); + const lastSavedId = dashboardContainer.select((state) => state.componentState.lastSavedId); + + /** + * Set chrome tab title when dashboard's title changes + */ + useEffect(() => { + /** We do not want the tab title to include the "Editing" prefix, so always send in view mode */ + chromeDocTitle.change(getDashboardTitle(title, ViewMode.VIEW, !lastSavedId)); + }, [title, chromeDocTitle, lastSavedId]); + + return null; +}; diff --git a/test/functional/apps/dashboard/group5/dashboard_settings.ts b/test/functional/apps/dashboard/group5/dashboard_settings.ts index ae0e727814ee..bd6fb8d6c83a 100644 --- a/test/functional/apps/dashboard/group5/dashboard_settings.ts +++ b/test/functional/apps/dashboard/group5/dashboard_settings.ts @@ -12,6 +12,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context'; export default function ({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); + const browser = getService('browser'); const globalNav = getService('globalNav'); const kibanaServer = getService('kibanaServer'); const dashboardSettings = getService('dashboardSettings'); @@ -20,6 +21,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { describe('dashboard settings', () => { let originalTitles: string[] = []; + const checkDashboardTitle = async (expectedTitle: string) => { + expect(await browser.getTitle()).to.equal(`${expectedTitle} - Elastic`); + await retry.try(async () => { + const breadcrumb = await globalNav.getLastBreadcrumb(); + expect(breadcrumb).to.equal(`Editing ${expectedTitle}`); + }); + }; + before(async () => { await kibanaServer.savedObjects.cleanStandardList(); await kibanaServer.importExport.load( @@ -60,13 +69,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('should update the title of the dashboard', async () => { + await checkDashboardTitle('few panels'); + const newTitle = 'My awesome dashboard!!1'; await PageObjects.dashboard.openSettingsFlyout(); await dashboardSettings.setCustomPanelTitle(newTitle); await dashboardSettings.clickApplyButton(); - await retry.try(async () => { - expect((await globalNav.getLastBreadcrumb()) === newTitle); - }); + + await checkDashboardTitle(newTitle); }); it('should disable quick save when the settings are open', async () => { @@ -106,9 +116,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await dashboardSettings.expectDuplicateTitleWarningDisplayed(); }); await dashboardSettings.clickApplyButton(); - await retry.try(async () => { - expect((await globalNav.getLastBreadcrumb()) === newTitle); - }); + + await checkDashboardTitle(newTitle); }); }); }