Removes APM custom breadcrumbs, leaves only chrome.breadcrumbs.set

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

@@ -0,0 +1,58 @@
+/*
+ * 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 { Location } from 'history';
+import { flatten } from 'lodash';
+import React from 'react';
+// @ts-ignore
+import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc';
+import chrome from 'ui/chrome';
+import { toQuery } from '../../shared/Links/url_helpers';
+import { routes } from './routeConfig';
+
+interface Props {
+  location: Location;
+  breadcrumbs: Array<{
+    breadcrumb: any;
+    match: {
+      url: string;
+    };
+  }>;
+}
+
+class UpdateBreadcrumbsComponent extends React.Component<Props> {
+  public updateHeaderBreadcrumbs() {
+    const { _g = '', kuery = '' } = toQuery(this.props.location.search);
+    const breadcrumbs = this.props.breadcrumbs.map(({ breadcrumb, match }) => ({
+      text: breadcrumb,
+      href: `#${match.url}?_g=${_g}&kuery=${kuery}`
+    }));
+
+    chrome.breadcrumbs.set(breadcrumbs);
+  }
+
+  public componentDidMount() {
+    this.updateHeaderBreadcrumbs();
+  }
+
+  public componentDidUpdate() {
+    this.updateHeaderBreadcrumbs();
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+const flatRoutes = flatten(
+  routes.map(route => (route.switchRoutes ? route.switchRoutes : route))
+);
+
+const UpdateBreadcrumbs = withBreadcrumbs(flatRoutes)(
+  UpdateBreadcrumbsComponent
+);
+
+export { UpdateBreadcrumbs };

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

@@ -7,15 +7,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
-
-import Breadcrumbs from '../Breadcrumbs';
-import { toJson } from '../../../../utils/testHelpers';
+import { UpdateBreadcrumbs } from '../UpdateBreadcrumbs';
+import chrome from 'ui/chrome';
 
 jest.mock(
   'ui/chrome',
   () => ({
     breadcrumbs: {
-      set: () => {}
+      set: jest.fn()
     },
     getBasePath: () => `/some/base/path`,
     getUiSettingsClient: () => {
@@ -37,17 +36,20 @@ jest.mock(
 );
 
 function expectBreadcrumbToMatchSnapshot(route) {
-  const wrapper = mount(
+  mount(
     <MemoryRouter initialEntries={[`${route}?_g=myG&kuery=myKuery`]}>
-      <Breadcrumbs showPluginBreadcrumbs={true} />
+      <UpdateBreadcrumbs />
     </MemoryRouter>
   );
-  expect(
-    toJson(wrapper.find('.kuiLocalBreadcrumb').children())
-  ).toMatchSnapshot();
+  expect(chrome.breadcrumbs.set).toHaveBeenCalledTimes(1);
+  expect(chrome.breadcrumbs.set.mock.calls[0][0]).toMatchSnapshot();
 }
 
 describe('Breadcrumbs', () => {
+  beforeEach(() => {
+    chrome.breadcrumbs.set.mockReset();
+  });
+
   it('Homepage', () => {
     expectBreadcrumbToMatchSnapshot('/');
   });
@@ -77,13 +79,4 @@ describe('Breadcrumbs', () => {
       '/:serviceName/transactions/request/my-transaction-name'
     );
   });
-
-  it('does not render breadcrumbs when showPluginBreadcrumbs = false', () => {
-    const wrapper = mount(
-      <MemoryRouter initialEntries={[`/?_g=myG&kuery=myKuery`]}>
-        <Breadcrumbs showPluginBreadcrumbs={false} />
-      </MemoryRouter>
-    );
-    expect(wrapper.find('.kuiLocalBreadcrumbs').exists()).toEqual(false);
-  });
 });