[8.11] [Dashboard] Add Dashboard title to browser tab title (#171255)

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 && (
-            <DashboardTopNav
-              redirectTo={redirectTo}
-              embedSettings={embedSettings}
-              dashboardContainer={dashboardAPI}
-            />
+            <>
+              <DashboardTabTitleSetter dashboardContainer={dashboardAPI} />
+              <DashboardTopNav
+                redirectTo={redirectTo}
+                embedSettings={embedSettings}
+                dashboardContainer={dashboardAPI}
+              />
+            </>
           )}
 
           {getLegacyConflictWarning?.()}
-
           <DashboardRenderer
             ref={setDashboardAPI}
             dashboardRedirect={redirectTo}

src/plugins/dashboard/public/dashboard_app/tab_title_setter/dashboard_tab_title_setter.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEffect } from 'react';
+
+import { ViewMode } from '@kbn/embeddable-plugin/common';
+
+import { pluginServices } from '../../services/plugin_services';
+import { DashboardAPI } from '../..';
+import { getDashboardTitle } from '../_dashboard_app_strings';
+
+export const DashboardTabTitleSetter = ({
+  dashboardContainer,
+}: {
+  dashboardContainer: DashboardAPI;
+}) => {
+  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;
+};

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);
     });
   });
 }