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

Closes elastic#162800

## Summary

This PR re-adds dashboard titles to the browser tab title, which was
accidentally removed as part of the [portable
dashboards](elastic#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)

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

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