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

# Backport This will backport the following commits from `main` to `8.11`: - [[Dashboard] Add Dashboard title to browser tab title (#171255)](https://github.com/elastic/kibana/pull/171255)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2023-11-16 19:33:13 -05:00 · 2023-11-16 19:33:13 -05:00 · faef45f16e
commit faef45f16e
parent 7d33d5a8e6
3 changed files with 61 additions and 12 deletions
--- 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 && (
-            <DashboardTopNav
-              redirectTo={redirectTo}
-              embedSettings={embedSettings}
-              dashboardContainer={dashboardAPI}
-            />
+            <>
+              <DashboardTabTitleSetter dashboardContainer={dashboardAPI} />
+              <DashboardTopNav
+                redirectTo={redirectTo}
+                embedSettings={embedSettings}
+                dashboardContainer={dashboardAPI}
+              />
+            </>
          )}

          {getLegacyConflictWarning?.()}
-
          <DashboardRenderer
            ref={setDashboardAPI}
            dashboardRedirect={redirectTo}
--- a/src/plugins/dashboard/public/dashboard_app/tab_title_setter/dashboard_tab_title_setter.tsx
+++ b/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;
+};
--- 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);
    });
  });
 }