From 697cd6412e40a69ce72080c048d557430694f11b Mon Sep 17 00:00:00 2001 From: Constance Date: Mon, 10 Aug 2020 10:37:12 -0700 Subject: [PATCH] [Enterprise Search] Update the browser/document title on plugin navigation (#74392) * Rename kibana_breadcrumbs to kibana_chrome - in anticipation of upcoming refactor where SetPageChrome now handles document title as well as Kibana breadcrumbs + cleanup exports * Add generate_title helpers - will be used by new set_chrome helper * Add setDocTitle context + behavior to set_chrome + refactor set_chrome.test.tsx: - add title tests - add SetWorkplaceSearchChrome test to increase coverage - clean up inner/outer call in favor of simpler mocks/imports - simplify isRoot tests * Update plugins to set product titles - on mount but before render * Copy feedback - change pipe separator to hyphen - to match ' - Elastic' * Add functional tests confirming that document titles updated --- test/functional/services/common/browser.ts | 8 ++ .../__mocks__/kibana_context.mock.ts | 1 + .../components/empty_states/empty_state.tsx | 4 +- .../components/empty_states/error_state.tsx | 4 +- .../components/empty_states/loading_state.tsx | 4 +- .../engine_overview/engine_overview.tsx | 4 +- .../setup_guide/setup_guide.test.tsx | 4 +- .../components/setup_guide/setup_guide.tsx | 4 +- .../public/applications/index.tsx | 2 + .../set_breadcrumbs.test.tsx | 63 -------------- .../generate_breadcrumbs.test.ts | 8 +- .../generate_breadcrumbs.ts | 0 .../kibana_chrome/generate_title.test.ts | 60 +++++++++++++ .../shared/kibana_chrome/generate_title.ts | 38 +++++++++ .../index.ts | 7 +- .../shared/kibana_chrome/set_chrome.test.tsx | 84 +++++++++++++++++++ .../set_chrome.tsx} | 15 ++-- .../components/error_state/error_state.tsx | 4 +- .../components/overview/overview.tsx | 4 +- .../setup_guide/setup_guide.test.tsx | 4 +- .../components/setup_guide/setup_guide.tsx | 4 +- .../enterprise_search/public/plugin.ts | 4 + .../app_search/engines.ts | 3 + .../app_search/setup_guide.ts | 3 + .../workplace_search/setup_guide.ts | 3 + 25 files changed, 243 insertions(+), 96 deletions(-) delete mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.test.tsx rename x-pack/plugins/enterprise_search/public/applications/shared/{kibana_breadcrumbs => kibana_chrome}/generate_breadcrumbs.test.ts (97%) rename x-pack/plugins/enterprise_search/public/applications/shared/{kibana_breadcrumbs => kibana_chrome}/generate_breadcrumbs.ts (100%) create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.test.ts create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.ts rename x-pack/plugins/enterprise_search/public/applications/shared/{kibana_breadcrumbs => kibana_chrome}/index.ts (52%) create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.test.tsx rename x-pack/plugins/enterprise_search/public/applications/shared/{kibana_breadcrumbs/set_breadcrumbs.tsx => kibana_chrome/set_chrome.tsx} (66%) diff --git a/test/functional/services/common/browser.ts b/test/functional/services/common/browser.ts index c38ac771e41625..b0eec5e24f635a 100644 --- a/test/functional/services/common/browser.ts +++ b/test/functional/services/common/browser.ts @@ -163,6 +163,14 @@ export async function BrowserProvider({ getService }: FtrProviderContext) { return currentWithoutTime; } + /** + * Gets the page/document title of the focused window/frame. + * https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Driver.html#getTitle + */ + public async getTitle() { + return await driver.getTitle(); + } + /** * Navigates the focused window/frame to a new URL. * https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Driver.html#get diff --git a/x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_context.mock.ts b/x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_context.mock.ts index fcfa1b0a21f130..b1d7341d51a4cc 100644 --- a/x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_context.mock.ts +++ b/x-pack/plugins/enterprise_search/public/applications/__mocks__/kibana_context.mock.ts @@ -13,5 +13,6 @@ import { httpServiceMock } from 'src/core/public/mocks'; export const mockKibanaContext = { http: httpServiceMock.createSetupContract(), setBreadcrumbs: jest.fn(), + setDocTitle: jest.fn(), enterpriseSearchUrl: 'http://localhost:3002', }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx index 9bb5cd3bffdf52..d6c38629d81436 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx @@ -9,7 +9,7 @@ import { EuiPage, EuiPageBody, EuiPageContent, EuiEmptyPrompt, EuiButton } from import { FormattedMessage } from '@kbn/i18n/react'; import { sendTelemetry } from '../../../shared/telemetry'; -import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { KibanaContext, IKibanaContext } from '../../../index'; import { EngineOverviewHeader } from '../engine_overview_header'; @@ -33,7 +33,7 @@ export const EmptyState: React.FC = () => { return ( - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx index 346e70d32f7b19..3753ad5433e8fd 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui'; import { ErrorStatePrompt } from '../../../shared/error_state'; -import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; import { EngineOverviewHeader } from '../engine_overview_header'; @@ -17,7 +17,7 @@ import './empty_states.scss'; export const ErrorState: React.FC = () => { return ( - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx index 2be917c8df0965..533dca7d0ab795 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui'; -import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { EngineOverviewHeader } from '../engine_overview_header'; import './empty_states.scss'; @@ -15,7 +15,7 @@ import './empty_states.scss'; export const LoadingState: React.FC = () => { return ( - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx index 13d092a657d11c..286c32b2a443be 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx @@ -16,7 +16,7 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; import { LicenseContext, ILicenseContext, hasPlatinumLicense } from '../../../shared/licensing'; import { KibanaContext, IKibanaContext } from '../../../index'; @@ -93,7 +93,7 @@ export const EngineOverview: React.FC = () => { return ( - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx index 82cc344d496322..5936b8f2d4283b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide'; import { SetupGuide } from './'; @@ -16,6 +16,6 @@ describe('SetupGuide', () => { const wrapper = shallow(); expect(wrapper.find(SetupGuideLayout)).toHaveLength(1); - expect(wrapper.find(SetBreadcrumbs)).toHaveLength(1); + expect(wrapper.find(SetPageChrome)).toHaveLength(1); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx index f899423319afc9..fa55289e73e0b7 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx @@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n'; import { APP_SEARCH_PLUGIN } from '../../../../../common/constants'; import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide'; -import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; import GettingStarted from '../../assets/getting_started.png'; @@ -22,7 +22,7 @@ export const SetupGuide: React.FC = () => ( standardAuthLink="https://swiftype.com/documentation/app-search/self-managed/security#standard" elasticsearchNativeAuthLink="https://swiftype.com/documentation/app-search/self-managed/security#elasticsearch-native-realm" > - diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.test.tsx deleted file mode 100644 index 974ca54277c51c..00000000000000 --- a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.test.tsx +++ /dev/null @@ -1,63 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; - -import '../../__mocks__/react_router_history.mock'; -import { mountWithKibanaContext } from '../../__mocks__'; - -jest.mock('./generate_breadcrumbs', () => ({ appSearchBreadcrumbs: jest.fn() })); -import { appSearchBreadcrumbs, SetAppSearchBreadcrumbs } from './'; - -describe('SetAppSearchBreadcrumbs', () => { - const setBreadcrumbs = jest.fn(); - const builtBreadcrumbs = [] as any; - const appSearchBreadCrumbsInnerCall = jest.fn().mockReturnValue(builtBreadcrumbs); - const appSearchBreadCrumbsOuterCall = jest.fn().mockReturnValue(appSearchBreadCrumbsInnerCall); - (appSearchBreadcrumbs as jest.Mock).mockImplementation(appSearchBreadCrumbsOuterCall); - - afterEach(() => { - jest.clearAllMocks(); - }); - - const mountSetAppSearchBreadcrumbs = (props: any) => { - return mountWithKibanaContext(, { - http: {}, - enterpriseSearchUrl: 'http://localhost:3002', - setBreadcrumbs, - }); - }; - - describe('when isRoot is false', () => { - const subject = () => mountSetAppSearchBreadcrumbs({ text: 'Page 1', isRoot: false }); - - it('calls appSearchBreadcrumbs to build breadcrumbs, then registers them with Kibana', () => { - subject(); - - // calls appSearchBreadcrumbs to build breadcrumbs with the target page and current location - expect(appSearchBreadCrumbsInnerCall).toHaveBeenCalledWith([ - { text: 'Page 1', path: '/current-path' }, - ]); - - // then registers them with Kibana - expect(setBreadcrumbs).toHaveBeenCalledWith(builtBreadcrumbs); - }); - }); - - describe('when isRoot is true', () => { - const subject = () => mountSetAppSearchBreadcrumbs({ text: 'Page 1', isRoot: true }); - - it('calls appSearchBreadcrumbs to build breadcrumbs with an empty breadcrumb, then registers them with Kibana', () => { - subject(); - - // uses an empty bredcrumb - expect(appSearchBreadCrumbsInnerCall).toHaveBeenCalledWith([]); - - // then registers them with Kibana - expect(setBreadcrumbs).toHaveBeenCalledWith(builtBreadcrumbs); - }); - }); -}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/generate_breadcrumbs.test.ts b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_breadcrumbs.test.ts similarity index 97% rename from x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/generate_breadcrumbs.test.ts rename to x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_breadcrumbs.test.ts index 70aa723d626018..0f34bbb6b65bc3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/generate_breadcrumbs.test.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_breadcrumbs.test.ts @@ -4,8 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { generateBreadcrumb } from './generate_breadcrumbs'; -import { appSearchBreadcrumbs, enterpriseSearchBreadcrumbs, workplaceSearchBreadcrumbs } from './'; +import { + generateBreadcrumb, + appSearchBreadcrumbs, + enterpriseSearchBreadcrumbs, + workplaceSearchBreadcrumbs, +} from './generate_breadcrumbs'; import { mockHistory as mockHistoryUntyped } from '../../__mocks__'; const mockHistory = mockHistoryUntyped as any; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/generate_breadcrumbs.ts b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_breadcrumbs.ts similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/generate_breadcrumbs.ts rename to x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_breadcrumbs.ts diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.test.ts b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.test.ts new file mode 100644 index 00000000000000..0c1c18b98e33e9 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.test.ts @@ -0,0 +1,60 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + generateTitle, + enterpriseSearchTitle, + appSearchTitle, + workplaceSearchTitle, +} from './generate_title'; + +describe('generateTitle', () => { + it('creates a hyphen separated string from an array of page titles', () => { + const title = generateTitle(['Curations', 'some Engine', 'App Search']); + expect(title).toEqual('Curations - some Engine - App Search'); + }); +}); + +describe('enterpriseSearchTitle', () => { + it('automatically appends the Enterprise Search product onto the pages array', () => { + const title = enterpriseSearchTitle(['Setup Guide']); + expect(title).toEqual('Setup Guide - Enterprise Search'); + }); + + it('can be mixed and matched', () => { + const title = enterpriseSearchTitle([appSearchTitle(['Some Page'])]); + expect(title).toEqual('Some Page - App Search - Enterprise Search'); + }); + + it('falls back to product name', () => { + const title = enterpriseSearchTitle(); + expect(title).toEqual('Enterprise Search'); + }); +}); + +describe('appSearchTitle', () => { + it('automatically appends the App Search product onto the pages array', () => { + const title = appSearchTitle(['Engines']); + expect(title).toEqual('Engines - App Search'); + }); + + it('falls back to product name', () => { + const title = appSearchTitle(); + expect(title).toEqual('App Search'); + }); +}); + +describe('workplaceSearchTitle', () => { + it('automatically appends the Workplace Search product onto the pages array', () => { + const title = workplaceSearchTitle(['Sources']); + expect(title).toEqual('Sources - Workplace Search'); + }); + + it('falls back to product name', () => { + const title = workplaceSearchTitle(); + expect(title).toEqual('Workplace Search'); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.ts b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.ts new file mode 100644 index 00000000000000..706baefc00cc2f --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/generate_title.ts @@ -0,0 +1,38 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + ENTERPRISE_SEARCH_PLUGIN, + APP_SEARCH_PLUGIN, + WORKPLACE_SEARCH_PLUGIN, +} from '../../../../common/constants'; + +/** + * Generate a document title that generally follows our breadcrumb trails + * https://github.com/elastic/kibana/blob/master/docs/development/core/public/kibana-plugin-core-public.chromedoctitle.md + */ + +export type TTitle = string[]; + +/** + * Given an array of page titles, return a final formatted document title + * @param pages - e.g., ['Curations', 'some Engine', 'App Search'] + * @returns - e.g., 'Curations | some Engine | App Search' + */ +export const generateTitle = (pages: TTitle) => pages.join(' - '); + +/** + * Product-specific helpers + */ + +export const enterpriseSearchTitle = (page: TTitle = []) => + generateTitle([...page, ENTERPRISE_SEARCH_PLUGIN.NAME]); + +export const appSearchTitle = (page: TTitle = []) => + generateTitle([...page, APP_SEARCH_PLUGIN.NAME]); + +export const workplaceSearchTitle = (page: TTitle = []) => + generateTitle([...page, WORKPLACE_SEARCH_PLUGIN.NAME]); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/index.ts similarity index 52% rename from x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/index.ts rename to x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/index.ts index c4ef68704b7e0e..4468d11ba94c94 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/index.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/index.ts @@ -4,9 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { - enterpriseSearchBreadcrumbs, - appSearchBreadcrumbs, - workplaceSearchBreadcrumbs, -} from './generate_breadcrumbs'; -export { SetAppSearchBreadcrumbs, SetWorkplaceSearchBreadcrumbs } from './set_breadcrumbs'; +export { SetAppSearchChrome, SetWorkplaceSearchChrome } from './set_chrome'; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.test.tsx new file mode 100644 index 00000000000000..aba0b250e56c03 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.test.tsx @@ -0,0 +1,84 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; + +import '../../__mocks__/react_router_history.mock'; +import { mockKibanaContext, mountWithKibanaContext } from '../../__mocks__'; + +jest.mock('./generate_breadcrumbs', () => ({ + appSearchBreadcrumbs: jest.fn(() => (crumbs: any) => crumbs), + workplaceSearchBreadcrumbs: jest.fn(() => (crumbs: any) => crumbs), +})); +import { appSearchBreadcrumbs, workplaceSearchBreadcrumbs } from './generate_breadcrumbs'; + +jest.mock('./generate_title', () => ({ + appSearchTitle: jest.fn((title: any) => title), + workplaceSearchTitle: jest.fn((title: any) => title), +})); +import { appSearchTitle, workplaceSearchTitle } from './generate_title'; + +import { SetAppSearchChrome, SetWorkplaceSearchChrome } from './'; + +describe('SetAppSearchChrome', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + afterEach(() => { + expect(appSearchBreadcrumbs).toHaveBeenCalled(); + expect(appSearchTitle).toHaveBeenCalled(); + }); + + it('sets breadcrumbs and document title', () => { + mountWithKibanaContext(); + + expect(mockKibanaContext.setBreadcrumbs).toHaveBeenCalledWith([ + { + text: 'Engines', + path: '/current-path', + }, + ]); + expect(mockKibanaContext.setDocTitle).toHaveBeenCalledWith(['Engines']); + }); + + it('sets empty breadcrumbs and document title when isRoot is true', () => { + mountWithKibanaContext(); + + expect(mockKibanaContext.setBreadcrumbs).toHaveBeenCalledWith([]); + expect(mockKibanaContext.setDocTitle).toHaveBeenCalledWith([]); + }); +}); + +describe('SetWorkplaceSearchChrome', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + afterEach(() => { + expect(workplaceSearchBreadcrumbs).toHaveBeenCalled(); + expect(workplaceSearchTitle).toHaveBeenCalled(); + }); + + it('sets breadcrumbs and document title', () => { + mountWithKibanaContext(); + + expect(mockKibanaContext.setBreadcrumbs).toHaveBeenCalledWith([ + { + text: 'Sources', + path: '/current-path', + }, + ]); + expect(mockKibanaContext.setDocTitle).toHaveBeenCalledWith(['Sources']); + }); + + it('sets empty breadcrumbs and document title when isRoot is true', () => { + mountWithKibanaContext(); + + expect(mockKibanaContext.setBreadcrumbs).toHaveBeenCalledWith([]); + expect(mockKibanaContext.setDocTitle).toHaveBeenCalledWith([]); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.tsx similarity index 66% rename from x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx rename to x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.tsx index e54f1a12b73cb9..59e83a2cb13c22 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_chrome/set_chrome.tsx @@ -13,9 +13,10 @@ import { workplaceSearchBreadcrumbs, TBreadcrumbs, } from './generate_breadcrumbs'; +import { appSearchTitle, workplaceSearchTitle, TTitle } from './generate_title'; /** - * Small on-mount helper for setting Kibana's chrome breadcrumbs on any App Search view + * Helpers for setting Kibana chrome (breadcrumbs, doc titles) on React view mount * @see https://github.com/elastic/kibana/blob/master/src/core/public/chrome/chrome_service.tsx */ @@ -31,27 +32,31 @@ interface IRootBreadcrumbsProps { } type TBreadcrumbsProps = IBreadcrumbsProps | IRootBreadcrumbsProps; -export const SetAppSearchBreadcrumbs: React.FC = ({ text, isRoot }) => { +export const SetAppSearchChrome: React.FC = ({ text, isRoot }) => { const history = useHistory(); - const { setBreadcrumbs } = useContext(KibanaContext) as IKibanaContext; + const { setBreadcrumbs, setDocTitle } = useContext(KibanaContext) as IKibanaContext; const crumb = isRoot ? [] : [{ text, path: history.location.pathname }]; + const title = isRoot ? [] : [text]; useEffect(() => { setBreadcrumbs(appSearchBreadcrumbs(history)(crumb as TBreadcrumbs | [])); + setDocTitle(appSearchTitle(title as TTitle | [])); }, []); return null; }; -export const SetWorkplaceSearchBreadcrumbs: React.FC = ({ text, isRoot }) => { +export const SetWorkplaceSearchChrome: React.FC = ({ text, isRoot }) => { const history = useHistory(); - const { setBreadcrumbs } = useContext(KibanaContext) as IKibanaContext; + const { setBreadcrumbs, setDocTitle } = useContext(KibanaContext) as IKibanaContext; const crumb = isRoot ? [] : [{ text, path: history.location.pathname }]; + const title = isRoot ? [] : [text]; useEffect(() => { setBreadcrumbs(workplaceSearchBreadcrumbs(history)(crumb as TBreadcrumbs | [])); + setDocTitle(workplaceSearchTitle(title as TTitle | [])); }, []); return null; diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/error_state/error_state.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/error_state/error_state.tsx index a1bc17e05dc056..e1114986d22446 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/error_state/error_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/error_state/error_state.tsx @@ -9,14 +9,14 @@ import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui'; import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants'; import { ErrorStatePrompt } from '../../../shared/error_state'; -import { SetWorkplaceSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; import { ViewContentHeader } from '../shared/view_content_header'; export const ErrorState: React.FC = () => { return ( - + diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview.tsx index b75a2841dad9b0..2c3e78b404d42a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview.tsx @@ -9,7 +9,7 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useActions, useValues } from 'kea'; -import { SetWorkplaceSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; import { KibanaContext, IKibanaContext } from '../../../index'; @@ -72,7 +72,7 @@ export const Overview: React.FC = () => { return ( - + diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.test.tsx index b87c35d5a5942d..73cf4b419f9449 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { SetWorkplaceSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide'; import { SetupGuide } from './'; @@ -16,6 +16,6 @@ describe('SetupGuide', () => { const wrapper = shallow(); expect(wrapper.find(SetupGuideLayout)).toHaveLength(1); - expect(wrapper.find(SetBreadcrumbs)).toHaveLength(1); + expect(wrapper.find(SetPageChrome)).toHaveLength(1); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.tsx index e96d114c67c5d5..f9b00bdf29642d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/setup_guide/setup_guide.tsx @@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n'; import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants'; import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide'; -import { SetWorkplaceSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; import GettingStarted from '../../assets/getting_started.png'; @@ -26,7 +26,7 @@ export const SetupGuide: React.FC = () => { standardAuthLink="https://www.elastic.co/guide/en/workplace-search/current/workplace-search-security.html#standard" elasticsearchNativeAuthLink="https://www.elastic.co/guide/en/workplace-search/current/workplace-search-security.html#elasticsearch-native-realm" > - { const [coreStart] = await core.getStartServices(); + const { chrome } = coreStart; + chrome.docTitle.change(APP_SEARCH_PLUGIN.NAME); await this.setPublicUrl(config, coreStart.http); @@ -68,6 +70,8 @@ export class EnterpriseSearchPlugin implements Plugin { category: DEFAULT_APP_CATEGORIES.enterpriseSearch, mount: async (params: AppMountParameters) => { const [coreStart] = await core.getStartServices(); + const { chrome } = coreStart; + chrome.docTitle.change(WORKPLACE_SEARCH_PLUGIN.NAME); const { renderApp } = await import('./applications'); const { WorkplaceSearch } = await import('./applications/workplace_search'); diff --git a/x-pack/test/functional_enterprise_search/apps/enterprise_search/with_host_configured/app_search/engines.ts b/x-pack/test/functional_enterprise_search/apps/enterprise_search/with_host_configured/app_search/engines.ts index 1742ed443984ba..85ae4d77b828ff 100644 --- a/x-pack/test/functional_enterprise_search/apps/enterprise_search/with_host_configured/app_search/engines.ts +++ b/x-pack/test/functional_enterprise_search/apps/enterprise_search/with_host_configured/app_search/engines.ts @@ -52,6 +52,9 @@ export default function enterpriseSearchSetupEnginesTests({ await retry.try(async function () { const currentUrl = await browser.getCurrentUrl(); expect(currentUrl).to.contain('/app_search'); + + const documentTitle = await browser.getTitle(); + expect(documentTitle).to.contain('App Search - Elastic'); }); }); diff --git a/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/app_search/setup_guide.ts b/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/app_search/setup_guide.ts index 76a47cc4a7e105..86c35db504eaba 100644 --- a/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/app_search/setup_guide.ts +++ b/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/app_search/setup_guide.ts @@ -29,6 +29,9 @@ export default function enterpriseSearchSetupGuideTests({ await retry.try(async function () { const currentUrl = await browser.getCurrentUrl(); expect(currentUrl).to.contain('/app_search/setup_guide'); + + const documentTitle = await browser.getTitle(); + expect(documentTitle).to.contain('Setup Guide - App Search - Elastic'); }); }); }); diff --git a/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/workplace_search/setup_guide.ts b/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/workplace_search/setup_guide.ts index 20145306b21c8e..81d600952cd438 100644 --- a/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/workplace_search/setup_guide.ts +++ b/x-pack/test/functional_enterprise_search/apps/enterprise_search/without_host_configured/workplace_search/setup_guide.ts @@ -29,6 +29,9 @@ export default function enterpriseSearchSetupGuideTests({ await retry.try(async function () { const currentUrl = await browser.getCurrentUrl(); expect(currentUrl).to.contain('/workplace_search/setup_guide'); + + const documentTitle = await browser.getTitle(); + expect(documentTitle).to.contain('Setup Guide - Workplace Search - Elastic'); }); }); });