[APM] Remove link from active page in the breadcrumb (elastic#65473)

x-pack/plugins/apm/public/components/app/Main/__test__/ProvideBreadcrumbs.test.tsx → x-pack/plugins/apm/public/components/app/Main/ProvideBreadcrumbs.test.tsx

@@ -5,8 +5,8 @@
  */
 
 import { Location } from 'history';
-import { BreadcrumbRoute, getBreadcrumbs } from '../ProvideBreadcrumbs';
-import { RouteName } from '../route_config/route_names';
+import { BreadcrumbRoute, getBreadcrumbs } from './ProvideBreadcrumbs';
+import { RouteName } from './route_config/route_names';
 
 describe('getBreadcrumbs', () => {
   const getTestRoutes = (): BreadcrumbRoute[] => [

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

@@ -30,10 +30,18 @@ function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumb[]) {
 
 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 breadcrumbs = this.props.breadcrumbs.map(
+      ({ value, match }, index) => {
+        const isLastBreadcrumbItem =
+          index === this.props.breadcrumbs.length - 1;
+        return {
+          text: value,
+          href: isLastBreadcrumbItem
+            ? undefined // makes the breadcrumb item not clickable
+            : getAPMHref(match.url, this.props.location.search)
+        };
+      }
+    );
 
     document.title = getTitleFromBreadCrumbs(this.props.breadcrumbs);
     this.props.core.chrome.setBreadcrumbs(breadcrumbs);