From 81279a8108422dc03f1c6ee5c54f8fc87473f395 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Thu, 16 Nov 2023 16:23:22 -0700 Subject: [PATCH] [Dashboard] Add Dashboard title to browser tab title (#171255) Closes https://github.com/elastic/kibana/issues/162800 ## Summary This PR re-adds dashboard titles to the browser tab title, which was accidentally removed as part of the [portable dashboards](https://github.com/elastic/kibana/pull/144332) work. For example, if I'm on the sample Logs dashboard, the title of that dashboard will now be reflected in the tab title like it was prior to `v8.7.0`: | Before | After | |--------|--------| | ![image](https://github.com/elastic/kibana/assets/8698078/79044734-f9f5-41e2-b7e6-27087d37832d) | ![image](https://github.com/elastic/kibana/assets/8698078/e82740a8-b4ef-488e-981a-57b5ef39948a) | The tab title should stay up-to-date with Dashboard title changes, as demonstrated in this video: https://github.com/elastic/kibana/assets/8698078/651fff50-70f7-46ff-af47-b274fe6b0a19 Note that this will **only apply** to dashboards in the dashboard app - dashboards outside of the dashboard app should not change the browser tab title, unless the consumer does this on their own. ### [Flaky Test Runner](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3987) ![image](https://github.com/elastic/kibana/assets/8698078/aec4100b-9e76-4154-b20b-a7054f7f46a1) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit 6150f76abae664856a976bc230b9e90dbd844621) --- .../public/dashboard_app/dashboard_app.tsx | 15 +++++--- .../dashboard_tab_title_setter.tsx | 37 +++++++++++++++++++ .../dashboard/group5/dashboard_settings.ts | 21 ++++++++--- 3 files changed, 61 insertions(+), 12 deletions(-) create mode 100644 src/plugins/dashboard/public/dashboard_app/tab_title_setter/dashboard_tab_title_setter.tsx diff --git a/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx b/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx index 00b68c2abc547..485303f0c31b4 100644 --- a/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx +++ b/src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx @@ -40,6 +40,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; @@ -196,15 +197,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 ae0e727814eef..bd6fb8d6c83a6 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); }); }); }