[APM] More descriptive page titles

Instead of using only the text of the last breadcrumb for the page title, use the breadcrumbs to create a reverse list of items (since in the page title we want the most relevant item at the beginning) that are pipe-separated.

This only affects the page titles in APM, since Infra uses a different mechanism for breadcrumbs and page titles.

The implementation doesn't exactly match the discussion on elastic#41456, and there's no truncation, but it should be an improvement.

Also update the tests so that they more accurately reflect the routes actually being used in the app.

Fixes elastic#41456.

x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.tsx

@@ -5,7 +5,6 @@
  */
 
 import { Location } from 'history';
-import { last } from 'lodash';
 import React from 'react';
 import { InternalCoreStart } from 'src/core/public';
 import { useKibanaCore } from '../../../../../observability/public';
@@ -19,15 +18,21 @@ interface Props {
   core: InternalCoreStart;
 }
 
+function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumb[]) {
+  return breadcrumbs
+    .map(({ value }) => value)
+    .reverse()
+    .join(' | ');
+}
+
 class UpdateBreadcrumbsComponent extends React.Component<Props> {
   public updateHeaderBreadcrumbs() {
     const breadcrumbs = this.props.breadcrumbs.map(({ value, match }) => ({
       text: value,
       href: getAPMHref(match.url, this.props.location.search)
     }));
 
-    const current = last(breadcrumbs) || { text: '' };
-    document.title = current.text;
+    document.title = getTitleFromBreadCrumbs(this.props.breadcrumbs);
     this.props.core.chrome.setBreadcrumbs(breadcrumbs);
   }
 

x-pack/legacy/plugins/apm/public/components/app/Main/__test__/UpdateBreadcrumbs.test.js

@@ -22,17 +22,17 @@ const coreMock = {
 
 jest.spyOn(kibanaCore, 'useKibanaCore').mockReturnValue(coreMock);
 
-function expectBreadcrumbToMatchSnapshot(route) {
+function expectBreadcrumbToMatchSnapshot(route, params = '') {
   mount(
-    <MemoryRouter initialEntries={[`${route}?kuery=myKuery`]}>
+    <MemoryRouter initialEntries={[`${route}?kuery=myKuery&${params}`]}>
       <UpdateBreadcrumbs />
     </MemoryRouter>
   );
   expect(coreMock.chrome.setBreadcrumbs).toHaveBeenCalledTimes(1);
   expect(coreMock.chrome.setBreadcrumbs.mock.calls[0][0]).toMatchSnapshot();
 }
 
-describe('Breadcrumbs', () => {
+describe('UpdateBreadcrumbs', () => {
   let realDoc;
 
   beforeEach(() => {
@@ -54,35 +54,32 @@ describe('Breadcrumbs', () => {
 
   it('/services/:serviceName/errors/:groupId', () => {
     expectBreadcrumbToMatchSnapshot('/services/opbeans-node/errors/myGroupId');
-    expect(global.document.title).toMatchInlineSnapshot(`"myGroupId"`);
+    expect(global.document.title).toMatchInlineSnapshot(
+      `"myGroupId | Errors | opbeans-node | Services | APM"`
+    );
   });
 
   it('/services/:serviceName/errors', () => {
     expectBreadcrumbToMatchSnapshot('/services/opbeans-node/errors');
-    expect(global.document.title).toMatchInlineSnapshot(`"Errors"`);
-  });
-
-  it('/:serviceName', () => {
-    expectBreadcrumbToMatchSnapshot('/opbeans-node');
-    expect(global.document.title).toMatchInlineSnapshot(`"APM"`);
+    expect(global.document.title).toMatchInlineSnapshot(
+      `"Errors | opbeans-node | Services | APM"`
+    );
   });
 
   it('/services/:serviceName/transactions', () => {
     expectBreadcrumbToMatchSnapshot('/services/opbeans-node/transactions');
-    expect(global.document.title).toMatchInlineSnapshot(`"Transactions"`);
-  });
-
-  it('/services/:serviceName/transactions/:transactionType', () => {
-    expectBreadcrumbToMatchSnapshot(
-      '/services/opbeans-node/transactions/request'
+    expect(global.document.title).toMatchInlineSnapshot(
+      `"Transactions | opbeans-node | Services | APM"`
     );
-    expect(global.document.title).toMatchInlineSnapshot(`"Transactions"`);
   });
 
-  it('/services/:serviceName/transactions/:transactionType/:transactionName', () => {
+  it('/services/:serviceName/transactions/view?transactionName=my-transaction-name', () => {
     expectBreadcrumbToMatchSnapshot(
-      '/services/opbeans-node/transactions/request/my-transaction-name'
+      '/services/opbeans-node/transactions/view',
+      'transactionName=my-transaction-name'
+    );
+    expect(global.document.title).toMatchInlineSnapshot(
+      `"my-transaction-name | Transactions | opbeans-node | Services | APM"`
     );
-    expect(global.document.title).toMatchInlineSnapshot(`"Transactions"`);
   });
 });